CODEWITHSUNDEEP
javascriptjqueryforms
Codded
Codded

Reputation: 1256

submit form without page refresh - click function toggle() not working after submit

I have a form which processes without page refresh, it works great, saves to db etc.

But once i have submitted the form the click function below does not toggle anymore unless i refresh the page.

$("#pinlink").click(function () {
        $("#pincontent").toggle();
});

Here is the code: 

echo'<strong>Printer PIN:</strong>&nbsp;<a id="pinlink"><img src="images/edit.png" width="18px" height="18px" title="Edit you PIN number"></a>

<div id="results"><div>

<div id="pinnumber">'.$learner->idnumber.'<div>                 

<div id="pincontent" style="display:none;">
<form name="myform" id="myform" method="POST" enctype="multipart/form-data">  
<input type="text" name="idnumber" id="idnumber" placeholder="Enter your new PIN" size="20" value=""/>
<input name="id" type="hidden" value="'.$learner->id.'" />      
<input type="submit" name="submit" value="Update"> 
</form>
<div>';


$(document).ready(function(){

    $("#pinlink").click(function () {
    $("#pincontent").toggle();
    });

    $("#myform").validate({
        debug: false,
        rules: {
            idnumber: "required",
        },
        messages: {
            idnumber: "Please enter your PIN",
        },
        submitHandler: function(form) {
            $("#pincontent").hide();
            // do other stuff for a valid form
            $.post('process.php', $("#myform").serialize(), function(data) {
                $('#results').html(data);
            });
        }
    });
});

Any help would be greatly appreciated.

Upvotes: 0

Views: 3730

Answers (3)

tildy
tildy

Reputation: 1009

Ok, I have found the error, you forgot to close the divs correctly. (at results div and pinnumber )

It should work:

echo'<strong>Printer PIN:</strong>&nbsp;<a id="pinlink"><img src="images/edit.png" width="18px" height="18px" title="Edit you PIN number"></a>

<div id="results"></div>

<div id="pinnumber">'.$learner->idnumber.'</div>                 

<div id="pincontent" style="display:none;">
<form name="myform" id="myform" method="POST" enctype="multipart/form-data">  
<input type="text" name="idnumber" id="idnumber" placeholder="Enter your new PIN" size="20" value=""/>
<input name="id" type="hidden" value="'.$learner->id.'" />      
<input type="submit" name="submit" value="Update"> 
</form>
<div>';


$(document).ready(function(){

    $("#pinlink").click(function () {
    $("#pincontent").toggle();
    });

    $("#myform").validate({
        debug: false,
        rules: {
            idnumber: "required",
        },
        messages: {
            idnumber: "Please enter your PIN",
        },
        submitHandler: function(form) {
            $("#pincontent").hide();
            // do other stuff for a valid form
            $.post('process.php', $("#myform").serialize(), function(data) {
                $('#results').html(data);
            });
        }
    });
});

Upvotes: 1

danwellman
danwellman

Reputation: 9253

Can you upgrade to the latest version of jQuery? I am wondering whether the new on() method would work better instead of click()..?

Use:

$("#pinlink").on("click", function() { });

Or better: 

$(document).on("click", "#pinlink", function() { });

This second form makes use of something called event delegation, which may help in this situation as the click handler seems to be becoming unbound after the AJAX response...

If you can't upgrade, try using the delegate() method instead:

$(document).delegate("click", "#pinlink", function() { });

Upvotes: 0

tildy
tildy

Reputation: 1009

Have you tried with bind? 

 $("#pinlink").bind('click', function() {
    $("#pincontent").toggle();
    });

Upvotes: 0

Related Questions