I have this form with the following options:
<select name="choices" id="options" onchange="showText()">
<option value="">Select amount</option>
<option value="1">100PHP</option>
<option value="2"> 500PHP</option>
<option value="3"> 1000PHP</option>
<option value="4"> 2000PHP</option>
<option value="5"> 3000PHP</option>
<option value="6"> 4000PHP</option>
<option value="7"> 5000PHP</option>
<option value="8"> 10,000PHP</option>
<option value="others"> others..</option>
</select>
<div class="control-group" id="show" style="display:none;">
When the user selects option 1-8, it will display the amount. I've successfully done that through this javascript:
function showText(){
var value = document.getElementById('options').value;
if(value == '1'){
var amount = document.getElementById("amount");
amount.value = "100";
document.getElementById('show').innerHTML =
"<br><br><font size =+1><b>Amount P 100 </b></font>"
document.getElementById('show').style.display = "block";
}
else if(value == '2'){
var amount = document.getElementById("amount");
amount.value = "500";
document.getElementById('show').innerHTML = "<br><br><font size =+1><b>Amount P 500 </b></font>"
document.getElementById('show').style.display = "block";
}
//up to option 8
Now, when the user selects 'others' it will display another input field. The value that the user will input will be the value option 'others':
else if (value == 'others'){
document.getElementById('show').innerHTML = "<br><div class='control-group'><label class='control-label'>Enter Amount</label><div class='controls'><input type='text' id='other_amount' name='other_amount'> ";
var amount = document.getElementById("other_amount").value;
document.getElementById('show').style.display = "block";
}
Unluckily, I was not successful in getting the value of the second input to be the value of the first input. I hope you could help! Thank you!
First of all, you can improve your code quite a lot:
function showText(){
var value = document.getElementById('options').value;
if(value == '-1'){
//Other
document.getElementById('hidden').style.display = 'block';
}
else {
document.getElementById('hidden').style.display = 'none';
var amount = document.getElementById("amount");
amount.value = value;
document.getElementById('show').innerHTML = "<br><br><font size =+1><b>Amount P " + value + "</b></font>"
document.getElementById('show').style.display = "block";
}
}
Where you change your html to:
<select name="choices" id="options" onchange="showText()">
<option value="">Select amount</option>
<option value="100">100PHP</option>
<option value="500">500PHP</option>
<option value="1000">1000PHP</option>
<!-- (...) -->
<option value="-1"> others..</option>
</select>
I'd also suggest adding the "hidden" input for when they choose others already in your html, but set it invisible:
<div id="hidden" style="display:none;"class='control-group'>
<label class='control-label'>Enter Amount</label><div class='controls'>
<input type='text' id='other_amount' name='other_amount' onChange='otherText()'/>
</div>
</div>
Now, when they select others.. with value -1 you want to show an input where they can choose their own value:
if (value == -1) {
document.getElementById('hidden').style.display = 'block';
}
Now we just need the function otherText() which shouldn't be a problem:
function otherText() {
document.getElementById('amount').value = document.getElementById("other_amount").value;
}
Working jsFiddle
Related
I need to write a JavaScript function that will check if correct answer is chosen in list and then will print either answer is right or not.
I came up with this -
HTML code:
<select id="q1" style="background-color: #b0f1f1">
<option value="1">Saulkrasti Beach</option>
<option value="2">Jurmala Beach</option>
<option value="3">Ventspils Beach</option>
</select>
<p id="answer"></p>
Javascript code:
function rightchoice()
{
var e = document.getElementById("q1");
var value = e.options[e.selectedIndex].value;
if (value == 2) {
document.getElementById("answer").innerHTML = "Right Answer";
}
}
But it does not print anything.
you should add an event onChange where you will call your function
const selection = document.getElementById("q1");
selection.addEventListener("change", rightchoice);
You can add an eventListener to your select listen for a change.
I have added here an else part to reset the value to an empty string when the wrong choice was selected.
function rightchoice()
{
var e = document.getElementById("q1");
var value = e.options[e.selectedIndex].value;
if (value == 2) {
document.getElementById("answer").innerHTML = "Right Answer";
}else{
document.getElementById("answer").innerHTML = "";
}
}
const fom = document.getElementById("q1");
fom.addEventListener("change", rightchoice);
<select id="q1" style="background-color: #b0f1f1">
<option value="1">Saulkrasti Beach</option>
<option value="2">Jurmala Beach</option>
<option value="3">Ventspils Beach</option>
</select>
<p id="answer"></p>
function rightchoice() {
var e = document.getElementById("q1");
var value = e.value;
if (value == 2) {
document.getElementById("answer").innerHTML = "Right Answer";
}
else{
document.getElementById("answer").innerHTML = "Wrong Answer";
}
}
<select id="q1" style="background-color: #b0f1f1" onchange="rightchoice()">
<option value="1">Saulkrasti Beach</option>
<option value="2">Jurmala Beach</option>
<option value="3">Ventspils Beach</option>
</select>
<p id="answer">This is answer</p>
document.getElementById('q1').addEventListener('change', function() {
var newVal = this.value;
if (newVal == 2) {
document.getElementById('answer').innerText = "Right answer.";
} else {
document.getElementById('answer').innerText = "Wrong answer.";
}
});
<select id="q1" style="background-color: #b0f1f1">
<option value="1">Saulkrasti Beach</option>
<option value="2">Jurmala Beach</option>
<option value="3">Ventspils Beach</option>
</select>
<p id="answer"></p>
I'm trying to get the form to display the text field after a dropdown option is chosen.
So when the option other is chosen, the input field will be displayed and become required.
function chooseOther()
{
var option = document.getElementById("inputJob");
if (option == 'Other'){
var field = document.getElementById("inputOtherJob");
field.style.display = 'inline';
}
}
<p> What is your profession? </p>
<select id="inputJob" name="inputJob" onchange = 'chooseOther()'>
<option value="Student">Student</option>
<option value="Teacher">Teacher</option>
<option value="Other">Other</option>
</select>
<input id = "inputOtherJob" name = "inputOtherJob" style = 'display: none'>
Use if(option.value == 'Other'), you must compare option.value not option because option is the instanceof HTMLElement so you must get its value.
function chooseOther()
{
var option = document.getElementById("inputJob");
if (option.value == 'Other'){
var field = document.getElementById("inputOtherJob");
field.style.display = 'inline';
}
}
<p> What is your profession? </p>
<select id="inputJob" name="inputJob" onchange = 'chooseOther()'>
<option value="Student">Student</option>
<option value="Teacher">Teacher</option>
<option value="Other">Other</option>
</select>
<input id = "inputOtherJob" name = "inputOtherJob" style = 'display: none'>
Here's a quick fix. Primarily you want to test against option.value == 'Other' rather than option == 'Other'
<select id="inputJob" name="inputJob" onchange='chooseOther()'>
<option value="Student">Student</option>
<option value="Teacher">Teacher</option>
<option value="Other">Other</option>
</select>
<input id="inputOtherJob" name="inputOtherJob" style='display: none'>
<script>
function chooseOther() {
var option = document.getElementById("inputJob");
if (option.value == 'Other') {
var field = document.getElementById("inputOtherJob");
field.setAttribute("style","display:inline");
}
}
</script>
option.selectedOptions[0].text for displaying the selected text.
Use attribute required to make it required.
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_required
My problem is on how to make the second drop-down display once my first dropdown value selected is Courier
First the user must check the checkbox to show the first drop-down and this is my code
<p> <input type="checkbox" id="contract" class="icheckbox_flat-green" onclick="myFunctionCons()"> Contract </p>
Once checked, this contract via dropdown (first dropdown) will be visible
<select id="contractvia" style="display:none" class="form-control">
<option value="0">Via..</option>
<option value="1">Email</option>
<option value="2">FB Messenger</option>
<option value="3">Courier</option>
<option value="4">Others..</option>
</select>
My goal is to display this second dropdown once the contractvia's selected option is Courier
<select id="contractCourier" style="display:none" class="form-control">
<option value="">Courier</option>
<option value="scanned">Scanned</option>
<option value="net">Original</option>
<option value="mouth">Photocopy</option>
</select>
My first task to show the first dropdown once the checkbox is checked is achieved using this code, but it doesn't work for displaying the second dropdown once first dropdown's selected option is 'Courier'
<script>
function myFunctionCons() {
var con = document.getElementById("contract");
var conv = document.getElementById("contractvia");
var conc = document.getElementById("contractCourier");
if (con.checked == true) {
conv.style.display = "block";
} else {
conv.style.display = "none";
}
if ($("#contractvia").val() == 3)
conc.style.display = "block";
else
conc.style.display = "none";
}
</script>
Please check this in Vanilla Javascript
var con = document.getElementById("contract");
var conv = document.getElementById("contractvia");
var conc = document.getElementById("contractCourier");
//On checkbox return first select
con.addEventListener('click', myFunctionCons );
//if value of option is 3 show next select
conv.addEventListener('change', showSecondSelect );
function showSecondSelect() {
//3 is the index of courier
if (conv.selectedIndex == 3) {
conc.style.display = "block";
} else {
conc.style.display = "none";
}
}
function myFunctionCons() {
if (con.checked == true) {
conv.style.display = "block";
} else {
conv.style.display = "none";
}
}
#contractvia,
#contractCourier {
display: none;
}
<p><input type="checkbox" id="contract" class="icheckbox_flat-green">Contract</p>
<select id="contractvia" class="form-control">
<option value="0">Via..</option>
<option value="1">Email</option>
<option value="2">FB Messenger</option>
<option value="3">Courier</option>
<option value="4">Others..</option>
</select>
<select id="contractCourier" class="form-control">
<option value="Courier">Courier</option>
<option value="scanned">Scanned</option>
<option value="net">Original</option>
<option value="mouth">Photocopy</option>
</select>
Currently in my code I have one drop-down menu. This drop-down menu has three options the user can pick from. Complete needs to have a text-box appear if it is selected. Abandon needs to have a drop-down menu to show up. Then Transfer works the same way. A drop-down menu needs to appear for it as well.
My HTML code for the first drop-down:
<select name="Action" id="ActionDD" required onchange="showHide()">
<option value="">Action:</option>
<option value="complete">Complete</option>
<option value="abandon">Abandon</option>
<option value="transfer">Transfer</option>
</select>
My HTML code for the Text-box that needs to appear with Complete picked from first drop-down menu
<input type="text" name="RemNUM" id="REMtextBox" placeholder="Remedy Number" maxlength="10" style="display:none;"/>
My HTML code for the drop-down that needs to appear with abandon picked from first drop-down menu
<select name="Reason" id="ReasonDD" style="display:none;" required>
<option value="">Reason:</option>
<option value="NoShow">No Show</option>
<option value="Unfixable">Unfixable</option>
<option value="other">Other</option>
</select>
Then lastly my JavaScript code I have that is doing some of these tasks. But when I select something else from the first drop-down menu after something has already been picked it will show both the new text-box or the new drop-down menu together. I need help getting both of them to show up by themselves and clear the old selected action.
function showHide()
{
var val = document.getElementById("ActionDD").value;
if(val == "complete")
document.getElementById("REMtextBox").style.display = 'inline-block';
else if(val == "abondon")
document.getElementById("ReasonDD").style.display = 'inline-block';
else if(val == "C")
document.getElementById("ThirdTextBoxId").style.display = 'inline-block';
else if(val == "D")
document.getElementById("FourthTextBoxId").style.display = 'inline-block';
}
Here is a simple solution:
You can add a empty div with an ID below your selection and change the innerHTML of that div with your HTML you want to show based on the selection the user makes.
I edited your existing code so you can see what I mean:
function showHide() {
var val = document.getElementById("ActionDD").value;
var remTextBox = document.getElementById("REMtextBox");
var reasonDD = document.getElementById("ReasonDD");
var thirdTextBoxId = document.getElementById("ThirdTextBoxId");
var fourthTextBox = document.getElementById("FourthTextBoxId");
var result = document.getElementById("result");
var remTextBoxHTML = '<input type="text" name="RemNUM" id="REMtextBox" placeholder="Remedy Number" maxlength="10"/>';
var reasonDDHTML = '<select name="Reason" required><option value="">Reason:</option><option value="NoShow">No Show</option><option value="Unfixable">Unfixable</option><option value="other">Other</option></select>';
if(val == "complete") {
result.innerHTML = remTextBoxHTML;
} else if(val == "abandon") {
result.innerHTML = reasonDDHTML;
} else if(val == "C") {
result.innerHTML = '';
} else if(val == "D") {
result.innerHTML = '';
} else {
result.innerHTML = '';
}
}
<select name="Action" id="ActionDD" required onchange="showHide()">
<option value="">Action:</option>
<option value="complete">Complete</option>
<option value="abandon">Abandon</option>
<option value="transfer">Transfer</option>
</select>
<div id="result">
</div>
You can give all your hidden elements class and in showHide function first hide all elements and then show the one you want.
so your js code will be
showHide = function()
{
var showHideItems = document.getElementsByClassName('hidden-items');
for(var i =0;i<showHideItems.length;i++){
showHideItems[i].style.display = 'none';
}
var val = document.getElementById("ActionDD").value;
if(val == "complete")
document.getElementById("REMtextBox").style.display = 'inline-block';
else if(val == "abandon")
document.getElementById("ReasonDD").style.display = 'inline-block';
else if(val == "C")
document.getElementById("ThirdTextBoxId").style.display = 'inline-block';
else if(val == "D")
document.getElementById("FourthTextBoxId").style.display = 'inline-block';
}
and your html will be
<select name="Action" id="ActionDD" required onchange="showHide()">
<option value="">Action:</option>
<option value="complete">Complete</option>
<option value="abandon">Abandon</option>
<option value="transfer">Transfer</option>
</select>
<input class="hidden-items" type="text" name="RemNUM" id="REMtextBox" placeholder="Remedy Number" maxlength="10" style="display:none;"/>
<select class="hidden-items" name="Reason" id="ReasonDD" style="display:none;" required>
<option value="">Reason:</option>
<option value="NoShow">No Show</option>
<option value="Unfixable">Unfixable</option>
<option value="other">Other</option>
</select>
here is working jsfiddle for you code https://jsfiddle.net/jpj42ojz/
I am trying to have JavaScript code validate all the elements of this form but for some reason the select box doesn't validated. The user can fill in all the blanks except for the select box and the JavaScript does not catch it. Any ideas as to what I am missing? Thanks.
<script type="text/javascript">
function validateForm() {
var ageErr = document.getElementById('ageErr');
var nameErr = document.getElementById('nameErr');
var radioErr = document.getElementById('radioErr');
var results = document.getElementById('results');
var theName = document.formContact.theName;
var theAge = document.formContact.theAge;
var theRadioGp = document.formContact.contact;
var theSelect = document.formContact.theSelect;
var chkValue;
if(theName.value =="") {
nameErr.innerHTML = "A name is required ";
theName.focus();
return false;
}else {
nameErr.innerHTML= "";
}
if(theAge.value ==""){
ageErr.innerHTML = "An age is required";
theAge.focus();
return false;
}else {
nameErr.innerHTML = "";
}
if(theAge.vale =="") {
age.Err.innerHTML = "An age is required";
theAge.focus();
return false;
} else if (isNaN(theAge.value)) {
ageErr.innerHTML = "Age should be a number";
theAge.select();
} else if (theAge.value < 3 || theAge.value > 120) {
ageErr.innerHTML = "Please enter your real Age";
theAge.select();
return false;
} else{
ageErr.innerHTML = "";
}
for(var i=0; i < theRadioGp.length; i++) {
if(theRadioGp[i].checked ==true) {
chkValue = theRadioGp[i].value;
}
}
if(chkValue == undefined) {
alert('You need to slect a method of contact');
return false;
}
if(theSelect.options[theSelect.selectedIndex].text == "<--PLEASE SELECT ONE-->")
{alert("You need to select an option");
return false;
}else {
alert("Your have selected "+theSelect.options[theSelect.selectedIndex].text);
}
alert("Your form has been completed. Great Job!!");
}
</script>
</head>
<body>
<form action="" id="formContact" method="post" onsubmit="return validateForm();" name="formContact">
<p>Name:<br />
<input type="text" name="theName"><span class="err" id="nameErr"></span>
</p>
<p>Age:<br />
<input type="text" name="theAge"><span class="err" id="ageErr"></span>
</p>
<p>
<p>How may we contact you?<br>
<input type="radio" name="contact" value="email">Email<br>
<input type="radio" name="contact" value="no contact">No Contact<br>
</p>
<p>Please coose a selection below:<br>
<select name="theSelect">
<option><--PLEASE SELECT ONE -->
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</p>
<p><input type="submit" value="Submit" name="btnSubmit" ">
</form>
<span id="results"></span>
</body>
</html>
Your HTML isn't valid. Replace your select part with following
<select name="theSelect">
<option><--PLEASE SELECT ONE--></option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
Or use a numeric value for the default option
<select name="theSelect">
<option value="0">PLEASE SELECT AN OPTION</option>
<option value="1">One</option>
...
</select>
And check the value (not the text selected)
if(theSelect.options[theSelect.selectedIndex].value == 0){
alert("You need to select an option");
return false;
}else {
alert("Your have selected " + theSelect.options[theSelect.selectedIndex].text);
}
Why not use selectedIndex without the text?
Example:
<select id="mytest">
<option value="-1"><--PLEASE SELECT ONE--></option>
<option value="1">Test One</option>
<option value="2">Test Two</option>
</select>
Then
if(theSelect.selectedIndex == -1)
{alert("You need to select an option");
return false;
}else {
the rest