I would like to perform a search based on the chosen value from select dropdown list but I am not sure how to use javascript to perform that search. Below is my code.
<form name="countryOpt">
<select name="region" id="region" onchange="">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div id="all">
<select name="country" id="country" style="display: none;">
<option value="http://www.google.com.my">Google</option>
</select>
<select name="country" id="state" style="display: none;">
<option value="http://www.yahoo.com">Yahoo</option>
</select>
<select name="country" id="city" style="display: none;">
<option value="http://www.facebook.com">Facebook</option>
</select>
</div>
<input type="button" name="go" value="Search" onclick="window.location=document.countryOpt.country.options[document.countryOpt.country.selectedIndex].value" />
</form>
<script type="text/javascript">
$(window).load(function(){
$("select").change(function () {
$("select option:selected").each(function () {
if($(this).val() == "1") {
$('#all select').css('display','none');
$('#country').css('display','block');
} else if($(this).val() == "2") {
$('#all select').css('display','none');
$('#state').css('display','block');
} else if($(this).val() == "3") {
$('#all select').css('display','none');
$('#city').css('display','block');
}
});
});
});
</script>
change your javascript code to this and try :
$(window).load(function()
{
$("#region").change(function ()
{
$('select[name=country]').css('display','none');
if($(this).val() == "1")
$('#country').css('display','block');
if($(this).val() == "2")
$('#state').css('display','block');
if($(this).val() == "3")
$('#city').css('display','block');
});
});
JSFiddle
Maybe you are looking for something like this?
<form name="countryOpt">
<select name="region" id="region">
<option value="http://www.google.com.my">Google</option>
<option value="http://www.yahoo.com">Yahoo</option>
<option value="http://www.facebook.com">Facebook</option>
</select>
<input type="button" name="go" id="go" value="Search"/>
</form>
<script>
$(document).ready(function(){
//Triggered by clicking the selectbox
$("#region").change(function () {
//window.location.href=$('#region').val();
alert($('#region').val());
});
//Triggered by clicking the button
$("#go").click(function () {
//window.location.href=$('#region').val();
alert($('#region').val());
});
});
</script>
jsbin
Related
I'm using Chosen from jQuery to add/hide some form datas based on previous inputs.. I want to ask how I can not hide an entire select only a few elements from in based on id/name.
Thank you.
Based on
$("#otherField2").chosen()
$("#seeAnotherField2").chosen()
// This way I can hide all options if nothing is chosen
$("#seeAnotherField2").change(
function() {
if ($(this).val() == "nothing") {
$('#otherFieldDiv2').show();
$('#otherField2').attr('required', '');
$('#otherField2').attr('data-error',
'This field is required.');
} else {
$('#otherFieldDiv2').hide();
$('#otherField2').removeAttr('required');
$('#otherField2').removeAttr('data-error');
}
});
$("#seeAnotherField2").trigger("change");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js" ></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css" />
<div class="form-group" id="otherFieldDiv3">
<label for="otherField3">Sev</label>
<select class="form-control" id="otherField2">
<option value="nor" id="1">Nor</option>
<option value="sev" id="2">Sev</option>
<option value="min" id="3">Min</option>
</select>
</div>
Hide only option1 from this:
<div class="form-group">
<label for="seeAnotherField2">Options</label>
<select class="form-control" id="seeAnotherField2">
<option value="nothing">Nothing</option>
<option value="option1">Option1</option>
<option value="option2">Option2</option>
</select>
</div>
Try this:
$("#seeAnotherField2").change(function() {
if ($(this).val() == "nothing") {
$("#otherField2 option[value='nor']").hide();
$("#otherField2 option[value='sev']").attr('selected','selected');
}else{
$("#otherField2 option[value='nor']").show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group" id="otherFieldDiv3">
<label for="otherField3">Sev</label>
<select class="form-control" id="otherField2">
<option value="nor" id="1">Nor</option>
<option value="sev" id="2">Sev</option>
<option value="min" id="3">Min</option>
</select>
</div>
Hide only option1 from this:
<div class="form-group">
<label for="seeAnotherField2">Options</label>
<select class="form-control" id="seeAnotherField2">
<option value="nothing">Nothing</option>
<option value="option1">Option1</option>
<option value="option2">Option2</option>
</select>
</div>
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 want to disable the buttons when I select empty fields from dropdown menu. If I select some value from the value then the button should be enabled. Only in case I have selected the 2 fields as empty ([0] position), then only the button should be disabled. I want to use jQuery or JS for this.
Currently I was doing this -- but it is not working.
if ($('#roleid :selected').text()== "" && $('#userGroupId :selected').text()== "")
{
document.getElementById('updaterole').disabled = true;
document.getElementById('updateUserGroup').disabled =true;
}
try this below
if ($('#roleid').val()== "" && $('#userGroupId').val()== "")
{
document.getElementById('updaterole').disabled = true;
document.getElementById('updateUserGroup').disabled =true;
}
try this:
if ($('#roleid').filter(':selected').text() == "" && $('#userGroupId').filter(':selected').text() == "")
{
$('updaterole').prop("disabled", true);
$('updateUserGroup').prop("disabled", true);
}
$(".myddl").on("change", function () {
var flag=false;
$("select.myddl").each(function() {
if($(this).val()){
flag=true;
return false
}else{
flag=false;
}
});
if(!flag){
document.getElementById('updaterole').disabled = true;
document.getElementById('updateUserGroup').disabled =true;
}else{
document.getElementById('updaterole').disabled = false;
document.getElementById('updateUserGroup').disabled =false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="first" class="myddl">
<option value="">-- Select value --</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<select name="second" class="myddl">
<option value="">-- Select value --</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</br></br>
<button id="updaterole" disabled>Button1</button>
<button id="updateUserGroup" disabled>Button2</button>
Below code fires on change of dropdowns:
$('form select').on('change', function() {
if ($("#ddl1 option:selected").text() == "" && $("#ddl2 option:selected").text()=="") {
$(':input[type="submit"]').prop('disabled', true);
}
else{
$(':input[type="submit"]').prop('disabled', false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="ddl1">
<option value="0">Select</option>
<option value="1"></option>
<option value="2">First Option</option>
</select>
<select id="ddl2">
<option value="0">Select</option>
<option value="1"></option>
<option value="2">First Option</option>
</select>
<input type="submit" name="btnGo" id="btnGo" value="Button1" class="btn disabled" style="width: 70px;" />
<input type="submit" name="btnGo" id="btnGo" value="Button1" class="btn disabled" style="width: 70px;" />
<form>
HTML Code :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="ddl1">
<option value="0">Select</option>
<option value="1"></option>
<option value="2">First Option</option>
</select>
<select id="ddl2">
<option value="0">Select</option>
<option value="1"></option>
<option value="2">First Option</option>
</select>
<input type="submit" name="btnGo" id="btnGo" value="Button1" class="btn disabled" style="width: 70px;" />
<input type="submit" name="btnGo" id="btnGo" value="Button1" class="btn disabled" style="width: 70px;" />
<form>
I have multiple selector on loop in php code
var new_acc = $("div[id^=new_acc]").hide();
for (var i = 1; i <= id; i++) {
$('#reason_change\\['+id+'\\]').change(function(e) {
$( "#reason_change\\["+id+"\\] ").show();
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="reason_change[1]" id="reason_change[1]" >
<option value="0">--0000--</option>
<option value="1">--0001--</option>
<option value="2">--0002--</option>
</select>
<div class="field" id="new_acc[1]">
<label>Account</label>
<input type="text" name="account_cus[1]" id="account_cus[1]" value="">
</div>
<select name="reason_change[2]" id="reason_change[2]" >
<option value="0">--0000--</option>
<option value="1">--0001--</option>
<option value="2">--0002--</option>
</select>
<div class="field" id="new_acc[2]">
<label>Account</label>
<input type="text" name="account_cus[1]" id="account_cus[2]" value="">
</div>
if i click on change my selctor id = reason_change[2] i wanna show id="new_acc[2]" showing
Your JS doesn't need the loop and doesn't need to reference the individual element IDs, because you can select all of the select elements at once and bind a single change handler to them, then within the handler use this to reference the changing element and (DOM navigation method) .next() to get its associated div element:
$("select[id^=reason_change]").change(function() {
$(this).next().show();
});
If you wanted to make it so that the div is only shown when certain values are selected in the select element, and hidden otherwise, you can do something like this:
var new_acc = $("div[id^=new_acc]").hide();
$("select[id^=reason_change]").change(function() {
if(this.value === "2") { // show only if certain option is selected
$(this).next().show();
} else {
$(this).next().hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="reason_change[1]" id="reason_change[1]" >
<option value="0">--0000--</option>
<option value="1">--0001--</option>
<option value="2">--0002--</option>
</select>
<div class="field" id="new_acc[1]">
<label>Account</label>
<input type="text" name="account_cus[1]" id="account_cus[1]" value="">
</div>
<select name="reason_change[2]" id="reason_change[2]" >
<option value="0">--0000--</option>
<option value="1">--0001--</option>
<option value="2">--0002--</option>
</select>
<div class="field" id="new_acc[2]">
<label>Account</label>
<input type="text" name="account_cus[1]" id="account_cus[2]" value="">
</div>
var new_acc = $("div[id^=new_acc]").hide();
$("select[id^=reason_change]").change(function() {
if($(this).val() === "2"){
$(this).next().show();
} else {
$(this).next().hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="reason_change[1]" id="reason_change[1]" >
<option value="">--Select--</option>
<option value="0">--0000--</option>
<option value="1">--0001--</option>
<option value="2">--0002--</option>
</select>
<div class="field" id="new_acc[1]">
<label>Account</label>
<input type="text" name="account_cus[1]" id="account_cus[1]" value="">
</div>
<select name="reason_change[2]" id="reason_change[2]">
<option value="">--Select--</option>
<option value="0">--0000--</option>
<option value="1">--0001--</option>
<option value="2">--0002--</option>
</select>
<div class="field" id="new_acc[2]">
<label>Account</label>
<input type="text" name="account_cus[1]" id="account_cus[2]" value="">
</div>
I want to change the text of a div based on the option select of another div. The script that I have below doesn't work. Can anyone help?
<div class="field-wrap">
<input id="amount" class="floatLabel" name="amount" type="text"/>
<label for="amount">Fee</label>
</div>
<div class="field-wrap">
<i class="fa fa-sort"></i>
<select class="floatLabel" name="form">
<option>Form 1</option>
<option>Form 2</option>
<option>Form 3</option>
</select>
</div>
Script:
$("[name='form']").change(function(){
if($(this).find('option:selected').text().trim() == 'Form 1') {
$('#amount').text("450");
}
if($(this).find('option:selected').text().trim(); == 'Form 2') {
$('#amount').text("400");
}
if($(this).find('option:selected').text().trim(); == 'Form 3') {
$('#amount').text("900");
}
});
instead of
$(this).val()
use
$(this).find('option:selected').text();
// you may need to use .trim to avoid white spacses
$(this).find('option:selected').text().trim();
Explanation
by using $(this).val() you will get the value of option that mean your code should be like this
<select class="floatLabel" name="form">
<option value="Form 1">Form 1</option>
<option value="Form 2">Form 2</option>
<option value="Form 3">Form 3</option>
</select>
but while you didn't set the values for option you need to get the selected option text by using
$(this).find('option:selected').text()
and for input you need to use .val() instead of .text() so you need to use
$('#amount').val();
Demo
$("[name='form']").change(function(){
var option_text = $(this).find('option:selected').text().trim();
if( option_text == 'Form 1') {
$('#amount').val("450");
}
if( option_text == 'Form 2') {
$('#amount').val("400");
}
if( option_text == 'Form 3') {
$('#amount').val("900");
}
}).change(); // use .change() if you need to run the change event on load
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field-wrap">
<input id="amount" class="floatLabel" name="amount" type="text"/>
<label for="amount">Fee</label>
</div>
<div class="field-wrap">
<i class="fa fa-sort"></i>
<select class="floatLabel" name="form">
<option>Form 1</option>
<option>Form 2</option>
<option>Form 3</option>
</select>
</div>
Give your options a value, then use that - there's no reason for a single if, nor for confusing code:
$('#selection').change(function() {
$('#amount').text($(this).val());
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selection" class="floatLabel" name="form">
<option value="450">Form 1</option>
<option value="400">Form 2</option>
<option value="900">Form 3</option>
</select>
<div id="amount">
</div>
$("[name='form']").change(function() {
if ($(this).val() == 'Form 1') {
//$('#amount').text("450");
$('#amount').val("450");
}
if ($(this).val() == 'Form 2') {
//$('#amount').text("400");
$('#amount').val("400");
}
if ($(this).val() == 'Form 3') {
$('#amount').val("900");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field-wrap">
<input id="amount" class="floatLabel" name="amount" type="text" />
<label for="amount">Fee</label>
</div>
<div class="field-wrap">
<i class="fa fa-sort"></i>
<select class="floatLabel" name="form">
<option>Form 1</option>
<option>Form 2</option>
<option>Form 3</option>
</select>
</div>
Instead of $('#amount').text("450");, use $('#amount').val("450");.
Similarly do for other options.