CODEWITHSUNDEEP
javascriptjqueryformssubmit
hubrid
hubrid

Reputation: 155

form submit

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>

Upvotes: 0

Views: 1372

Answers (6)

James Kyburz
James Kyburz

Reputation: 14503

Try. 

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

Upvotes: 1

RobG
RobG

Reputation: 147523

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>

Upvotes: 0

Blender
Blender

Reputation: 298532

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

Upvotes: 1

sj26
sj26

Reputation: 6833

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.

Upvotes: 0

deceze
deceze

Reputation: 522597

$('.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();
}

Upvotes: 0

gion_13
gion_13

Reputation: 41533

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

Upvotes: 0

Related Questions