Change html element after jquery.ajax

Question

I am trying to change the HTML element #result after my code is sent via the post method

I tried to use .html() / .replace() but they did not work.

Here is my code

JS:

$("form input[type=submit]").click(function() {
  var your_selected_value = $('#bkb').val();
  $.ajax({
    type: "POST",
    url: 'getpro.php',
    data: {
      "selected": your_selected_value
    },

    success: function(data) {
      $('#result').html(data);


    },
    error: function(data) {

    }
  });
});

HTML:

<div id="lnw2">
  <form method="post" action='#'>
    <select id="bkb" name="selectpro">
      <?php loadcountry(); ?>
    </select>
    <input type="submit" name="submit" value="Get Selected Values" />
  </form>
</div>
<div id="result">
  <h3>test</h3>
</div>

PHP:

<? php
if (isset($_POST['selected'])) {
  $selected_val = $_POST['selected']; // Storing Selected Value In Variable
  echo "answer " .$selected_val; // Displaying Selected Value
}
?>

Answer 1

Replace

<input type="submit" name="submit" value="Get Selected Values" />

with

<input type="button" name="submit" value="Get Selected Values" />

Answer 2

The problem is, you're not preventing your form from being submitted in the first place, use preventDefault() method.

Here's the reference:

• https://api.jquery.com/event.preventdefault/

So your jQuery should be like this:

$("form input[type=submit]").click(function(e) {
    e.preventDefault();
    var your_selected_value = $('#bkb').val();
    $.ajax({
        type: "POST",
        url: 'getpro.php',
        data: {
            "selected": your_selected_value
        },

        success: function(data) {
            $('#result').html(data);


        },
        error: function(data) {

        }
    });
});