Mixing
How to show a form field (input type=“text”) when i click on a item
How to show a form field (input type=“text”) when i click on a <select> item
How to show the form field (input type) in the when I clicked "7th" from the select menu.
Add
onchange event handler, check current selected value - show/hide textfield.– u_mulder
Jun 29 at 9:36
onchange
I do this before but it can't work for me...
– Syed Waqas Ahmad
Jun 29 at 9:39
@SyedWaqasAhmad We need to see your code, we cant help you without
– Carsten Løvbo Andersen
Jun 29 at 9:40
2 Answers
2
your html code should be like
<select id="select">
<option value="6th">6Th</option>
<option value="7th">7Th</option>
</select>
<input type="text" id="textbox" name="textbox"/>
and by using jQuery show textbox like
$( document ).ready(function() {
$('#textbox').hide();
});
$('select').on('change', function() {
if(this.value == '7th'){
$('#textbox').show();
}
});
I recommend you add a
style="display: none;"-attribute to the input-tag in your HTML. Otherwise, the HTML will render it, and after that, your JS will hide it again. Better hide it before it gets to appear.– rojadesign
Jun 29 at 11:18
style="display: none;"
input
if you do not want to rely on jquery this is a javascript example.
<head>
window.onload = function(){
var dropdown = document.getElementById("example");
var textbox = document.getElementById("textbox");
dropdown.addEventListener("change", function() {
if(dropdown.value == 7){
textbox.style.display = "block";
}else{
textbox.style.display = "none";
}
});
}
</head>
<body>
<select id="example">
<option value="1"> 1 </option>
<option value="2"> 2 </option>
<option value="7"> 7 </option>
</select>
<input id="textbox" type="text" style="display:none;">
</body>
Native JavaScript are always the best answers to beginners ! ;-)
– AymDev
Jun 29 at 10:19
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Show us some code before we can help you
– ssten
Jun 29 at 9:36