Question

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.

Answer 1

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