2

I want to change my button text as below, I have two select option, draft and publish. When I select to the draft option, button text must be change. But I can't change it without refreshing page. How can I do that ?

<body>
<button id="button" value=""></button>
<select name="select" id="draftOrPublish">
    <option value="0">Draft</option>
    <option value="1">Publish</option>
</select>
</body>
<script>
    var draftOrPublish = $('select#draftOrPublish').val();

    if (draftOrPublish == 0) {

        $('button#button').text('Save as Draft')

    } else if (draftOrPublish == 1) {

        $('button#button').text('Publish')
    }
</script>
Improve this question
1
  • 1
    encapsulate your script code into a function. For the onchange attribute of the select, have it call the function. Commented Dec 18, 2017 at 2:46

3 Answers 3

Reset to default
2

You have to put the code inside $(document).ready and $( 'select#draftOrPublish' ).change

$(document).ready - A page can't be manipulated safely until the document is "ready."

$( 'select#draftOrPublish' ).change - Bind an event handler to the "change" JavaScript event, or trigger that event on an element.

$(document).ready(function(){
	$( 'select#draftOrPublish' ).change(function(){
					
		var draftOrPublish = $('select#draftOrPublish').val();

		if (draftOrPublish == 0) {

			$('button#button').text('Save as Draft')

		} else if (draftOrPublish == 1) {

			$('button#button').text('Publish')
		}
	});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<button id="button" value=""></button>
<select name="select" id="draftOrPublish">
	<option value="0">Draft</option>
	<option value="1">Publish</option>
</select>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

You need to bring this into a function in order to assess whether or not the value of the select has changed. This is called an event, and you need an event listener attached to your <select> tag so that you can apply your event handler to change the text of the button. jQuery has a .change() function you can use to listen to the <select> tag

 var draftOrPublish = $('#draftOrPublish').val();    
 if (draftOrPublish == 0) {

      $('#button').text('Save as Draft')

  } else if (draftOrPublish == 1) {

      $('#button').text('Publish')
  }

$('#draftOrPublish').change(function () {
  var draftOrPublish = $('#draftOrPublish').val();
    console.log(draftOrPublish)
  if (draftOrPublish == 0) {

      $('#button').text('Save as Draft')

  } else if (draftOrPublish == 1) {

      $('#button').text('Publish')
  }
})
Improve this answer

Comments

0

You can use change() in jQuery to change text and value dynamically without page load.

$('#draftPublish').change(function () {
  var draftPublish = $('#draftPublish').val();
  if (draftPublish === "0") {
      $('#btn').text('Save as Draft');
      $('#btn').val('draft');

  } else if (draftPublish === "1") {
      $('#btn').text('Publish');
      $('#btn').val('publish');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="btn" value="draft">Save as Draft</button>
<select name="select" id="draftPublish">
	<option value="0">Draft</option>
	<option value="1">Publish</option>
</select>

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.