form submit

Question

In this function, based on the value of an input, the form submit is true/false. Why isn't return true working in this function?

Basically, my if sentence tests for a question mark in the form input. If one is there, then I do not want the form to submit to search.php. If a question mark is not there, the else sentence, then I want the form to submit to search.php. I tried using return true; to make .form1 submit, but it didn't work. Then I tried $('.form1').submit(), but this made it submit before enter was pressed.

 <script>
 $(".askInput").keyup(function() {
 if ($(this).val().indexOf("?") != -1) {
 $(this).css({"color" : "#00bfff", 'border-top-right-radius' : '0px', 'border-bottom-right-radius' : '0px', '-moz-border-top-right-radius' : '0px', '-moz-border-bottom-right-radius' : '0px', '-webkit-border-top-right-radius' : '0px', '-webkit-border-bottom-right-radius' : '0px'});
 $('.searchEnter').stop().animate({
 marginLeft: "310px"
 }, 200 );
 $('.form1').submit(function () {
 return false;
 });
 } else {
 $(this).css({"color" : "#333", 'border-top-right-radius' : '5px', 'border-bottom-right-radius' : '5px', '-moz-border-top-right-radius' : '5px', '-moz-border-bottom-right-radius' : '5px', '-webkit-border-top-right-radius' : '5px', '-webkit-border-bottom-right-radius' : '5px'});
 $('.searchEnter').stop().animate({
 marginLeft: "250px"
 }, 200 );
 $('.form1').submit(function () {
 return true;
 });
 }
 });
 </script>

• deceze: What's the expected outcome and how "doesn't it work"?
• hubrid: The expected outcome is, on else, the form .form1 should submit. So this is not working. Instead, it continues to not submit. It is basically like everything in the else statement works except for this: $('.form1').submit(function () { return true; })
• Blender: possible duplicate of [jquery] form submit

Answer 1

Instead of constantly changing the form's submit handler, why not check for the question mark when submitting?

$('.form1').submit(function () {
 if ($('.askInput').val().indexOf("?") != -1) return false;
});
$(".askInput").keyup(function () {
 if ($(this).val().indexOf("?") != -1) {
 $(this).css({
 "color": "#00bfff",
 'border-top-right-radius': '0px',
 'border-bottom-right-radius': '0px',
 '-moz-border-top-right-radius': '0px',
 '-moz-border-bottom-right-radius': '0px',
 '-webkit-border-top-right-radius': '0px',
 '-webkit-border-bottom-right-radius': '0px'
 });
 $('.searchEnter').stop().animate({
 marginLeft: "310px"
 }, 200);
 } else {
 $(this).css({
 "color": "#333",
 'border-top-right-radius': '5px',
 'border-bottom-right-radius': '5px',
 '-moz-border-top-right-radius': '5px',
 '-moz-border-bottom-right-radius': '5px',
 '-webkit-border-top-right-radius': '5px',
 '-webkit-border-bottom-right-radius': '5px'
 });
 $('.searchEnter').stop().animate({
 marginLeft: "250px"
 }, 200);
 }
});

• hubrid: Ahhh, I'd prefer if it was constantly.
• hubrid: You are a boss. Only person on this site who could fix this... especially with my terrible understanding of jquery.... thanks a ton, you made this day!

Answer 2

Try.

$('.form1').submit(function (e) {
 if ($('.askInput').val().indexOf("?") != -1) {
 e.preventDefault();
 }
 $(this).submit();
});

• hubrid: If I use that, it submits on the else (which is good), but it also starts submitting on the if (which is not good).

Answer 3

use submit without any parameters : $('.form').submit()

• hubrid: This makes it submit before the user even clicks enter. I need it to submit when the user presses enter.

Answer 4

$('.form1').submit(function () {
 return true;
});

This binds a function that just returns true to the submit event. I.e. after this, when you submit the form, the function will return true. And that's it.

Here's the manual entry:

.submit( handler(eventObject) )
handler(eventObject) A function to execute each time the event is triggered.

---

If you just want to submit the form, use $('.form1').submit(). If you don't want to submit the form, don't call .submit(). I.e.:

if (...) {
 ...
 // don't call submit
} else {
 ...
 $('.form1').submit();
}

• hubrid: Ok so wait, I want the function to not submit on the "if", and to submit on the "else". So if the function is not submitting on the if (which is what I want it to do), how do I make it instead submit on the else.
• deceze: @hubrid Just don't submit the form in the "if condition", don't call .submit(). Calling .submit() submits the form, not calling it won't. Only call .submit() in the "else condition" when you want to submit the form.
• hubrid: $('.form1').submit(); This makes it submit before the user even clicks enter.
• deceze: @hubrid I think you need to clarify what it is exactly you want to happen.
• hubrid: Hahaha ok. Basically, my if sentence tests for a question mark in the form input. If one is there, then I do not want the form to submit to search.php. If a question mark is not there, the else sentence, then I want the form to submit to search.php. I tried using return true; to make .form1 submit, but it didn't work. Then I tried $('.form1').submit(), but this made it submit before enter was pressed.

Answer 5

I think you want to prevent form submission when the askInput entry is invalid.

When you bind a submit handler to the form, it is always attached, so every time your keyUp handler is run you are adding an additional submit handler to the form. One of these is bound to "return false", preventing the form from submitting.

Instead, maybe disable the submit button or add an "invalid" class to the form and add a single form submit handler which makes sure the form doesn't have the invalid class.

e.g.:

<form>
 <input name="ask" /> <input type="submit" />
</form>
<script>
$('form').submit(function(e) {
 if ($(this).hasClass('invalid')) {
 e.preventDefault();
 }
});
$('input[name="ask"]').keyup(function(e) {
 if ($(this).val().indexOf("?") != -1) {
 // ...
 $(this.form).addClass('invalid');
 // or
 $(':submit', this.form).attr('disabled', 'disabled');
 } else {
 // ...
 $(this.form).removeClass('invalid');
 // or
 $(':submit', this.form).removeAttr('disabled');
 }
});
</script>

Alternately, use a battle-tested jQuery validation library like jQuery ketchup.

• hubrid: Is there anyway I can do it by changing the form so it submits/refreshes the page and doesn't submit/doesn't refresh the page?
• sj26: That is what the code example above does. Do you want to submit when "?" is entered? If so, simply use: $('input[name="ask"]').keyup(function(e) { if ($(this).val().indexOf("?") != -1) { $(this.form).submit(); } });
• hubrid: Yeah, the thing is, with $(this.form).submit();, the form submits before the user presses enter. It submits real-time.... if that makes sense.

Answer 6

What Blender was trying to tell you (amidst all that jQuery wizardry, if you like that kind of thing) is to add a listener for the form's submit event that looks at the input and returns false if there's a ? there. In simple, POJS terms:

<form onsubmit="return validateInput(this);">
 <input name="foo" value="?">
 <input type="submit">
</form>
<script type="text/javascript">
 function validateInput(form) {
 if (/\?/.test(form.foo.value)) {
 // value has a ?, ask user to fix it
 alert('Get rid of ? knucklehead!!');
 // cancel submit
 return false;
 }
 }
</script>