I have this code:
<p><label for="mobtel">Enter mobile no.:</label><br />
<input id="mobtel" type="text" name="mobtel"/></p>
I hide it using jquery with this:
$("label[for=mobtel],#mobtel").hide();
And now I want now is to display a new label and new input that will look like this:
<p><label for="mobtel">Enter verification no.:</label><br />
<input id="verification_no" type="text" name="verification_no"/></p>
How can I do this in jquery style?
I would just include both as normal in the HTML, and then hide/show as needed:
ReplyDelete<p id="mobtelField">
<label for="mobtel">Enter mobile no.:</label><br />
<input id="mobtel" type="text" name="mobtel"/>
</p>
<p id="verificationNoField">
<label for="verification_no">Enter verification no.:</label><br />
<input id="verification_no" type="text" name="verification_no"/>
</p>
and
function showVerificationNo(){
$('#mobtelField').hide();
$('#verificationNoField').show();
}
function showMobtel(){
$('#verificationNoField').hide();
$('#mobtelField').show();
}
CSS:
#verificationNoField{
display:none;
}
Then call to use:
showVerificationNo();
$("body").append('<p><label for="mobtel">Enter verification no.:</label><br />
ReplyDelete<input id="verification_no" type="text" name="verification_no"/></p>');
http://jsfiddle.net/K89ZU/1/
$("p").append('<label for="mobtel">Enter verification no.:</label><br />
ReplyDelete');
The easiest way will be to add an invisible element in your HTML:
ReplyDelete<p><label for="mobtel">Enter mobile no.:</label><br />
<input id="mobtel" type="text" name="mobtel"/></p>
<input id="verification_no" type="text" name="verification_no" style="display:none;"/></p>
and then:
$("#icatmobtel").hide();
$("#verifion_no").show();
$("label[for=mobtel]").text("Enter verification no.:");
$("label[for=mobtel]").attr("for", "verifion_no");
Alternatively you can also add a second label and hide/show it.