JQuery function submit() not submitting form

Question

I can't get the form to submit, the alert ($('#submit').val()); in the else with the submit comes up so the code is getting into the right place, but the form is not submitting.

Form has an id of othernames, submit button was called name and id of save at one point, currently both are set to submit.

any help appreciated.

$(document).ready(function(){
// force content into cnamex
$('#submit').click(function(event){
    event.preventDefault(); // prevent submit
    error = '';
    for ( var i = 0; i < 10; i++ ) {
        if  ($('#cname' + i).length > 0) {
            if ($('#cname' + i).val().length == 0) {
                error = 'Names for those attending are required';
            }
        }
    }
    if (error != '') {
        alert (error);
    }
    else {
        $('#othernames').submit();  
        alert ($('#submit').val());
    }
});
});

HTML is PHP generated, this is a version of it without any boxes to validate

<form enctype="multipart/form-data" name="othernames" id="othernames"  method="post"    action="" target="_self">
<div class="table">
<table width="100%" border="0">
<tr>
        <td colspan="3" ><input name="submit" id="submit" type="submit" value="Confirm  Order" ></td>
</tr>
</table>
</div>
</form>

This is with fields to validate:-

<form enctype="multipart/form-data" name="othernames" id="othernames"  method="post" action="" target="_self">
<div class="table">
<table width="100%" border="0"><caption>Enter names for tickets, (if any)</caption>
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Email (Optional)</th>
    <th scope="col">Club</th>
  </tr><tr><td><input name="cID[]" type="hidden" value="11"><input name="cname[]" id      ="cname0" type="text" size="15" maxlength="20"></td>
            <td><input name="cemail[]" id="cemail0" type="text" size="15"     maxlength="60"></td><td><input name="cclub[]" type="text" size="15" maxlength="25"    value="VRA - United Kingdom"></td></tr><tr><td><input name="cID[]" type="hidden"    value="11"><input name="cname[]" id="cname1" type="text" size="15" maxlength="20"></td>
        <td><input name="cemail[]" id="cemail1" type="text" size="15" maxlength="60"></td><td><input name="cclub[]" type="text" size="15" maxlength="25"  value="VRA - United Kingdom"></td></tr>
<tr>
<td colspan="3" ><input name="submit" id="submit" type="submit" value="Confirm  Order" ></td>
</tr>
</table>
</div>
</form>

Problem Solved using reyaner's suggestion, thank you. JQuery now reads, and html uses a submit button

$(document).ready(function(){
// force content into cnamex
    $('#submit').click(function(event){
            error = '';
        for ( var i = 0; i < 10; i++ ) {
            if  ($('#cname' + i).length > 0) {
                if ($('#cname' + i).val().length == 0) {
                event.preventDefault(); // prevent submit
                error = 'Names for those attending are required';
                }
            }
        }
        if (error != '') {
            alert (error);
        }
    });
});



enter code here

You should try: $(this).closest('form').get(0).submit(); BTW, IDs must be unique on context page — A. Wolff
– A. Wolff, Commented Sep 25, 2013 at 8:09
Instead of having a submit button and then using event.preventDefault(); to stop the default functionality, why not simply use a regular button and add this functionality? — Nunners
– Nunners, Commented Sep 25, 2013 at 8:10
you should post your html..., also you could let the submit-button as it is, and prevent the form submit like so: $("form").submit(function(e){ //do stuff, prevent submit or dont if its ok.. }); — reyaner
– reyaner, Commented Sep 25, 2013 at 8:16
HTML added to question, I have tried both the above suggestions neither is working for me at the moment, — Pete Ravenscroft
– Pete Ravenscroft, Commented Sep 25, 2013 at 8:38

Justinas · Accepted Answer · 2013-09-25 08:21:53Z

1

Try this one:

<form action='#' method='post' onSubmit='return validate()'>...</form>

Then $('#submit').click change to function validate(){...}, remove .preventDefault(), and finnaly on success return true, else return false.

function validate(){
    error = '';
    for ( var i = 0; i < 10; i++ ) {
      if  ($('#cname' + i).length > 0) {
          if ($('#cname' + i).val().length == 0) {
              error = 'Names for those attending are required';
          }
      }
  }
  if (error != '') {
    alert (error);
    return false;
  }
  else {
    //$('#othernames').submit();  
    alert ($('#submit').val());
    return true;
  }
});

answered Sep 25, 2013 at 8:21

Justinas

43.9k5 gold badges72 silver badges108 bronze badges

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

Comments

Pete Ravenscroft · Accepted Answer · 2013-09-25 09:06:18Z

The answer from Justinas Jurciukonis may well work, however this is the final code I am going with as it is shorter. Checks between 0 and 10 possible fields if PHP has created them, alerts and prevents submission if they are blank, for my purposes that is sufficient validation but of course you could add more to the inner if, and also be more creative than an alert box.

    $('#submit').click(function(event){
    for ( var i = 0; i < 10; i++ ) {
        if  ($('#cname' + i).length > 0) {
            if ($('#cname' + i).val().length == 0) {
                event.preventDefault(); // prevent submit
                alert('Names for those attending are required');
            }
        }
    }
});

html generated by PHP loop as required

    <tr>
    <td><input name="cname[]" id="cname0" type="text"></td>
</tr>
<tr>
    <td><input name="cname[]" id="cname1" type="text"></td>
</tr>
<input name="submit" id="submit" type="submit" value="Confirm  Order" >

Collectives™ on Stack Overflow

JQuery function submit() not submitting form

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related