CODEWITHSUNDEEP
jqueryvalidationsubmit
Pete Ravenscroft
Pete Ravenscroft

Reputation: 761

JQuery function submit() not submitting form

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

Upvotes: 2

Views: 4371

Answers (2)

Pete Ravenscroft
Pete Ravenscroft

Reputation: 761

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" >

Upvotes: 1

Justinas
Justinas

Reputation: 43441

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;
  }
});

Upvotes: 1

Related Questions