jQuery submit a form

Question

html code

<div id="signup">
    <form  id="suform" method="POST" action="roma/roma">
        <p>
            <label>Frist Name</label>
            <input type="text" id="sufName"/>
            <span class="errorMessage"></span>
        </p>
        <p>
            <label>Last Name</label>
            <input type="text" id="sulName"/>
            <span class="errorMessage"></span>
        </p>
        <p>
            <label>Email</label>
            <input type="text" id="suEmail"/>
            <span class="errorMessage"></span>
        </p>
        <p>
            <label>Mobile Number</label>
            <input type="text" id="suMNumber"/>
            <span class="errorMessage"></span>
        </p>
        <p>
            <label>Password</label>
            <input type="password" id="suPassword"/>
            <span class="errorMessage"></span>
        </p>
        <p>
            <label>Re Password</label>
            <input type="password" id="suRePassword"/>
            <span class="errorMessage"></span>
        </p>
        <p>
            <input type="submit" class="button" value="sign up"/>
        </p>
    </form>
</div>

it is just six input fields to make a sign up page and this is the jQuery code to ensure that there is no input field empty, and if there is no input field empty I want to submit the form.

jQuery code

$(document).ready(function(){
    $('#suform').on('submit', function(e){
        e.preventDefault();
        var errorCount = 0;
        $('span.errorMessage').text(''); // reset all error mesaage
        $('input').each(function(){
            var $this = $(this);
            if($this.val() === ''){
                var error = 'Please fill ' + $this.prev('label').text(); // take the input field from label
                $this.next('span').text(error);
                errorCount = errorCount + 1;   
            }
        });
        if(errorCount === 0){
            $(this).submit(); // submit form if no error
        }
    });
});

The code ensure that there is no input field empty, it found an empty one then an error message will appear, else should submit, but the submit doesn't work.

code

I don't know the exact problem. but you know there's this function in jquery? api.jquery.com/submit — starcorn
– starcorn, Commented May 12, 2012 at 14:33
and i am using it, see it the last line in jquery code , the question is why this submit doesn't work ? — William Kinaan
– William Kinaan, Commented May 12, 2012 at 14:33
You should really consider using a jQuery plugin for validation instead of this. — Matt Ball
– Matt Ball, Commented May 12, 2012 at 14:35
try this: if(errorCount !== 0){ return false; } and test your form with other browsers too. — M Rostami
– M Rostami, Commented May 12, 2012 at 14:40

Ashley Strout · Accepted Answer · 2012-05-12 14:40:04Z

3

Try using $(this)[0].submit();. Using $(this) refers to the jQuery object reference to the form. I don't know what jQuery's submit() method actually does, but it clearly doesn't submit the form. Using $(this)[0] refers to the actual DOM element, which will use the standard DOM submit method, which is what you're looking for.

I'm sure you know this already, but you should use server and client side validation, because some users don't have JS and some users will purposely tamper with your form. Just a quick "Don't forget"!

edited May 12, 2012 at 14:40

answered May 12, 2012 at 14:33

Ashley Strout

6,2886 gold badges28 silver badges48 bronze badges

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

1 Comment

William Kinaan Over a year ago

you the one man , it works thank you i will accept the answer when i allow to do that

robbrit · Accepted Answer · 2012-05-12 14:37:34Z

3

Check out the jQuery validation plugin. For this you add a class = "required" for any input field that is required, and just call validation on it:

$('form').validation({
  // any options you want
});

It will also do handy things like displaying error messages, doing conditional validation, etc.

answered May 12, 2012 at 14:37

robbrit

18k4 gold badges51 silver badges68 bronze badges

1 Comment

robbrit Over a year ago

Yep exactly. You'll need to include the actual plugin, and the documentation is all available on the link I provided.

VisioN · Accepted Answer · 2012-05-12 14:35:13Z

1

You can remove e.preventDefault() and use return insead:

$('form').on('submit', function(e){
    var errorCount = 0;
    $('span.errorMessage').text('');
    $('input').each(function(){
        var $this = $(this);
        if($this.val() === ''){
            var error = 'Please fill ' + $this.prev('label').text();
            $this.next('span').text(error);
            errorCount = errorCount + 1;   
        }
    });
    return errorCount === 0;
});

DEMO: http://jsfiddle.net/h9njC/27/

answered May 12, 2012 at 14:35

VisioN

146k35 gold badges287 silver badges291 bronze badges

2 Comments

William Kinaan Over a year ago

thank you , but i need to make e.preventDefault , the answer was $(this)[0].submit()

VisioN Over a year ago

Just out of interest, why you need e.preventDefault here?

The System Restart · Accepted Answer · 2012-05-12 15:18:51Z

0

$('form').on('submit',function(e){
    var errorCount = 0;
    $('span.errorMessage').text('');
    $('input').each(function(){
        var $this = $(this);
        if($this.val() === ''){
            var error = 'Please fill ' + $this.prev('label').text();
            $this.next('span').text(error);
            errorCount = errorCount + 1;   
        }
    });
    if(errorCount === 0){
        alert('done'); // just an alert to notice when everything OK [remove it]
        $this.submit(); // submit the form on success
    } else e.preventDefault(); // halt the submission on default
  });

DEMO

edited May 12, 2012 at 15:18

answered May 12, 2012 at 15:13

The System Restart

2,88121 silver badges28 bronze badges

1 Comment

The System Restart Over a year ago

@William Kinaan I think you want something like this. check the code and the demo

Collectives™ on Stack Overflow

jQuery submit a form

html code

jQuery code

4 Answers 4

1 Comment

1 Comment

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

html code

jQuery code

4 Answers 4

1 Comment

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related