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>
Related
I am doing a small project on creating an order form.
I am trying to display the price per page once the client selects the time.
For example if the selected time is 4hour it should return 12usd.. if its 6hours it should return 10 usd......
<div class="col-md-6">
<div class=" custom-select" style="width:200px;">
<select class="form-control" id="time">
<option value="0">Time...</option>
<option value="1">4hrs</option>
<option value="2">6hrs</option>
<option value="3">1day</option>
<option value="4">2days</option>
<option value="5">3days</option>
<option value="6">4days</option>
<option value="7">5days</option>
<option value="8">6days</option>
<option value="9">7days</option>
<option value="10">After 7 days</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="bmd-label-floating">cpp</label>
<input type="text" class="form-control" id="cpp">
</div>
</div>
You can make something like this.
const selectElement = document.querySelector('.ice-cream');
selectElement.addEventListener('change', (event) => {
const result = document.querySelector('.result');
result.textContent = `You like ${event.target.value}`;
});
<label>Choose an ice cream flavor:
<select class="ice-cream" name="ice-cream">
<option value="">Select One …</option>
<option value="chocolate">Chocolate</option>
<option value="sardine">Sardine</option>
<option value="vanilla">Vanilla</option>
</select>
</label>
<div class="result"></div>
So you won't tell us in details so we have to guess
const prices = [0,12,10,9,8,7,6,5,4,3,2],
cpp = document.getElementById('cpp'),
time = document.getElementById('time')
time.addEventListener('change',function() {
cpp.value = prices[this.value]
})
// init if the select is already set from server
const change = new CustomEvent("change");
time.dispatchEvent(change);
<div class="col-md-6">
<div class=" custom-select" style="width:200px;">
<select class="form-control" id="time">
<option value="0">Time...</option>
<option value="1">4hrs</option>
<option value="2">6hrs</option>
<option value="3">1day</option>
<option value="4">2days</option>
<option value="5">3days</option>
<option value="6">4days</option>
<option value="7">5days</option>
<option value="8">6days</option>
<option value="9">7days</option>
<option value="10">After 7 days</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="bmd-label-floating">cpp</label>
<input type="text" class="form-control" id="cpp">
</div>
</div>
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>
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>
I created a fairly simple application to query a third-party API.
My issue is that I expected to get the entire URI http://uinames.com/api/?region=japan& in the console (see console.log(…)) but I only get the ?region=japan& part.
I am not getting any error, does anyone can spot what is wrong with my implementation ?
My code
// Execute the function to query the API
function loadNames(e) {
e.preventDefault();
// Read the values from the form and create the variables
const origin = document.getElementById('#country').value;
const gender = document.getElementById('gender').value;
const amount = document.getElementById('quantity').value;
// Build the URL
let url = 'http://uinames.com/api/?';
// Read the origin and append to url
if (origin !== '') {
url += `region=${origin}&`;
}
console.log(url);
}
document.querySelector('#generate-names').addEventListener('submit', loadNames);
<body>
<div class="container">
<div id="content" class="content">
<h1>Generate Names</h1>
<form id="generate-names" action="#">
<div class="row">
<div class="six-columns">
<label for="country">Filter By Country:</label>
<select class="u-full-width" name="country">
<option value="">-- Select --</option>
<option value="argentina">Argentina</option>
<option value="brasil">Brasil</option>
<option value="colombia">Colombia</option>
<option value="costa rica">Costa Rica</option>
<option value="france">France</option>
<option value="italy">Italy</option>
<option value="mexico">Mexico</option>
<option value="portugal">Portugal</option>
<option value="united states">United States</option>
<option value="india">India</option>
<option value="japan">Japan</option>
</select>
<label for="gender">Gender:</label>
<select class="u-full-width" id="gender">
<option value="">-- Select --</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<label>Number of names to generate</label>
<input type="number" id="quantity" class="u-full-width" min="5" max="15" value="5">
<input class="button-primary u-full-width" type="submit" value="Generate">
</div>
<div class="six-columns">
<div id="result"></div>
</div>
</div>
</form>
</div>
</div>
</body>
It works fine.
I fixed a few errors though.
const origin = document.getElementById('#country').value
Should be (without the #)
const origin = document.getElementById('country').value
No id had been asigned to the select input
<select class="u-full-width" name="country" id="country">
If you run the fiddle, you will see it works as expected.
document.querySelector('#generate-names').addEventListener('submit', loadNames);
// Execute the function to query the API
function loadNames(e) {
e.preventDefault();
// Read the values from the form and create the variables
const origin = document.getElementById('country').value;
const gender = document.getElementById('gender').value;
const amount = document.getElementById('quantity').value;
// Build the URL
let url = 'http://uinames.com/api/?';
// Read the origin and append to url
if (origin !== '') {
url += `region=${origin}&`;
}
console.log(url);
}
<div class="container">
<div id="content" class="content">
<h1>Generate Names</h1>
<form id="generate-names" action="#">
<div class="row">
<div class="six-columns">
<label for="country">Filter By Country:</label>
<select class="u-full-width" name="country" id="country">
<option value="">-- Select --</option>
<option value="argentina">Argentina</option>
<option value="brasil">Brasil</option>
<option value="colombia">Colombia</option>
<option value="costa rica">Costa Rica</option>
<option value="france">France</option>
<option value="italy">Italy</option>
<option value="mexico">Mexico</option>
<option value="portugal">Portugal</option>
<option value="united states">United States</option>
<option value="india">India</option>
<option value="japan">Japan</option>
</select>
<label for="gender">Gender:</label>
<select class="u-full-width" id="gender">
<option value="">-- Select --</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<label>Number of names to generate</label>
<input type="number" id="quantity" class="u-full-width" min="5" max="15" value="5">
<input class="button-primary u-full-width" type="submit" value="Generate">
</div>
<div class="six-columns">
<div id="result"></div>
</div>
</div>
</form>
</div>
</div>