I have a script that's almost complete but I can't figure out the last piece. The Javascript makes the check box appear or disappear based on the drop down selection (this is working great). But I'm trying to make the check box "Required" if the checkbox is present (the part I can't figure out).
I'm using the htm5 required="" attribute on the check box field, but the form still tries to validate it even with the 3rd option selected, which hides the check box altogether.
Is there a way to toggle on/off the required="" in coordination with the selection of the drop down, or any other suggestions?
<script>
function getTerms(select){
var selectedString = select.options[select.selectedIndex].value;
if(selectedString == "1" || selectedString == "2")
{
document.getElementById("terms_target").style.display = "block";
}else {
document.getElementById("terms_target").style.display = "none";
}
}
</script>
<form action="process_affiliate.php" method="post" onchange="getTerms(this)" >
<select name="InquiryType" required="">
<option value="">Please Select Your Inquiry Type</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<div id="terms_target" style="display:none;">
<input type="checkbox" name="checked" value="Checked" required="" />I agree to the terms
</div>
<input type="submit" value="Submit">
</form>
Here is a newer version using addEventListener
window.addEventListener("DOMContentLoaded", () => {
const sel = document.querySelector("[name=InquiryType]"),
terms = document.getElementById("terms_target"),
form = document.getElementById("myForm"),
agree = form.checked; // checked is a poor name for a field
toggleAgree = () => {
const show = ["1", "2"].includes(sel.value);
terms.hidden = !show;
agree.required = show;
};
sel.addEventListener("change", toggleAgree)
toggleAgree(); // initialise
})
<form action="process_affiliate.php" id="myForm" method="post">
<select name="InquiryType" required>
<option value="">Please Select Your Inquiry Type</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<div id="terms_target" hidden>
<input type="checkbox" name="checked" value="Checked" required="" />I agree to the terms
</div>
<input type="submit" value="Submit">
</form>
Older version
window.onload=function() {
var sel = document.getElementsByName("InquiryType")[0];
sel.onchange=function() {
var selectedString = this.value,
show = selectedString == "1" || selectedString == "2",
terms = document.getElementById("terms_target"),
checked=document.getElementsByName("checked")[0];
terms.style.display = show?"block":"none";
if (show) checked.setAttribute("required","required");
else checked.removeAttribute("required");
}
sel.onchange(); // initialise
}
<form action="process_affiliate.php" method="post">
<select name="InquiryType" required="">
<option value="">Please Select Your Inquiry Type</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<div id="terms_target" style="display:none;">
<input type="checkbox" name="checked" value="Checked" required="" />I agree to the terms
</div>
<input type="submit" value="Submit">
</form>
Related
I want to create a form that would submit onchange but only on certain options. This is my code do far:
<form method="post" action="">
<select name="period" id="period" class="form-control m-1" onchange='this.form.submit()'>
<option value="" disabled hidden selected>default</option>
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="4">option 4</option>
</select>
</form>
On options 1-3 I want to have it sumbitted onchange or just whenever the option is chosen but for option 4 I want to create a modal in which the user would input his data and then it would submit. Is there any way to do that?
try out the following code
<form method="post" action="">
<select name="period" id="period" class="form-control m-1" onchange='onChangeFun()'>
<option value="" disabled hidden selected>default</option>
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="4">option 4</option>
</select>
</form>
javascript below
function onChangeFun() {
selected_val = document.getElementById('period').value
if (0 < selected_val < 4) {
// form submit function
// this.form.submit()
}
if ( selected_val == 4) {
// perform action on selection of 4 th option
}
}
if any doubt comment ill happy to help
I have a dropdown select box with "Select one" as a default option and the View report submit button
<select name="time" id="time" required>
<option value="0" selected>Select one</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
<input type="submit" name="act" value="View Report" disabled>
The submit button is disabled until either value 1 or 2 is chosen. How can I do this without using jquery? Thank you.
As you can see i add an addEventListener to select, so when that change the script will check if value is different to 0
const select = document.getElementById('time');
const submitButton = document.getElementById('submit');
document.getElementById('time').addEventListener('change', () => {
if (select.value === '0') {
submitButton.disabled = true;
} else {
submitButton.disabled = false;
}
});
<select name="time" id="time" required>
<option value="0" selected>Select one</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
<input type="submit" name="act" id='submit' value="View Report" disabled>
You can use .prop() method. Good Luck!
<html>
<head>
<title>
Bottom Nav Bar
</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<body>
<select name="time" id="time" required>
<option value="0" selected>Select one</option>
<option value="1" >Value 1</option>
<option value="2">Value 2</option>
</select>
<input type="submit" name="act" value="View Report" disabled>
</body>
<script>
$("#time").click(function() {
if($("select").val() == 0)
$("input").prop( "disabled", true);
else $("input").prop( "disabled", false);
});
</script>
</html>
I have a selector with a list of options. One of the options is 'other' in which case the user may enter their own option in a textbox below.
How can I make the textbox disabled and greyed out only to become active when the 'other' option is selected?
<select id = "list" name="Optionlist">
<option value = "1">Option one</option>
<option value = "2">Option two</option>
<option value = "3">Option three</option>
<option value = "4">Other</option>
</select>
<br><br>
<label for="Other">Other: </label>
<input type="text" name="Other" id="otherbox"/>
$('#list').change(function() {//on change of select
$('#otherbox').prop('disabled', $('option:selected', this).val() != '4');//check if value is not other then disable
}).change();//call on change manually so on load will run the change event
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="list" name="Optionlist">
<option value="1">Option one</option>
<option value="2">Option two</option>
<option value="3">Option three</option>
<option value="4">Other</option>
</select>
<br>
<br>
<label for="Other">Other:</label>
<input type="text" name="Other" id="otherbox" />
Maybe a little something like this:
$(document).ready(function() {
$("#list").change(function() {
$("#otherbox").prop("disabled", this.value != "4");
}).change();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id = "list" name="Optionlist">
<option value = "1">Option one</option>
<option value = "2">Option two</option>
<option value = "3">Option three</option>
<option value = "4">Other</option>
</select>
<br><br>
<label for="Other">Other: </label>
<input type="text" name="Other" id="otherbox"/>
<html>
<head>
<body>
<select onchange="func(this)" id = "list" name="Optionlist">
<option value = "1">Option one</option>
<option value = "2">Option two</option>
<option value = "3">Option three</option>
<option value = "4">Other</option>
</select>
<br><br>
<label for="Other">Other: </label>
<input type="text" name="Other" id="otherbox" disabled/>
<script>
function func(obj){
document.getElementById('otherbox').setAttribute('disabled',true);
if(obj.value == 4)
document.getElementById('otherbox').removeAttribute('disabled');
}
</script>
</body>
</html>
An implementation without Jquery
Hi I have been trying to set radio buttons to certain values depending on which select drop down was chosen.
First the select statement:
<select id="department" name="department" class="input-xlarge" onchange="setDefault();">
<option value="" selected></option>
<option value="1">Read Only</option>
<option value="2">HR Staff</option>
<option value="3">Select 3</option>
<option value="4">Select 4</option>
<option value="7">Select 5</option>
</select>
I created a function that I thought would allow me to set the value, depenting on what is selected.
<script>
function setDefault() {
if (department.val() == '1'){
alert('One');
}
$("#radio-0").prop("checked", true);
</script>
I thought that if the val of department (the select drop down) was equal to 1 then set this value.
The error that I get in the console window is
*Uncaught TypeError: undefined is not a function*
I know this should be simple but as a jQuery novice I know I'm probably making a simple mistake.
Overall the goal would be to set a series of radio buttons to a specific value depending on the drop down selection. For example, if Read only was selected, certain values would be set as a 1, 2 ,3 4 or 5 (for a radio button) and so on depending on the drop down selection.
Thanks
Use jQuery onchange function.
$(document).ready(function () {
$("#department").change(function () {
if(this.value=='1')
{
alert("one");
}
$("#radio-0").prop("checked", true);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<select id="department" name="department" class="input-xlarge">
<option value="" selected></option>
<option value="1">Read Only</option>
<option value="2">HR Staff</option>
<option value="3">Select 3</option>
<option value="4">Select 4</option>
<option value="7">Select 5</option>
</select>
<input type="radio" id="radio-0">
I would recommend using javascript for this. It is such a small request that you don't really need an external libarary.
The HTML based from yours and including some radio buttons
<select id="department" name="department" class="input-xlarge" onchange="setDefault(this);">
<option value="" selected></option>
<option value="1">Read Only</option>
<option value="2">HR Staff</option>
<option value="3">Select 3</option>
<option value="4">Select 4</option>
<option value="7">Select 5</option>
</select><br />
<input type="radio" name="selectedop" id="radio-1" /><br />
<input type="radio" name="selectedop" id="radio-2" /><br />
<input type="radio" name="selectedop" id="radio-3" /><br />
<input type="radio" name="selectedop" id="radio-4" /><br />
<input type="radio" name="selectedop" id="radio-7" />
Then you simply add this javascript in your head. It selects the radio based on the value by combining "radio-" and the value to make the id.
function setDefault(input) {
document.getElementById("radio-" + input.value).checked = true;
}
JsFiddle Example: http://jsfiddle.net/bpmf3cks/
Try
$('#department').on('change',function() {
if ($(this).val() == '1') alert($(this).val())
})
http://jsfiddle.net/5x0h5g73/1/
Need some help with some javascript. Not too experience with javascript. Was wondering if anyone has some snippet for this.
workflow/overview:
4 fields
user enters data in field 2-4
user selects reset from dropdown menu in field 1
fields reset to default
- field 2 resets > Please select
- field 3 resets > blank
fields DOES Not reset
- field 4 DOES NOT rest > retains entered value
thanks for the help.
Code
</script>
<form name="testform" action="" method="get">
<fieldset>
<label>Field 1<font color="red">*</font>:</label>
<select name="select1" id="select1">
<option value="Reset">Reset</option>
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br/>
<label>Field 2</label>
<select name="select2" id="select2">
<option value="Please select">Please select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</br>
<label>Field 3</label>
<input type="text" name="text1" size="100"/>
</br>
<label>Field 4</label>
<input type="text" name="text2" size="100"/>
</fieldset>
</form>
</body></html>
You should read a little about javascript, because this is one of the basics (and check out jquery)
mainly to access an item from javascript you can do this : var element = document.getElementById('select2')
now when you have the element "element" that you can put a value in.
element.value = "Please select";
the final code is :
<select name="select1" id="select1" onchange="maybeReset()">
function maybeReset(){
element1 = document.getElementById('select1');
if (element1.value == "Reset")
{
var element = document.getElementById('select2');
element.value = "Please select";
...
}
}