HTML form using jQuery AJAX

Question

I need to retrieve data from server using jQuery AJAX on HTML form then store the response data in a php string variable. So far my code is:

<form method="post" name="myform" id="myform" action="https://domain.com/cgi-bin/cgi.exe">
<input name="exec" value="viewproduct" type="hidden">
<input name="customer" value="customer_name" type="hidden">
<input name="sku" value="sku_number" type="hidden">
<input name="submit" type="button">
</form>
<div id="results"></div>
<script type="text/javascript">
jQuery("#myform").submit(function(e){
    var postData = jQuery(this).serializeArray();
    var formURL = jQuery(this).attr("action");
    jQuery.ajax(
    {
       url : formURL,
       type: "POST",
       data : postData,
       success:function(data, textStatus, jqXHR)
       {
         jQuery('#results').html(data.toString());
       },
       error: function(jqXHR, textStatus, errorThrown)
       {
         alert('fail');    
       }
    });
    e.preventDefault();
});

jQuery(document).ready(function() {
  jQuery("#myform").submit();
});
</script>

But I still haven't see any result. If I just use the form normally without any js code, then I'll get the raw response data from the server/database directly on the browser. How can I save that raw response data on the browser into a string variable in php?

You're not getting the fail alert, right? If #results is remaining blank, either it's not visible, or your php isn't returning anything. — user400654
– user400654, Commented Jan 20, 2014 at 21:59
"How can I save that raw response data on the browser into a string variable in php?" doesn't make sense. can you please clarify? — user400654
– user400654, Commented Jan 20, 2014 at 22:00
sorry what I meant to lead to was that there's no data in the form being submitted — Deryck
– Deryck, Commented Jan 20, 2014 at 22:03
I'd actually bet that his form is following through with the actual action URL before the data returns from the AJAX call. It won't wait for that to finish if he doesn't e.preventDefault() first. — Deryck
– Deryck, Commented Jan 20, 2014 at 22:05
I did get the alert fail. I've tried to add the preventDefault, but still get no response. Again, if I use the bare form only, then I do get response from the server/database. My concern is, how can I capture that raw data into a variable before it's shown up on the browser. — user1576748
– user1576748, Commented Jan 20, 2014 at 22:14

Deryck · Accepted Answer · 2014-01-20 22:12:55Z

1

Change your submit() handler to include this in the first line:

jQuery("#myform").submit(function(e){
    e.preventDefault();  //  <---
    ....

and/or add return false; to the end of it.

If that stops it from reloading but doesn't show anything in your #results div, troubleshoot by changing your success() in the AJAX to use this:

jQuery('#results').html(data.toString());

If that shows something, go to your server code and split up your data into individual properties that your Javascript can separate and use individually (or combine it all into one big string if you want).

.html() takes an input of String, not an object (which data is in this case).

edited Jan 20, 2014 at 22:12

answered Jan 20, 2014 at 22:07

Deryck

7,6662 gold badges27 silver badges44 bronze badges

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

8 Comments

user1576748 Over a year ago

Thanks, but it still return "fail".

Deryck Over a year ago

That's good. It means your server code is what you need to worry about now. You can post that too if you want help with it

user1576748 Over a year ago

Wish I could, but the remote server/database is not even using PHP. The server does send response in http response format (if I use regular form). I need to capture that response into a file or a variable to be parsed.

Deryck Over a year ago

Instead of alert('fail') you can do console.log(jqXHR); and also console.log(textStatus); and console.log(errorThrown); and view the results in your console to see what the root of the issue is

user1576748 Over a year ago

Thank you. I got this error: "NetworkError: 400 CONTENT_TYPE!=appli...n/x-www-form-urlencoded - domain.com/cgi-bin/cgi.exe"

|

Josh LaMar · Accepted Answer · 2014-01-20 23:42:57Z

0

You won't be able to store the Javascript value into a PHP variable because PHP runs on the server and returns a response to the browser where Javascript runs on the browser. What you could do is call your script with AJAX and then set your form values with jQuery using

$("input[name=customer]").val(data);

You could either have an AJAX call for each input or you could parse out the return string to get each value. The first may be more straight forward.

If the action is becoming an issue, remove the entirely and just add an onClick to the submit button that calls a function that makes the AJAX calls.

Hope this helps!

answered Jan 20, 2014 at 23:42

Josh LaMar

2194 silver badges8 bronze badges

1 Comment

user1576748 Over a year ago

Thank you. Actually, I run the above codes in a PHP file. I'm trying to capture the HTTP Response data that are sent by the server after submitting the 3 values in the form.

Collectives™ on Stack Overflow

HTML form using jQuery AJAX

2 Answers 2

8 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related