CODEWITHSUNDEEP
javascriptjquery
coolguy
coolguy

Reputation: 7954

Jquery one issue

My mark up

<form action="blah/foo" method="POST" id="frm1">
<input type="hidden" id="v" />
</form>
......
......
<!--after some code-->
<button id="btn1">test</button>
<input type="text" id="somevalue" />

My purpose is when i click the button btn1,Grab the value of somevalue and give it to the hidden value v and submit the form ,the form needs to submit (ONLY ONCE) so i used the jquery one method and thats working fine

Second thing is if somevalue is empty i dont want to submit

THE PROBLEM scenario

<script>
$('#btn1').one('click',function(){
    if(!$('#somevalue').val()){
    $('p#msg').html('Empty value');
     return false;
    }
    $('#frm1').submit();

});
</script>

IF user first makes an empty input and try to submit the error msg will show..but after that even with a valid input the click event wont trigger(I know thats because of the one function)

Im looking for some alternative that the form will submit only once

Upvotes: 0

Views: 144

Answers (5)

biril
biril

Reputation: 1995

Instead of using 'one' so that the your handler is called only once, declare your handler as a named function and use jQuery's bind / unbind to remove the click handler if (and only if) the field has a valid value when the form is submitted. Otherwise keep listening on the click event. As such:

function onFormSubmitted (e) {
    if($("#somevalue").val === "") { // If the field's value is invalid...
        $('p#msg').html('Empty value'); // ... then show error message...
        return; // ...and do nothing else - just keep on listening
    }

    // Ok, we have valid input so...
    $('#btn1').unbind("click", onFormSubmitted); // ...stop listening...
    $("#frm1").submit(); // ...and submit the form
}

// Start listening for the click event
$('#btn1').bind("click", onFormSubmitted);

Or, if you still want to use 'one' you can tweak the previous example, as such:

function onFormSubmitted (e) {
    if($("#somevalue").val === "") { // If the field's value is invalid...
        $('p#msg').html('Empty value'); // ... then show error message...
        $('#btn1').one("click", onFormSubmitted); // ...re-attach one-time listener...
        return; // ...and wait
    }

    // Ok, we have valid input so don't re-attach one-time listener...
    $("#frm1").submit(); // ...just submit the form
}

// Add one-time listener for the click event
$('#btn1').one("click", onFormSubmitted);

Upvotes: 3

Jon Taylor
Jon Taylor

Reputation: 7905

First off why not have your input in the form? Is there a specific reason to do it this way?

Also to do this in straight javascript rather than using jquery I would be doing something as follows:

<form action="blah/foo" method="POST" id="frm1" onsubmit="return validateForm();">

The validateForm just checks to see if the input is empty, if it is then it returns false, otherwise it returns true. Returning false to onsubmit will stop the form submitting.

Upvotes: 1

mgraph
mgraph

Reputation: 15338

try:

$('#btn1').one('click',function(){
    callFunc();
});

function callFunc(){
 if($('#somevalue').val() == ""){
    $('p#msg').html('Empty value');
    $('#btn1').one('click',function(){ callFunc(); });
    return false;
    }
 $('#frm1').submit();
}

Upvotes: 1

Mariusz Jamro
Mariusz Jamro

Reputation: 31653

var form_sent = false;
$('#btn1').click(function(){
    if(form_sent == true){ return; }
    if(!$('#somevalue').val()){
        $('p#msg').html('Empty value');
        return false;
    }
    form_sent = true;
    $('#frm1').submit(); 
});

Upvotes: 3

Umesh Aawte
Umesh Aawte

Reputation: 4690

Try bind event,

$('#btn1').bind('click',function(){
    if(!$('#somevalue').val()){
    $('p#msg').html('Empty value');
     return false;
    }
    $('#frm1').submit();

});​

Upvotes: 0

Related Questions