Input Button not working on Jquery form

Question

I use the following or similar setup on all my code. I realise that if you skip ALL fields and only enter the last field, no matter what the last field is.. the form submits.. I want to prevent the form submitting if the details (flag is 1)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS</title>
</head>
<body>

<form name="m2mform" id="m2mform" method="post" onsubmit="return form()" >
u:<input id="user" name="user" type="text" value="">
email:<input id="email" name="email" type="text" value="">
<input class="submitx" type="button" onClick="javascript:form();"/>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
flag = 1;
function form() {
    if (document.getElementById("user").value == "") {
        // slidedown some red css
        flag = 1;
    } else {
        // dont show red css 
        flag = 0;
    }
    if (document.getElementById("email").value == "") {
        // slidedown some red css
        flag = 1;
    } else {
        // dont show red css 
        flag = 0;
    }
    if (flag == 1) {
        // dont submit form
    }
    else {
        var submitForm;
        submitForm = document.getElementById("m2mform");
        submitForm.submit();
    }
}
</script>
</body>
</html>

Updated with another attempt:

var flag = 0;
function nValidateForm() {
    var flag = 0;
    if (document.getElementById("fullname").value == "") {
        $('#fullnamefail').slideDown("fast");
        flag = 1;
    }
    else {
        $('#fullnamefail').slideUp("fast");
        flag = 0;
    }

    if (flag == 1) {
        $('#error').fadeIn('slow');
        return false;
    }
    else {
        var custForm;
        custForm = document.getElementById("m2mform");
        custForm.submit();
    }
}

user447356 · Accepted Answer · 2011-11-17 11:30:03Z

1

Your logic is flawed. You must not lower the flag (change to 0) if it's already raised (equal to 1). In addition, you should not directly call submit() again, just return true or false.

Fix with minimal changes to your original code:

flag = 0; //lower by default
if (document.getElementById("user").value == "") {
    // slidedown some red css
    flag = 1;
} else {
    // dont show red css 
}

if (document.getElementById("email").value == "") {
    // slidedown some red css
    flag = 1;
} else {
    // dont show red css 
}
if (flag == 1) {
    // dont submit form
    return false;
}
else {
    return true;
}

This simply set the flag to 0 only once, on top, and any validation error cause the flag to be raised.

This will work, but as you're already using jQuery consider using its power.. just Google for "jQuery form validation" for very powerful and simple ways to validate user input.

answered Nov 17, 2011 at 11:30

user447356

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

4 Comments

user57508 Over a year ago

you just forgot that this will end up in recursion, as onsubmit="return form()" will call the method form, which calls submitForm.submit() which calls the onSubmit-handler again...

user447356 Over a year ago

Thanks @Andreas I didn't notice the way he calls the function.. answer edited.

TheBlackBenzKid Over a year ago

I marked this answer as OK. My new JS code:gc-cdn.com/assets/js/m2m_c.js my new page: gorgeouscouture.com/new.m2m.php - However in future I will be using the codes above as they are true jQuery

user447356 Over a year ago

Cheers, when you redesign the page consider using jQuery plugin for the validation, this way you won't have to write any JS code apart of something like $("#m2mform").validate();

score 1 · Accepted Answer · 2011-11-17 11:26:42Z

1

you are missing a return false; here ... and rather use type="submit" instead of type="button" (you do not need to declare the method-call of form() twice, if you'd correctly use the type submit)

eg with type button:

<form method="post" onSubmit="return form();">
    u:<input id="user" type="text" value=""><br />
    email:<input id="email" type="text" value=""><br />
    <input id="submit" type="button" value="submit" onClick="window.submitFromButton();" />
</form>
<script type="text/javascript">
window.form = function(sender) {
    var $user = $('#user');
    var $email = $('#email');
    $user.css('background-color', 'white');
    $email.css('background-color', 'white');
    var submitTheForm = true;
    if (!$user.val()) {
        $user.css('background-color', 'red');
        submitTheForm = false;
    }
    if (!$email.val()) {
        $email.css('background-color', 'red');
        submitTheForm = false;
    }
    return submitTheForm;
};
window.submitFromButton = function() {
    var $form = $('form');
    $form.submit();
}
</script>

see my working example here
see my working example with style here
see my working example with type button here

edited Nov 17, 2011 at 11:26

answered Nov 17, 2011 at 11:02

user57508

3 Comments

TheBlackBenzKid Over a year ago

plus this is not feesable as return false and return true on all if end blocks would not work - that is the full code: gc-cdn.com/assets/js/m2m_c.js

TheBlackBenzKid Over a year ago

can you see what is wrong with my current code as show above: gc-cdn.com/assets/js/m2m_c.js

user57508 Over a year ago

@TheBlackBenzKid you'd need to call a different method on the button-click ... otherwise just change to type submit on remove the onClick-handler from the submit-button

Didier Ghys · Accepted Answer · 2011-11-17 11:05:01Z

0

To cancel the event firing, you need to return false; when you do not want to submit your form in your form() function:

<input class="submitx" type="button" onClick="javascript:form();"/>

function form() {

    ....    

    if (flag == 1) {
        return false;  // this will cancel the click event firing on the submit button
    }
    else {
        var submitForm;
        submitForm = document.getElementById("m2mform");
        submitForm.submit();
    }
}

answered Nov 17, 2011 at 11:05

Didier Ghys

30.6k9 gold badges77 silver badges82 bronze badges

Collectives™ on Stack Overflow

Input Button not working on Jquery form

3 Answers 3

4 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related