jQuery form submission fail

Question

Good Afternoon everybody.

I have got a quick question to ask about why my jQuery is not submitting my form data.

This is my form:

 <form id="submitForm" action="" method="">
 <input class="ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-c" type="text" name="from" placeholder="Your Email" style="color:#ccc;" />
 <input class="ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-c" type="text" name="fullName" placeholder="Your Full Name" style="color:#ccc;" />
 <input class="ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-c" type="text" name="contactNumber" placeholder="Your Contact Number" style="color:#ccc;" />
 <input class="ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-c" type="text" name="subject" placeholder="Subject" style="color:#ccc;" />
 <textarea placeholder="Your Message Here..." class="ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-c" name="body" style="color:#ccc;" ></textarea>
 <input type="submit" id="search_button" value="Submit!" name="submit" />
 </form>

Here is my jQuery code:

 <script type="text/javascript">
 $(document).ready(function(){
 $('#loading, .loading-text').hide();
 $('form#submitForm').submit(function( event ){
 event.preventDefault();
 document.write('Hola!');
 $('#loading').show();
 var formData = $('form#submitForm').serialize();
 $.ajax({
 url: 'mAjax.php',
 data: formData,
 type: "get",
 success: function( data ){
 $('#loading, .loading-text').show();
 if( !data.error ){
 $('.alertText').html(data).show();
 } else {
 $('.alertText').html(data + data).show();
 }
 $('#loading, .loading-text').hide();
 }
 });
 return false;
 });
 });
 </script>

I know this may be a vague question, but I have been trying for a while now and I can't think of anything else to try.

The problem that I'm having is that when I click submit or just submit the form, nothing happens, it doens't reach the document.write('Hola!'); bit and it most definatly doesn't reach the AJAX call.

Any help on what I could try to help this would be much appreciated.

Thanks in advance!

• Ariful Islam: since you use "submitForm" as a "id" of form then no need to write like $('form#submitForm') just use $('#submitForm')
• njr101: Pasted your code into jsFiddle here jsfiddle.net/KnWte and it's working correctly. It's definitely reaching the document.write('Hola')
• Paul Stanley: The message appears in jfiddle. jsfiddle.net/yt9YY Did you include the jquery script? Did you include this file after you included jquery?
• DarkMantis: I definatly have the jQuery scripts included. Mobile jQuery and normal. I have changed it to just $('#submitForm') and that made no difference, but worth a try. Thanks again
• noinstance: Maybe it isn't reaching mAjax.php? Check the file path.

Answer 1

I think this is because you didn't provide a method and an action.
Instead of:

<form id="submitForm" action="" method="">

Do:

<form id="submitForm" action="[your current file]" method="GET">

• DarkMantis: I don't think that's the problem because the form is being serialized anyways, as long as it has got an id or you are correctly pointint it to towards that form then it should be fine. Thanks anyway!
• DarkMantis: I think it was a mixture between a few things, but I used your answer as well as other things. So thanks!