0
136
ViewsDisplay the selected of a Drop down list (javascript or jquery)
I want to create a form where user have two option for image upload, Either passport, an identity card, or a driver's license, but I want when the user chooses a passport box passport, if the selection of an identity card or a driver's license, two back and front
<form action="">
<select >
<option >PASSPORT</option>
<option >ID CARD</option>
<option >DRIVER LICENSE</option>
</select><BR><BR>
<input type="file" id="myFile" name="PASSPORT"><BR><BR>
<input type="file" id="myFile" name="FRONT ID"><BR><BR>
<input type="file" id="myFile" name="BACK ID"><BR><BR>
<input type="file" id="myFile" name="BACK DRIVER LICENSE"><BR><BR>
<input type="file" id="myFile" name="BACK DRIVER LICENSE"><BR><BR>
<input type="submit">
</form>
Example:
1 answers
Answer question0
Here is one way of doing it:
(document.querySelector("select").onchange=ev=>{
document.querySelectorAll("input[type=file]").forEach(e=>{
e.style.display=ev.target.value.toLowerCase().replaceAll(" ","")===e.className
? "block"
: "none";
})
})({target:{value:"passport"}});input[type=file] {margin:10px 0px}<form action="">
<select >
<option >PASSPORT</option>
<option >ID CARD</option>
<option >DRIVER LICENSE</option>
</select><BR><BR>
<input type="file" class="passport" name="PASSPORT">
<input type="file" class="idcard" name="FRONT ID">
<input type="file" class="idcard" name="BACK ID">
<input type="file" class="driverlicense" name="FRONT DRIVER LICENSE">
<input type="file" class="driverlicense" name="BACK DRIVER LICENSE">
<input type="submit">
</form>I replaced your invalid id attributes with a class attribute and attached an event listener on the select element. As soon as the event is fired, the value of the select box is used to the style.display attribute of the input elements to either "block" or "none".
By putting the whole function definition in parentheses () and appending the argument ({target:{value:"passport"}}) after it I effectively simulate the firing of an event with a fake "event object"-argument containing a single attribute/sub-attribute: target.value == "passport". This will make the first input group visible while hiding all the others.