Databases
StackOverflow2013
Postsdbo
POAjax form submit, validate and return success or fail
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAjax form submit, validate and return success or fail
    text
    copied!<p>Searched and browsed the forum and tried many examples of ajax and form submission but can't get anything close to work for what I am trying to achieve. I must admit I've been going in circles for days with this and need someone with a fresh pair of eyes.</p> <p>I have 2 pages: page1.php page2.php</p> <p>Using Google jquery/1.9.0/jquery.js and developing this locally.</p> <p>page1.php is as follows (I've omitted the head script and body/html tags for clarity)</p> <pre><code>$(document).ready(function() { $('#theForm').submit(function(){ $.ajax({ type: "POST", url: "page2.php", data: 'html', success: function(html){ if(html == 'success'){ $('#address').fadeOut('slow'); $('#done').fadeIn('slow'); }else if(html == 'fail'){ alert('fail'); } } }); return false; }); }); &lt;div id="address"&gt; &lt;form action="page2.php" method="post" name="theForm"&gt; &lt;input name="checkname" type="text" id="checkname"&gt; &lt;input name="Proceed" type="submit" id="submit" value="Next Page" /&gt; &lt;/form&gt; &lt;/div&gt; &lt;div id="done"&gt; That Worked! &lt;/div&gt; </code></pre> <p>Page2.php Has a mysql query that checks the database for the checkname and echoes 'success' or ' fail' depending upon the result. The query runs fine and is not showing any error.</p> <p>When the form is submitted page2.php loads and just shows 'success' in the browser. Firebug also shows success under both response and html. There are no errors within firebug.</p> <p>I basically want page1.php to stay and for the #address div to hide and the #done div to show when success is passed from page2.php</p> <p>Hope someone can help.</p> <p><strong>Update</strong> I tried this test page:</p> <p><strong>ajaxone.php</strong></p> <pre><code>&lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(document).ready(function() { $('#theForm').submit(function(){ $.ajax({ type: "POST", url: "ajaxtwo.php", data: 'html', success: function(html){ if(html == 'success'){ $('#address').fadeOut('slow'); $('#payment').fadeIn('slow'); alert('ok'); }else if(html == 'fail'){ alert('fail'); } } }); return false; }); }); &lt;/script&gt; &lt;style type="text/css"&gt; #payment{ visibility:hidden; } &lt;/style&gt; &lt;div id="address"&gt; &lt;form action="ajaxtwo.php" method="post" name="theForm" id="theForm"&gt; &lt;p&gt; &lt;input name="name" type="text" id="name"&gt; &lt;/p&gt; &lt;p&gt; &lt;input type="submit" name="submit" value="submit"&gt; &lt;/p&gt; &lt;/form&gt;&lt;/div&gt; &lt;div id="payment"&gt;Name is correct&lt;/div&gt; </code></pre> <p><strong>ajaxtwo.php</strong></p> <pre><code>print_r($_POST); if($_POST['name'] == 'rob'){ echo 'success'; }else{ echo 'fail'; } </code></pre> <p>Using the above firebug shows the following error:</p> <p>Array ( ) Undefined index: name fail</p> <p>However, when I remove the ajax call the submit works and the data is passed. So, am I right to assume that if you do not specify the form variables within the ajax call nothing is posted to the next page?</p> <p><strong>Update 2</strong> Sorry I'm answering myself here. It does appear that you need to specify the form data to send within the ajax call. I've just added:</p> <pre><code>$('#theForm').serialize(); </code></pre> <p>within the ajax call and now the form submits without an error. However, this still goes to ajaxtwo.php and does not show the success or fail on the ajaxone.php page. So my next stage is to get the success or fail to show on ajaxone.php</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload