How to call <div> on submit button click
Question
Please refer code below im learning jquery and i want to display tag named #child on submit button click using javascript/jquery can any one help me how to call on button click
And also want to call # child and #home tag on >>(next button) & <<(prev button)** on button click respectively in code >> and<< is written as < and &glt.? can anyone help me out ?
<div data-role="page" id="home"> <div data-theme="d" data-role="header"> <h3> The Grand Bhagvati </h3> <a data-role="button" data-inline="true" data-direction="reverse" data-transition="slide" href="#home"> << </a> <a data-role="button" data-inline="true" data-direction="reverse" data-transition="fade" href="#child"> >> </a> </div> <div data-role="content"> <div data-role="fieldcontain"> <fieldset data-role="controlgroup" data-mini="true"> <label for="textinput1"> User: </label> <input id="textinput1" placeholder="Khushu" type="text" /> </fieldset> </div> <input data-theme="d" ="submitbtn" value="Login" type="submit" onSubmit="redirect()"/> </div> <div data-theme="a" data-role="footer" data-position="fixed" > <h3> Page1 </h3> </div> </div><div data-role="page" id="child"> <div data-theme="d" data-role="header"> <h3> The Grand Bhagvati </h3> <a data-role="button" data-inline="true" data-direction="reverse" data-transition="slide" > << </a> <a data-role="button" data-inline="true" data-direction="reverse" data-transition="fade" > >> </a> </div> <div data-role="content"> <div data-role="fieldcontain"> <fieldset data-role="controlgroup" data-mini="true"> <label for="textinput1"> User: </label> <input id="textinput1" placeholder="Khushu" type="text" /> </fieldset> </div> <input data-theme="d" value="Login" type="submit" onsubmit="redirect()"/> </div> <div data-theme="a" data-role="footer" data-position="fixed" > <h3> Page1 </h3> </div> </div>
3 answers
solution1
1 ACCPTED 2012-04-21 09:04:53
To show a tag use
$('#child').show(); // where child is the id of the element
and to hide ...
$('#child').hide();
alternatively, you can simply toggle it between hide/show as follows:
$('#child').toggle();
to attach these to an onclick event of a button ...
$(document).ready(function() {
$('#buttonID').click(function() {
$('#child').toggle();
});
});
hope this helps
solution2
0 2012-04-21 09:22:18
The below code is for javascript
var Home= document.getElementById("home");
Home.style.display="none";//To hide the div
Home.style.display="";//To display the div
solution3
0 2014-04-14 18:24:14
Try this in your script
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.