Question

I have this:

  $(document).ready(function() {
    $("input[type=button]").click(function () {
        $("#test").html("W3Schools");
        alert("Would submit: " + $(this).siblings("input[type=text]").val());
        $.ajax({ url: "index.php",
        data: {action: $(this).siblings("input[type=text]").val()},
        type: 'post'
        });
    });
});

That ‘W3Schools’ is obviously just filler, I have a function named ‘generateHTML()’ in my php script that I’d like to put in place of the ‘W3Schools’. How can I go about this?

Answer 1

Wherever you define that function, use echo response instead of return response.

So whenever you call $.ajax function, it’ll give that response that you can use in html.

PHP function :

function generateHTML(){
 // code
  echo $response;
}

JS :

$(document).ready(function() {
    $("input[type=button]").click(function () {
        $("#test").html("W3Schools");
        alert("Would submit: " + $(this).siblings("input[type=text]").val());
        $.ajax({ url: "index.php",
        data: {action: $(this).siblings("input[type=text]").val()},
        type: 'post',
        success: function(response){
              $("#test").html(response); // will overwrite the previous HTML of test element
            }
        });
    });
});