Note that there are some explanatory texts on larger screens.

plurals
  1. POAjax post adds parameters to home link
    text
    copied!<p>I'm going to start off that I'm not really experienced in web development, so excuse if this question sound rather dumb or the solution is obvious but I can't seem to find it on this site or google. Basically I have an HTML form and want to post data to a PHP script which mails the data to a specific email address. This is the HTML code:</p> <pre><code>&lt;form id="contact-form" name="contactform" action=""&gt; &lt;fieldset&gt; &lt;p class="contact-name"&gt; &lt;input id="name" type="text" placeholder="Full Name" value="" name="name"/&gt; &lt;label class="error" for="name" id="name_error"&gt;This field is required.&lt;/label&gt; &lt;/p&gt; &lt;p class="contact-email"&gt; &lt;input id="email" type="text" placeholder="Email Address" value="" name="email"/&gt; &lt;label class="error" for="email" id="email_error"&gt;This field is required.&lt;/label&gt; &lt;/p&gt; &lt;p class="contact-message"&gt; &lt;textarea id="message" placeholder="Your Message" name="message" rows="15" cols="40"&gt;&lt;/textarea&gt; &lt;label class="error" for="message" id="message_error"&gt;This field is required.&lt;/label&gt; &lt;/p&gt; &lt;p class="contact-submit"&gt; &lt;input type="submit" value="Submit" id="submit_button" class="button"&gt; &lt;/p&gt; &lt;/fieldset&gt; &lt;/form&gt; </code></pre> <p>This is the jQuery &amp; Ajax code to validate the data:</p> <pre><code>$(document).ready(function() { $('.error').hide(); $(".button").click(function() { //validate process var name = $("input#name").val(); if (name == "") { $("label#name_error").show(); $("input#name").focus(); return false; } var email = $("input#email").val(); if (email == "") { $("label#email_error").show(); $("input#email").focus(); return false; } var message = $("textarea#message").val(); if (message == "") { $("label#message_error").show(); $("textarea#message").focus(); return false; } }); var dataString = 'name='+ name + '&amp;email=' + email + '&amp;message=' + message; $.ajax({ type: "POST", url: "_include/php/contact.php", data: dataString, }); return false; }); </code></pre> <p>The problem that occurs here is not the fact that the JS code doesn't run but the post adds the parameters to the current link like: http//website.com/index.html?name=test&amp;email=email&amp;message=msg</p> <p>But I need it to add the parameters to my PHP file which is located at _include/php/contact.php</p> <p>Update: So I've tried various answers and thanks for the great replies but I'm still stuck. I can choose to set the action of the form to the PHP file but that means that my page is refreshed and that is something that I want to avoid. The other js scripts didn't seem to change the fact that the parameters are added to the wrong link..</p>
 

Querying!

 
Guidance

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