CODEWITHSUNDEEP
jquerypreventdefault
SookSun0110010
SookSun0110010

Reputation: 3

jquery - Disable / Simulate "enter" behavior for submit button

EDIT ** To try to make this a little clearer....

When I click the input put button with the mouse, it posts via ajax, like I want it to: mysite.com:8888/save/1?val=&val2=&val3=...

When I'm in a textfield and I hit "enter", it submits to itself, not via ajax... It just works like a regular submission form... I'm just trying to figure out how to get the "enter" button to post via ajax as well...

This is the (partial) html for the form:

<legend>Add Directory Entry</legend>
<div id="statusmessage"></div>
<div class="form-radios clearfix">
    <label class="option" for="edit-type-0"><input id="edit-type-0" name="type" value="0" class="form-radio clearfix" type="radio"> option1</label>

    <label class="option" for="edit-type-1">
    <input id="edit-type-1" name="type" value="1" class="form-radio clearfix" type="radio"> option2 </label>

    <label class="option" for="edit-type-2">
    <input id="edit-type-2" name="type" value="2" class="form-radio clearfix" type="radio"> option3 </label>

    <label class="option" for="edit-type-3">
    <input id="edit-type-3" name="type" value="3" class="form-radio clearfix" type="radio"> option4 </label>
</div>

<label for="edit-name">Name: <span class="form-required" title="This field is required.">*</span></label>
<input maxlength="128" name="name" id="edit-name" size="60" value="" class="form-text required" type="text">

<label for="edit-phone">Phone: </label>
<input maxlength="128" name="phone" id="edit-phone" size="60" value="" class="form-text" type="text">

<input name="op" id="edit-save" value="Save Entry" class="form-submit ahah-processed" type="submit">

The php for the creation of the submit button is:

$form['addentry']['save'] = array(
        '#type' => 'submit',
        '#value' => t('Save Entry'),
        '#submit' => array(),
        '#ahah' => array(
            'path' => 'family/'.$user->uid.'/savenewentry',
            'wrapper' => 'ahah-example-new-row-wrapper',
            'method' => 'prepend',
            'effect' => 'fade',
            'progress' => array('type' => 'bar', 'message' => t('Please wait...')),
        ),
    );

So, when I click the button, I get the progress indication, etc., when I hit "enter" the whole page is submitted and it refreshes...

I have an ajax form that uses a submit button (has to be input type="submit"... can't use "button"). When I click on it, it works as expected in that it doesn't actually "submit" information, but when I hit enter, it submits the form entirely. I've been looking through the forums here, and I can find lots of posts that talk about disabling the behavior, but I want it to work as though "clicking" the button and hitting the enter key work exactly the same... I tried various iterations that were posted in some of the other threads (lots with "preventDefault"), but it keeps submitting it on enter... 

/*
There are a lot more fields, but if, for example, you're in the 
zip code text field and hit enter, the form will "submit".  
If you click enter, it posts and responds as expected... 
*/
<input type="text" value="" id="edit-zip" name="zip" />
<input type="submit" value="Save" id="edit-save" name="op">

I tried this:

  $('form#my-custom-form input#edit-save').keypress(function(e) {
    if(e.which == 13) {
        e.preventDefault();
        $('input#edit-save').click();
    }
 });

Upvotes: 0

Views: 2574

Answers (3)

TaLha Khan
TaLha Khan

Reputation: 2433

You problem is similar to this:
event.preventDefault() not working in Mozilla or IE
And heres your solution
https://stackoverflow.com/a/14486639/1949475

Upvotes: 0

Niklas
Niklas

Reputation: 29992

Instead of binding the preventDefault() to your submit buttons click event, bind it to your form's submit event.

$('form').submit(function(e){
e.preventDefault();
});

Upvotes: 0

kinakuta
kinakuta

Reputation: 9037

Generally speaking, hitting enter when any form element has focus can cause the form's submit event to fire. 

$('form#my-custom-form').submit(...your handler function here...)

so handle this event in the same way you handle the button

Upvotes: 1

Related Questions