I have a input-field, and when I click it a <div> will be shown.
But for some reason when I click on the <div>, it hides, and I can't seem to find the issue.
JSfiddle
$('#searchid').blur(function() {
if ($(this).val() != "") {
$("#drope_box").show();
} else {
$("#drope_box").hide();
}
});
$('#searchid').focus(function() {
$("#drope_box").show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="banner_search_inner_box_search">
<input type="text" name="search" class="search" id="searchid" onkeyup="getshows();" value="" placeholder="Enter a City,Locality" autocomplete="off">
<div id="result"></div>
</div>
<div id="drope_box" style="display:none;">
<div class="banner_search_type">
<select id="property_type" name="property_type">
<option value="All">All</option>
<option value="Apartment">Apartment</option>
<option value="Plot">Plot</option>
</select>
</div>
<div class="banner_search_price_min">
<select name="price_min" class="search_list" id="price_min">
<option value="">Price Min</option>
<option value="100000">1 lac</option>
<option value="1000000">10 lacs</option>
</select>
</div>
<div class="banner_search_price_max">
<select name="price_max" id="price_max">
<option value="">Price Max</option>
<option value="100000">1 lac</option>
<option value="1000000">10 lacs</option>
</select>
</div>
</div>
This is because you're hiding the <div> when you lose focus on the input and there is no value.
In your blur handler, if the input is empty (as when you first click it), it will hide the dropdown when the input loses focus.
check this I hope that this answered what you have asked for...
$('#searchid').blur(function() {
if($(this).val() != ""){
$("#drope_box").hide();
}
else{
$("#drope_box").show();
}
});
$('#searchid').focus(function() {
$("#drope_box").show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="banner_search_inner_box_search">
<input type="text" name="search" class="search" id="searchid" onkeyup="getshows();" value="" placeholder="Enter a City,Locality" autocomplete="off">
<div id="result"></div>
</div>
<div id="drope_box" style="display:none;">
<div class="banner_search_type">
<select id="property_type" name="property_type">
<option value="All">All</option>
<option value="Apartment">Apartment</option>
<option value="Plot">Plot</option>
</select>
</div>
<div class="banner_search_price_min">
<select name="price_min" class="search_list" id="price_min">
<option value="">Price Min</option>
<option value="100000">1 lac</option>
<option value="1000000">10 lacs</option>
</select>
</div>
<div class="banner_search_price_max">
<select name="price_max" id="price_max">
<option value="">Price Max</option>
<option value="100000">1 lac</option>
<option value="1000000">10 lacs</option>
</select>
</div>
</div>
Related
I have a select which contains options, I want to be able to resent each of the select to its first value onclick
$('.reset').on('click', function() {
$('food option:first').prop('selected', true);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<select class="food">
<option value="" selected disabled>Select Food</option>
<option value="rice">Rice</option>
<option value="garri">Garri</option>
</select>
<input type="text" class="showfood">
<button class="reset">Reset Select</button>
</div>
<div class="box">
<select class="food">
<option value="" selected disabled>Select Food</option>
<option value="beans">Beans</option>
<option value="pear">pear</option>
</select>
<input type="text" class="showfood">
<button class="reset">Reset Select</button>
</div>
However, what this does is reset only the first select.
Your logic to reset is correct. The issue you have is that you need to find only the option related to the select within the same container as the clicked button. To achieve that you can use closest() and find(), like this:
$('.reset').on('click', function() {
$(this).closest('.box').find('.food option:first').prop('selected', true);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<select class="food">
<option value="" selected disabled>Select Food</option>
<option value="rice">Rice</option>
<option value="garri">Garri</option>
</select>
<input type="text" class="showfood">
<button class="reset">Reset Select</button>
</div>
<div class="box">
<select class="food">
<option value="" selected disabled>Select Food</option>
<option value="beans">Beans</option>
<option value="pear">pear</option>
</select>
<input type="text" class="showfood">
<button class="reset" type="button">Reset Select</button>
</div>
I'm struggling with the following issue - I have an HTML form in which there are three select fields. Before submitting values, I want to make a form validation in which at least ONE of the four dropdowns should be selected. I have the following code but it keeps requiring all the dropdowns.
Link to the code: jsfiddle
Code - HTML
<div class="container">
<div class="row">
<div class="col-lg-12">
<form method="post" id="myform">
<div class="form-group ">
<label class="control-label " for="select">
Select a Choice
</label>
<select class="select form-control" id="select1" name="select1" required>
<option value="">---</option>
<option value="First Choice">1</option>
<option value="Second Choice">2</option>
<option value="Third Choice">3</option>
</select>
<select class="select form-control" id="select2" name="select2" required>
<option value="">---</option>
<option value="First Choice">a</option>
<option value="Second Choice">b</option>
<option value="Third Choice">c</option>
</select>
<select class="select form-control" id="select3" name="select3" required>
<option value="">---</option>
<option value="First Choice">X</option>
<option value="Second Choice">Y</option>
<option value="Third Choice">Z</option>
</select>
</div>
<div class="form-group">
<div>
<button class="btn btn-primary " name="submit" id="sub" type="submit">
Submit
</button>
</div>
</div>
</form>
</div>
</div>
</div>
Code - JS:
$(document).ready(function () {
$('#sub').click(function() {
check = $(".select option:selected").length;
if(!check) {
alert("You must select an option from at least one dropdown");
return false;
}
});
});
Where I make a mistake in the code?
Take a look at this
jsfiddle example
You need to remove the "required" attribute and manage required values using JS because if you set all combobox to required you'll be forced to fill all of them.
<div class="container">
<div class="row">
<div class="col-lg-12">
<form method="post" id="myform">
<div class="form-group ">
<label class="control-label " for="select">
Select a Choice
</label>
<select class="select form-control" id="select1" name="select1">
<option selected disabled value="">---</option>
<option value="First Choice">1</option>
<option value="Second Choice">2</option>
<option value="Third Choice">3</option>
</select>
<select class="select form-control" id="select2" name="select2">
<option selected disabled value="">---</option>
<option value="First Choice">a</option>
<option value="Second Choice">b</option>
<option value="Third Choice">c</option>
</select>
<select class="select form-control" id="select3" name="select3">
<option selected disabled value="">---</option>
<option value="First Choice">X</option>
<option value="Second Choice">Y</option>
<option value="Third Choice">Z</option>
</select>
</div>
<div class="form-group">
<div>
<button class="btn btn-primary " name="submit" id="sub" type="submit">
Submit
</button>
</div>
</div>
</form>
</div>
</div>
</div>
JS code
$(document).ready(function () {
$('#sub').click(function() {
check = $('option[disabled]:selected').length;
if(check == 3) {
alert("You must select an option from at least one dropdown");
return false;
}
});
});
Hope it helps you
First, you must delete the required on your select tags. Then, use something like this in the jquery part:
$(document).ready(function () {
$('#sub').click(function() {
var anySelected = false;
$(".select option:selected").each(function(){
if(!$(this).val() == ""){
anySelected = true;
}
});
if(!anySelected) {
alert("You must select an option from at least one dropdown");
return false;
}
});
});
Here is a working fiddle.
Hope it helps!
I need to add a text input that displayed only when the other is selected. And make this input required if it is shown. One thing more, I need to enter that input to the same table in the database. Can anyone help? Please!
<form action="" method="post">
<div class="row">`enter code here`
<div class="col-sm-8 col-sm-offs et-2">
<select class="form-control" name="country" id="country" required>
<option value="">Please select your country</option>
<option value="A">Country A</option>
<option value="B">Country B</option>
<option value="C">Country C</option>
<option value="Other">Other</option>
</select>
<button type="submit" class="btn btn-gpsingh">Next</a>
</div>
</div>
</form>
Try this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post">
<div class="row">
<div class="col-sm-8 col-sm-offs et-2">
<select class="form-control" name="country" id="country" required >
<option value="">Please select your country</option>
<option value="A">Country A</option>
<option value="B">Country B</option>
<option value="C">Country C</option>
<option value="Other">Other</option>
</select>
<input type ="text" id="country_other" style="display:none">
<button type="submit" class="btn btn-gpsingh">Next</a>
</div>
</div>
</form>
<script>
$("#country").change(function(){
var value = this.value;
if(value =='Other')
{
$("#country_other").show();
$("#country_other").prop('required',true);
$("#country_other").val('');
}
else
{
$("#country_other").hide();
$("#country_other").prop('required',false);
$("#country_other").val('');
}
});
</script>
I've tried a range of methods to try and swap two options and none worked.
I want the first option of select to swap with first option of select1
Is anyone able to provide an example of how to deal with this swap?
Here is the JavaScript I have tried:
$('#swap').click(function() {
var v1 = $('#select').val(),
v2 = $('#select1').val();
$('#select').val(v2);
$('#select1').val(v1);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search-tour__converter">
<form action="#" class="search-tour__form flex">
<div class="search-tour__form_left-side">
<input type="number" id="amount" value="1" class="search-tour__input">
<div class="search-tour__drop-down">
<select id="select" class="main-dropdown">
<option value="EUR">EUR</option>
<option value="EUR">EUR</option>
<option value="USD">USD</option>
<option value="UAH">UAH</option>
</select>
</div>
</div>
<button class="search-tour__btn" value="swap" id="swap" type="button">Swap
</button>
<div class="search-tour__form_right-side">
<div class="search-tour__drop-down">
<select id="select1" class="main-dropdown">
<option value="UAH">UAH</option>
<option value="UAH">UAH</option>
<option value="USD">USD</option>
<option value="EUR">EUR</option>
</select>
</div>
<input type="number" id="result" value="31.37" class="search-tour__input">
</div>
<input type="button" class="titles-block__btn" value="Конвертировать" onclick="calculate();">
</form>
</div>
Are you trying to do the following?
$('#swap').click(function()
{
var v1 = $('#select option:first-child');
var v2 = $('#select1 option:first-child');
var temp1 = v1.html();
var temp2 = v2.html();
v2.html(temp1);
v1.html(temp2);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search-tour__converter">
<form action="#" class="search-tour__form flex">
<div class="search-tour__form_left-side">
<input type="number" id="amount" value="1" class="search-tour__input">
<div class="search-tour__drop-down">
<select id="select" class="main-dropdown">
<option value="EUR">EUR</option>
<option value="USD">USD</option>
<option value="UAH">UAH</option>
</select>
</div>
</div>
<button class="search-tour__btn" value="swap" id="swap" type="button">Swap
</button>
<div class="search-tour__form_right-side">
<div class="search-tour__drop-down">
<select id="select1" class="main-dropdown">
<option value="UAH">UAH</option>
<option value="USD">USD</option>
<option value="EUR">EUR</option>
</select>
</div>
<input type="number" id="result" value="31.37" class="search-tour__input">
</div>
<input type="button" class="titles-block__btn" value="Конвертировать" onclick="calculate();">
</form>
</div>
So basically what I'm trying to achieve is to make the placeholder of the inputs change when I change the select. The first input successfully changes, but that doesn't seem to be the same with the second input. Below is the code that I am using:
function onChange(fromOrTo) {
if (fromOrTo = 'from') {
document.getElementById("from").placeholder = document.getElementById("selectFrom").value;
} else if (fromOrTo = 'to') {
document.getElementById("to").placeholder = document.getElementById("selectTo").value;
}
}
<body>
<div id="sect">
<section>
<select onchange="onChange('from')" id="selectFrom">
<option value="Celcius">Celcius</option>
<option value="Farenheit">Farenheit</option>
<option value="Kelvin">Kelvin</option>
<option value="Reamur">Reamur</option>
</select>
<span class="toText">to</span>
<select onchange="onChange('to')" id="selectTo">
<option value="Celcius">Celcius</option>
<option value="Farenheit">Farenheit</option>
<option value="Kelvin">Kelvin</option>
<option value="Reamur">Reamur</option>
</select>
</section>
<section>
<input type="text" id="from">
<span id="toText">to</span>
<input type="text" id="to">
</section>
</div>
</body>
You just need to compare with === instead of =
function onChange(fromOrTo) {
if (fromOrTo === 'from') {
document.getElementById("from").placeholder = document.getElementById("selectFrom").value;
} else if (fromOrTo === 'to') {
document.getElementById("to").placeholder = document.getElementById("selectTo").value;
}
}
<body>
<div id="sect">
<section>
<select onchange="onChange('from')" id="selectFrom">
<option value="Celcius">Celcius</option>
<option value="Farenheit">Farenheit</option>
<option value="Kelvin">Kelvin</option>
<option value="Reamur">Reamur</option>
</select>
<span class="toText">to</span>
<select onchange="onChange('to')" id="selectTo">
<option value="Celcius">Celcius</option>
<option value="Farenheit">Farenheit</option>
<option value="Kelvin">Kelvin</option>
<option value="Reamur">Reamur</option>
</select>
</section>
<section>
<input type="text" id="from">
<span id="toText">to</span>
<input type="text" id="to">
</section>
</div>
</body>
You only have one equals sign in each of your if conditionals. This assigns to the variable rather than compares it. Switching to two equals signs (or three to avoid type coercison) will resolve this problem:
function onChange(fromOrTo) {
if (fromOrTo === 'from') {
document.getElementById("from").placeholder = document.getElementById("selectFrom").value;
} else if (fromOrTo === 'to') {
document.getElementById("to").placeholder = document.getElementById("selectTo").value;
}
}
<body>
<div id="sect">
<section>
<select onchange="onChange('from')" id="selectFrom">
<option value="Celcius">Celcius</option>
<option value="Farenheit">Farenheit</option>
<option value="Kelvin">Kelvin</option>
<option value="Reamur">Reamur</option>
</select>
<span class="toText">to</span>
<select onchange="onChange('to')" id="selectTo">
<option value="Celcius">Celcius</option>
<option value="Farenheit">Farenheit</option>
<option value="Kelvin">Kelvin</option>
<option value="Reamur">Reamur</option>
</select>
</section>
<section>
<input type="text" id="from">
<span id="toText">to</span>
<input type="text" id="to">
</section>
</div>
</body>