I'm trying to do validations with js, i have an input and a select, each one has an alert under it, those alerts appear when the input's value is less than 12, and when the user leaves the select empty, and there is a disabled button at the end of the form, it gets enabled if the value of the input == 12 or the select is not null, i tried something for the input only but i can't figure out how to put the select condition in the same function, here is my code:
$('#requiredInput').keyup(function () {
if ( document.getElementById("requiredInput").value.length == 12)
{
document.getElementById("requiredAlert").style.display = 'none';
document.getElementById("disabledButton").disabled = false;
} else if ( document.getElementById("requiredInput").value.length != 12 ) {
document.getElementById("requiredAlert").style.display = 'block';
document.getElementById("disabledButton").disabled = true;
}
});
p{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="requiredInput">
<p id="requiredAlert">Please fill out this field</p>
<select id="requiredSelect">
<option>Hi</option>
</select>
<p id="requiredSelectAlert">Please select</p>
<button disabled id="disabledButton">Submit</button>
If you need to have the select with a null value selected by default, you have to add one more option in the top. You can add <option selected disabled>Select Something</option>. The disabled attribute will make it unselectable by the user after they click another option.
Then we need to add values to the options. Add an empty value in the default option we added before so it becomes <option selected disabled value="">Select Something</option>. Then, when the field change event fires, you can check the value of the select field and make the magic happen. I have updated your snippet bellow and added the above advice.
$('#requiredInput').keyup(function () {
if ( document.getElementById("requiredInput").value.length == 12)
{
document.getElementById("requiredAlert").style.display = 'none';
document.getElementById("disabledButton").disabled = false;
} else if ( document.getElementById("requiredInput").value.length != 12 ) {
document.getElementById("requiredAlert").style.display = 'block';
document.getElementById("disabledButton").disabled = true;
}
});
$('#requiredSelect').change(function () {
if ( document.getElementById("requiredSelect").value != "")
{
document.getElementById("requiredSelectAlert").style.display = 'none';
document.getElementById("disabledButton").disabled = false;
} else if ( document.getElementById("requiredSelect").value === "" ) {
document.getElementById("requiredSelectAlert").style.display = 'block';
document.getElementById("disabledButton").disabled = true;
}
});
p{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="requiredInput">
<p id="requiredAlert">Please fill out this field</p>
<select id="requiredSelect">
<option value="" disabled selected>Select something</option>
<option value="hi">Hi</option>
</select>
<p id="requiredSelectAlert">Please select</p>
<button disabled id="disabledButton">Submit</button>
This is my version of you request. Using jquery to find the :selected element and get the text into the option tag. Also in each option you can set an value and get the .val() and will works.
$('#requiredInput').keyup(function () {
if ( document.getElementById("requiredInput").value.length == 12 && $('#requiredSelect').find(":selected").text() != "default")
{
document.getElementById("requiredAlert").style.display = 'none';
document.getElementById("disabledButton").disabled = false;
} else if ( document.getElementById("requiredInput").value.length != 12 && $('#requiredSelect').find(":selected").text() == "default") {
document.getElementById("requiredAlert").style.display = 'block';
document.getElementById("disabledButton").disabled = true;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="requiredInput">
<p id="requiredAlert">Please fill out this field</p>
<select id="requiredSelect">
<option>default</option>
<option>hi</option>
</select>
<p id="requiredSelectAlert">Please select</p>
<button disabled id="disabledButton">Submit</button>
You could add to the condition... Something like:
$('#requiredInput').keyup(function () {
if (document.getElementById("requiredInput").value.length == 12 || document.getElementByid("requiredSelect").value != "Hi")
{
document.getElementById("requiredAlert").style.display = 'none';
document.getElementById("disabledButton").disabled = false;
} else if (document.getElementById("requiredInput").value.length != 12 && document.getElementByid("requiredSelect").value == "Hi") {
document.getElementById("requiredAlert").style.display = 'block';
document.getElementById("disabledButton").disabled = true;
}
});
and add to your htm:
<select id="requiredSelect">
<option value='Hi'>Hi</option>
<option value='op1'>option 1</option>
<option value='opN'>option N</option>
</select>
On the other hand, you are using jQuery so you could change you code to:
$('#requiredInput').keyup(function () {
if ($("#requiredInput").val().length == 12 || $("#requiredSelect").val() != "Hi")
{
$("#requiredAlert").css("display" : "none");
$("#disabledButton")prop("disabled", false);
} else if ($("#requiredInput").val().length != 12 && $("#requiredSelect").val() == "Hi") {
$("#requiredAlert")css("display" : 'block');
$("#disabledButton")prop("disabled", true);
}
});
Related
I have 2 select menus and i'm trying to compare a selected value of one with another but I cannot get the conditional statement working, please see my comments in my code below and in the jsFiddle.
Here's my code and a jsFiddle:
The expected value from the #purpose select menu is "5". The var selected is my attempt at grabbing that value from the #purpose select menu.
$('#purpose').on('change', function() {
if ( this.value == '8') {
$("#business").show();
$("#investor-type").hide();
} else {
$("#business").hide();
$("#investor-type").show();
}
});
var selected = $("#purpose option:selected", this).val();
$('#investor-type').on('change', function() {
if ( this.value == '1') {
$("#disclaimer-form").show();
$(".disclaimer-content").show();
// Having trouble with this else if below
} else if ( this.value == "2" && selected == "5") {
$("#disclaimer-form").show();
$(".disclaimer-content").show();
} else {
$("#disclaimer-form").hide();
$(".disclaimer-content").hide();
}
});
1 . move the selected inside the change
$('#investor-type').on('change', function() {
var selected = $("#purpose").val();
2 . test the 5 inside the 2
else if (this.value == "2") {
$("#retailstatusyes").toggle(selected == "5");
$("#retailstatusno").toggle(selected != "5");
$("#prostatus").hide();
}
You also need to trigger the change of the investor type if the user changes the country.
Here is a full version with better var names using CSS to hide initially
$(function() {
// This shows the next select menu
$('#purpose').on('change', function() {
var other = this.value == '8';
$("#noaccess").toggle(other);
$("#investor-type").toggle(!other);
$('#investor-type').change();
});
$('#investor-type').on('change', function() {
var selected = $("#purpose").val(),
isDutch = selected == "5",
isPro = this.value == "1",
isRetail = this.value == "2";
$("#prostatus").toggle(isPro);
if (isRetail) {
$("#retailstatusyes").toggle(isDutch);
$("#retailstatusno").toggle(!isDutch);
}
else {
$("#retailstatusyes").hide();
$("#retailstatusno").hide();
}
});
});
.invtype {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="purpose" class="left">
<option value="0">Please choose a country</option>
<option value="1">Austria</option>
<option value="2">France</option>
<option value="3">Germany</option>
<option value="4">Italy</option>
<option value="5">Netherlands</option>
<option value="6">Spain</option>
<option value="7">Switzerland</option>
<option value="8">Other</option>
</select>
<select id="investor-type" class="left" style="display:none;">
<option value="0">Investor Type</option>
<option value="1">Professional Investor</option>
<option value="2">Retail Investor</option>
</select>
<div class="invtype" id="noaccess">
You have selected Other and thus you cannot access the next select menu. Soz.
</div>
<div class="invtype" id="prostatus">
You are a pro investor
</div>
<div class="invtype" id="retailstatusno">
You are a retail investor but NOT from the Netherlands
</div>
<div class="invtype" id="retailstatusyes">
You are a retail investor AND you are from the Netherlands. Congrats.
</div>
move the assignment of selected inside change of #investor-type.
take look at this link
// This shows the next select menu
$('#purpose').on('change', function() {
if ( this.value == '8') {
$("#noaccess").show();
$("#investor-type").hide();
$("#prostatus").hide();
$("#retailstatusyes").hide();
$("#retailstatusno").hide();
} else {
$("#noaccess").hide();
$("#investor-type").show();
$("#prostatus").hide();
$("#retailstatusyes").hide();
$("#retailstatusno").hide();
}
});
// Grab value from previous select menu for comparison
$('#investor-type').on('change', function() {
var selected = $("#purpose option:selected").val();
console.log(selected+" "+this.value);
if ( this.value == '1') {
$("#prostatus").show();
} else if ( this.value == "2") {
$("#retailstatusno").show();
$("#prostatus").hide();
// Not working. Show specific success div if the current value is 2 and value from previous select is 5
} else if ( this.value == "2" && selected == "5") {
$("#retailstatusyes").show();
$("#prostatus").hide();
} else {
$("#noaccess").hide();
$("#prostatus").hide();
$("#retailstatusyes").hide();
$("#retailstatusno").hide();
}
});
https://jsfiddle.net/Lvbj2dmm/9/
First, you need to move the evaluation of selected into the event handler to get the up-to-date value:
$('#investor-type').on('change', function() {
var selected = $("#purpose option:selected").val();
// ...
}
Secondly, the order of your else if is wrong because the first (this.value == "2") will render the next (this.value == "2" && selected == "5") useless. Try to change their order so that the most specific one will come first:
if (this.value == '1') {
$("#prostatus").show();
} else if (this.value == "2" && selected == "5") {
$("#retailstatusyes").show();
$("#prostatus").hide();
} else if (this.value == "2") {
$("#retailstatusno").show();
$("#prostatus").hide();
} else {
$("#noaccess").hide();
$("#prostatus").hide();
$("#retailstatusyes").hide();
$("#retailstatusno").hide();
}
See modified Fiddle
i have -/+50 select option with looping. i want disable selection after select another selection According to id.
Javascript code (hide option) :
<script type="text/javascript">
function check(element)
{
d=document;
drops = d.getElementsByName('drop').length;
opts = 99;
for (i=1;i<drops+1;i++)
{
if (element.id != 'drop'+i && element.value != '0')
{
for (z=0;z<opts;z++)
{
if (d.getElementById('drop'+i).options[z].value == element.value)
{
d.getElementById('drop'+i).options[z] = null;
break;
}
}
}
}
}
</script>
Javascript Code (disable select) :
<script>
function myDisable() {
document.getElementById("drop15").disabled = true;
document.getElementById("drop19").disabled = true;
document.getElementById("drop10").disabled = true;
}
</script>
Html Code :
<select id="drop1" name="drop" onchange="check(this); myDisable();">
<option value="0"></option>
<option value="3">One</option>
<option value="5">Two</option>
<option value="1">Three</option>
</select>
----------- loopping select +/-50 -----------------
i want to disable selection from input number for amount to be disabled
I'm writing a form and I'd like to display the payment method for CC or payPal by displaying the relevant <div>
My JS function :
function myFunction() {
if (payment.value == "Credit Card")
{
document.getElementById("PP").style.visibility = "hidden";
}
if (payment.value == "PayPal") {
document.getElementById("CC").style.display= "hidden";
}
}
HTML
<select name="payment" id="payment" select = "selected" onChange="myFunction()">
This doesn't seem to be working. Suggestions?
You need to use the right value for css properties.
display can be "none","block", "" (nothing)
visibility can be "hidden", "visible"
you also need to restore the visibility of the other element.
function myFunction(payment) {
if (payment.value == "Credit Card")
{
document.getElementById("PP").style.display = "none";
document.getElementById("CC").style.display= "block";
}
if (payment.value == "PayPal") {
document.getElementById("CC").style.display= "none";
document.getElementById("PP").style.display= "block";
}
}
And the select box should be:
<select ... onchange="myFunction(this.value);">
Just try this
function myFunction() {
var payment =document.getElementById("payment");
if (payment.value == "Credit Card")
{
document.getElementById("PP").style.display = "none";
}
if (payment.value == "PayPal") {
document.getElementById("CC").style.display= "none";
}
}
You need to correct some stuff.
HTML
<select name="payment" id="payment" select ="selected" onChange="myFunction()">
<option value="cred_car">Credit Card</option>
<option value="paypal">PayPal</option>
</select>
<div id="PP">PP</div>
<div id="CC">CC</div>
JavaScript
function myFunction() {
//alert (payment.value);
if (payment.value == "cred_car")
{
document.getElementById("CC").style.display = "none";
document.getElementById("PP").style.display = "block";
}
if (payment.value == "paypal") {
document.getElementById("PP").style.display= "none";
document.getElementById("CC").style.display= "block";
}
}
jsFiddle: http://jsfiddle.net/pefcf508/
I think you have a few ways you can improve this to make it work.
Pass in "this" reference when calling myFunction to make it easier to get your selection
Be sure to hide the non-selected values and show the selected value so that you don't just hide values.
Initially call the myFunction to set the visibility based on the default selection
JS Fiddle: https://jsfiddle.net/04keaLfr/
Here is the HTML:
<select name="payment" id="payment" onchange="myFunction(this)">
<option value="Credit Card">Credit Card</option>
<option value="PayPal">PayPal</option>
</select>
<div id="PP">Paypal selected</div>
<div id="CC">Credit Card selected</div>
Here is the javascript:
function myFunction(el) {
var selected = el.options[el.selectedIndex].value;
document.getElementById('CC').style.display = (selected == 'Credit Card' ? 'inline' : 'none');
document.getElementById('PP').style.display = (selected == 'PayPal' ? 'inline' : 'none');
}
myFunction(document.getElementById('payment'));
I have used this multiselect checkbox with a combobox option..
JsFiddle
In my jsfiddle that checkbox with a combobox type will not work. I have too many codes. So, I didn't included. See this link for full codes I'm trying to show and hide the div content depending upon selected checkbox. it does not work. I tried this code separately (without a combobox checkbox only). it works. I have problem with checkbox with a combobox type. How do I show/hide div content based upon selected checkbox with combobox option?
Without Combobox Fiddle
Javascript
document.getElementById("option_1").onclick = function() {
if(this.checked)
document.getElementById('choose_the_correct_answer').style.display = "block";
else
document.getElementById('choose_the_correct_answer').style.display = "none";
}
I have tried this Jquery code too
$(document).ready(function(){
$('#option_1').on('change', function() {
if ( this.value == '1')
{
$("#choose_the_correct_answer").show();
}
else
{
$("#choose_the_correct_answer").hide();
}
});
});
HTML
<select id="control_3" name="control_3[]" multiple="multiple" size="5">
<option value=""></option>
<option id="option_1" value="option_1">Choose the Correct Answer</option>
<option id="option_2" value="option_2">Fill in the Blanks</option>
<option id="option_3" value="option_3">True or False</option>
<option id="option_4" value="option_4">Match the Following</option>
<option id="option_5" value="option_5">Two Mark Questions</option>
<option id="option_6" value="option_6">Five Mark Questions</option>
<option id="option_7" value="option_7">Others</option>
</select>
<div id="choose_the_correct_answer">choose the correct answer</div>
<div id="fill_in_the_blanks">fill in the blanks</div>
<div id="true_or_false">true or false</div>
<div id="match_the_following">match the following</div>
<div id="two_mark_questions">two mark questions</div>
<div id="five_mark_qustions">five mark questions</div>
<div id="others">others</div>
try
$('#option_1').on('click', function() {
});
and
the condition should be
if ( this.value == 'option_1')
JSFIDDLE
$(document).ready(function(){
$('#option_1').on('click', function() {
if ( this.value == 'option_1')
{
$("#choose_the_correct_answer").show();
}
else
{
$("#choose_the_correct_answer").hide();
}
});
});
UPDATE:
AND a better option will be to use .togggle() if you intend to use multiselect
UPDATED DEMO
JS:
$(document).ready(function(){
$('option').on('click', function() {
if ( this.value == 'option_1')
{
$("#choose_the_correct_answer").toggle();
}
else if ( this.value == 'option_2')
{
$("#fill_in_the_blanks").toggle();
}
else if ( this.value == 'option_3')
{
$("#true_or_false").toggle();
}
else if ( this.value == 'option_4')
{
$("#match_the_following").toggle();
}
else if ( this.value == 'option_5')
{
$("#two_mark_questions").toggle();
}
else if ( this.value == 'option_6')
{
$("#five_mark_qustions").toggle();
}
else if ( this.value == 'option_7')
{
$("#others").toggle();
}
});
});
New Update: using normal dropdown with multiselect
use
$('select').on('change', function() {
FIDDLE
I have a JavaScript function (picture), which is activated when the visitor selects an option (onchange) from the drop down menu (picture_type), which then changes the data within the div (picture_div).
However not always does the data within the div reflect the chosen option, e.g: If you select the 'Select' option...then select the 'URL' option, the div doesn't reflect what should be their for the 'URL'.
Heres the JavaScript function along with the appropriate HTML:
<script>
function picture() {
var picture_type = document.getElementById('picture_type').value;
if (picture_type == 2) {
document.getElementById('picture_div').innerHTML = 'Click here to select one.';
}
if (picture_type >= 1) {
document.getElementById('picture_div').style.display = 'block';
} else {
document.getElementById('picture_div').style.display = 'none';
}
}
</script>
<select id="picture_type" onchange="return picture();">
<option value="0" selected="selected">Upload</option>
<option value="1">URL</option>
<option value="2">Select</option>
</select>
<div id="picture_div" style="display: none;">
URL: <input name="url" type="text" style="width: 100%" />
</div>
If you don't understand me, I suggest you test the above code and play with the options to understand me better. :)
All help is greatly appreciated!.
Here is the code ,Try this out
<html>
<head>
<script>
function picture() {
var picture_type = document.getElementById('picture_type').value;
if (picture_type == 2) {
document.getElementById('picture_div').innerHTML = 'Click here to select one.';
}
if(picture_type == 1) {
document.getElementById('picture_div').innerHTML = 'URL: <input name="url" type="text" style="width: 100%" />';
}
if (picture_type >= 1) {
document.getElementById('picture_div').style.display = 'block';
} else {
document.getElementById('picture_div').style.display = 'none';
}
}
</script>
</head>
<body>
<select id="picture_type" onchange="return picture();">
<option value="0" selected="selected">Upload</option>
<option value="1">URL</option>
<option value="2">Select</option>
</select>
<div id="picture_div" style="display: none;">
URL: <input name="url" type="text" style="width: 100%" />
</div>
</body>
</html>
with regards,
Wazzy
I think there are some inconsistencies in the code.
You are changing the contents of the picture_div only when the option URL is selected, but the div is displayed when either URL or Select is selected.
I think you need to change the value of the picture_div if the Select option is selected.
Actually what is the requirement here? Whether the picture_div has to be displayed while URL or Select options are selected? If that is the case then you have to check the condition
if (picture_type == 2) {
document.getElementById('picture_div').innerHTML = 'Click here to select one.';
}
because this condition handles only the Select case. You've to handle the case when the value is 1 (URL) also.
Try this
function picture() {
var picture_type = document.getElementById('picture_type').value;
if (picture_type == 2) {
document.getElementById('picture_div').innerHTML = 'Click here to select one.';
}else if(picture_type == 1){
document.getElementById('picture_div').innerHTML = 'Option url';
}
if (picture_type >= 1) {
document.getElementById('picture_div').style.display = 'block';
} else {
document.getElementById('picture_div').style.display = 'none';
}
}