Databases
StackOverflow2013
Postsdbo
POnewbie ajax (jquery) issue
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POnewbie ajax (jquery) issue
    text
    copied!<p>I'm pretty strong with PHP, but javascript is totally new to me.</p> <p>I need to add various ajax functionality to my projects, for example for form validation etc.</p> <p>I've done some searching, watched some tutorials, and come up with a basic working example as follows:</p> <p>index.php:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;title&gt;Ajax form test&lt;/title&gt; &lt;style&gt; form input, form textarea { display:block; margin:1em; } form label { display:inline; } form button { padding:1em; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;h2&gt;CONTACT FORM&lt;/h2&gt; &lt;div id="form_content"&gt; &lt;form method="post" action="server.php" class="ajax"&gt; &lt;label for="name" value="name"&gt;name:&lt;/label&gt; &lt;input type="text" name="name" placeholder="name" /&gt; &lt;label for="email" value="email"&gt;email:&lt;/label&gt; &lt;input type="email" name="email" placeholder="email" /&gt; &lt;label for="message" value="message"&gt;message:&lt;/label&gt; &lt;textarea name="message" placeholder="message"&gt;&lt;/textarea&gt; &lt;input type="submit" value="send"&gt; &lt;/form&gt; &lt;/div&gt; &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt; &lt;script src="main.js"&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>main.js:</p> <pre><code>$('form.ajax').on('submit', function() { console.log('trigger'); var that = $(this), url = that.attr('action'), type = that.attr('method'), data = {}; that.find('[name]').each(function(index, value) { var that = $(this), name = that.attr('name'), value = that.val(); data[name] = value; }); $.ajax ({ url: url, type: type, data: data, success: function(response) { console.log(response); $('#form_content').load('server.php', data); } }); return false; }); </code></pre> <p>and finally, server.php:</p> <pre><code>&lt;?php if (isset($_POST) AND $_POST['name'] !='' AND $_POST['email'] !='' AND $_POST['message'] !='') { ?&gt; &lt;h4&gt;Your data was submitted as follows&lt;/h4&gt; &lt;br /&gt;name: &lt;?=$_POST['name']?&gt; &lt;br /&gt;email: &lt;?=$_POST['email']?&gt; &lt;br /&gt;message: &lt;?=$_POST['message']?&gt; &lt;?php } else { ?&gt; &lt;h3&gt;please fill in all form data correctly:&lt;/h3&gt; &lt;form method="post" action="server.php" class="ajax"&gt; &lt;label for="name" value="name"&gt;name:&lt;/label&gt; &lt;input type="text" name="name" placeholder="name" /&gt; &lt;label for="email" value="email"&gt;email:&lt;/label&gt; &lt;input type="email" name="email" placeholder="email" /&gt; &lt;label for="message" value="message"&gt;message:&lt;/label&gt; &lt;textarea name="message" placeholder="message"&gt;&lt;/textarea&gt; &lt;input type="submit" value="send"&gt; &lt;/form&gt; &lt;?php } </code></pre> <p>This all works fine, in that if I enter all form data and click submit, the ajax magic happens and I get a confirmation of the data. Also if not all data is loaded, the form is re-presented on the page. The problem is that in such a case, continuing to fill out the form data and then submit it loads the server.php page instead of repeating the ajax call until the form data is valid..</p> <p>I'm sure there's a better way to do this as it's my first attempt, but I haven't been able to find any solution by searching either here or on google, but that's probably mostly because I don't really know what to search for. how can I make the behaviour in the first instance repeatable until the form is submitted correctly ?</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