I have a requirement to display additional input tags based on user radio tag. I pasted the working code here. I wanted to display spouse first name and last name input tags. If not, will have to display father and mother first and last name. But problem is, I see a gap in between, which I don't want. Any help?
<!DOCTYPE html>
<html>
<head>
<script>
function check() {
if (document.getElementById('Married').checked)
{
document.getElementById('ifYes').style.visibility = 'visible';
}
else
document.getElementById('ifYes').style.visibility = 'hidden';
}
</script>
<form>
First Name <input type="text" id="UserFirstName" value="Your First Name">
Last Name <input type="text" id="UserLastName" value="Your Last Name"></br></br>
Marital Status <input type="radio" id="Married" name="MarStatus" onclick="javascript:check();" >Married <input type="radio" id="UnMarried" name="MarStatus" onclick="javascript:check();">UnMarried </br></br>
<div id="ifYes" style="visibility:hidden">
Spouse First Name <input type="text" id="SpouseFirstName" value="Spouse First Name">
Last Name <input type="text" id="SpouseLastName" value="Spouse Last Name"></br></br>
</div>
Father First Name <input type="text" id="FatherFirstName" value="Father First Name"> Last Name <input type="text" id="FatherLastName" value="Father Last Name"></br></br>
Mother First Name <input type="text" id="FatherFirstName" value="Mother First Name"> Last Name <input type="text" id="FatherLastName" value="Mother Last Name"></br>
</br>
<button onclick="window.location.target='_blank' href='b.php'">Submit</button>
</form>
</body>
</html>
Replaced visibility:hidden
by display:none
<!DOCTYPE html>
<html>
<head>
<script>
function check() {
if (document.getElementById('Married').checked)
{
document.getElementById('ifYes').style.display = 'block';
}
else
document.getElementById('ifYes').style.display = 'none';
}
</script>
<form>
First Name <input type="text" id="UserFirstName" value="Your First Name">
Last Name <input type="text" id="UserLastName" value="Your Last Name"></br></br>
Marital Status <input type="radio" id="Married" name="MarStatus" onclick="javascript:check();" >Married <input type="radio" id="UnMarried" name="MarStatus" onclick="javascript:check();">UnMarried </br></br>
<div id="ifYes" style="display:none">
Spouse First Name <input type="text" id="SpouseFirstName" value="Spouse First Name">
Last Name <input type="text" id="SpouseLastName" value="Spouse Last Name"></br></br>
</div>
Father First Name <input type="text" id="FatherFirstName" value="Father First Name"> Last Name <input type="text" id="FatherLastName" value="Father Last Name"></br></br>
Mother First Name <input type="text" id="FatherFirstName" value="Mother First Name"> Last Name <input type="text" id="FatherLastName" value="Mother Last Name"></br>
</br>
<button onclick="window.location.target='_blank' href='b.php'">Submit</button>
</form>
</body>
</html>
visibility:hidden
will keep the element in the page and occupies that space but does not show to the user.
display:none
will not be available in the page and does not occupy any space.
You should use display:none
.
Also you are using </br>
wrongly, should be <br/>
or simply <br>
. Though I suggest you not to use that. Instead you can wrap the related information with div
element and use css to set the style (margin property).
Another issue is you should use the value attribute in the radio button based on which you can set the style inside the function.
Try the following way:
<script>
function check(el) {
if (el.value == "Married") {
document.getElementById('ifYes').style.display = 'block';
}
else
document.getElementById('ifYes').style.display = 'none';
}
</script>
<form>
<div style="margin-bottom:20px;">
First Name <input type="text" id="UserFirstName" value="Your First Name">
Last Name <input type="text" id="UserLastName" value="Your Last Name">
</div>
<div style="margin-bottom:20px;">
Marital Status <input type="radio" value="Married" name="MarStatus" onclick="javascript:check(this);" >Married <input type="radio" value="UnMarried" name="MarStatus" onclick="javascript:check(this);">UnMarried
</div>
<div id="ifYes" style="display:none; margin-bottom:20px;">
Spouse First Name <input type="text" id="SpouseFirstName" value="Spouse First Name">
Last Name <input type="text" id="SpouseLastName" value="Spouse Last Name">
</div>
<div style="margin-bottom:20px;">
Father First Name <input type="text" id="FatherFirstName" value="Father First Name"> Last Name <input type="text" id="FatherLastName" value="Father Last Name">
</div>
<div style="margin-bottom:20px;">
Mother First Name <input type="text" id="FatherFirstName" value="Mother First Name"> Last Name <input type="text" id="FatherLastName" value="Mother Last Name">
</div>
<button onclick="window.location.target='_blank' href='b.php'">Submit</button>
</form>
I would like to concat sub object array inside object in javascript. I have an object array inside an object: I would like to return the department sub array into one object array. var array = { ...
I would like to concat sub object array inside object in javascript. I have an object array inside an object: I would like to return the department sub array into one object array. var array = { ...
Probably dead simple for someone out there, but I want to build a regex that will search across this string: foo[0][2] and return foo 0 2 in the array of matches So far I have come up with is \([...
Probably dead simple for someone out there, but I want to build a regex that will search across this string: foo[0][2] and return foo 0 2 in the array of matches So far I have come up with is \([...
I am studying the use of reduce in javascript, and I am trying to restructure an Array of Objects in a generic way - need to be dynamic. flowchart - i get totaly lost I started with this through. ...
I am studying the use of reduce in javascript, and I am trying to restructure an Array of Objects in a generic way - need to be dynamic. flowchart - i get totaly lost I started with this through. ...
I am currently working on a Meteor application that also has a chat functionality. I want to have a list of all conversations that show the most recent message in each conversation. (Similar to ...
I am currently working on a Meteor application that also has a chat functionality. I want to have a list of all conversations that show the most recent message in each conversation. (Similar to ...