screamingnugget screamingnugget - 3 months ago 5
Ajax Question

How do you make the response of an HTML form update the text on a page?

I have a form in HTML as follows. I am trying to make it so the response (a string) of this POST becomes the text with id="answer".

<script src=""> </script>
<script src=""></script>
<script src="form.js"></script>
<form id="myForm"
<p><label>Input: <br><textarea name="formInput"></textarea></label></p>
<p><input type="submit" value="Submit" /></p>
<p id="answer">?</p>

I am attempting to use the jQuery Form plugin in a file called form.js, which consists of:

$(document).ready(function() {
target: "#answer"

What am I doing wrong here? I'm sure it's just something really dumb, and I know there are a lot of questions about HTML forms and jQuery, yet following them is proving unsuccessful. I just can't figure this out whatsoever as it's my first time attempting anything web-related. Thanks for the help!


You jQuery ajax calls appears to be incorrect. You can refactor it as below:

$(document).ready(function() {
    var postData = $(this).serializeArray();
    var formURL = $(this).attr("action");
        url : formURL,
        type: "POST",
        data : postData,
        success:function(data, textStatus, jqXHR) 
            // set the target data 
            console.log ('set the target data');
        error: function(jqXHR, textStatus, errorThrown) 
            //if fails   
            console.log ('server responded something else ...');