How to change div content with using other div in jquery? - javascript

I have a problem about changing div content. My form has a selectbox for regions. The options are Philippines and United States. The logic is if the user select the Philippines. The textbox below the selecbox will be automatically replace by other div that has a selectbox also. And if the user select United States or no selection it will just display the textbox below. By default there's a textbox below the selection box. Here's my code.
<label style="font-weight: normal">Country</label>
<select style="width: 250px" name="region_country" id="region_country">
<option value="">--Select Country--</option>
<option value="Philippines">Philippines</option>
<option value="United States">United States</option>
</select>
<label style="font-weight: normal">Region</label><br />
<div id="region_selection_text">
<input type="text" size="50" class="form-control" id="region" name="region" />
</div>
<div id="region_selector_selection">
<select class="form-control">
<option></option>
</select>
</div>
In my jquery I have this.
$("#region_country").on('change',function(){
var region = $("#region_country").val();
if(region == 'Philippines'){
//display selectbox here
} else {
//display textbox here if no selection or if the selection is United States
}
});
My solution is creating a hide and show functions for it. Or are there any way to achieve this? As you have seen there are two divs below the label Region. The first div is for textbox and the second div is for selectbox.

You can use .toggle() like
var $rt = $('#region_selection_text'),
$rs = $('#region_selector_selection');
$("#region_country").on('change', function () {
var isP = this.value == 'Philippines'
$rt.toggle(!isP);
$rs.toggle(isP);
}).change();
Demo: Fiddle

Related

How do I change select to input text while checkbox is checked?

It's my first contact with js so please don't hate me
I have something like this:
function Zmiana(isChecked) {
document.getElementById('test').type = 'text';
}
<div class="dropdown">
<select id="test" name="producent" class="dropdown-select">
<option value="Apple">Apple</option>
<option value="Samsung">Samsung</option>
<option value="Lenovo">Lenovo</option>
</select> <br>
</div>
But it doesn't work
You won't be changing the select into a textbox. Instead, you'll have both a select and a textbox. The checkbox will simply determine which is shown.
Also, your select should include a first choice that is not considered valid so that you don't get a submitted value that the user didn't choose.
.hidden { display:none; }
<input type="checkbox" id="check">Check to enter text directly
<div class="dropdown">
<select id="test" name="producent" class="dropdown-select">
<option value="">--- Choose ---</option>
<option value="Apple">Apple</option>
<option value="Samsung">Samsung</option>
<option value="Lenovo">Lenovo</option>
</select>
<input id="data" class="hidden">
</div>
<script>
let text = document.getElementById('data');
let check = document.getElementById("check");
let select = document.getElementById("test");
// You must set up your function to handle the
// click event of the checkbox
check.addEventListener("click", Zmiana);
function Zmiana(){
// Add or remvoe the hidden class based on
// whether it's already in use
select.classList.toggle("hidden");
text.classList.toggle("hidden");
}
</script>

How to hide an input based on dropdown

I have a login form where users can choose their country from a drop-down, and I would like to show the 'If other specify' option only when the user selects 'other' from the dropdown.
I have found many other answers to this question, but they are using jQuery, and I would like to use pure JavaScript.
Here is my HTML code.
<form>
Username/Name:<br><input type="text"><br>
Country:<br>
<select id="country" name="country">
<option value="us">United States </option>
<option value="uk">United Kingdom </option>
<option value="ca">Canada </option>
<option value="othr">Other </option>
</select><br>
If other specify:<br><input type="text"><br>
Password:<br><input type="text"><br>
<input type="submit" value="Log In">
</form>
Thanks!
Fix the typo of othr to other.
Wrap the stuff you want to show/hide in an element with ID of "other-container", then
function handleCountryChange(event) {
var display = event.target.value == 'other' ? 'inline' : 'none';
otherContainer.style.display = display;
}
var otherContainer = document.getElementById('other-container');
var countrySelect = document.getElementById('country');
countrySelect.addEventListener('change', handleCountryChange)

Multiple textboxes fill the dropdown selection having same class in jquery

I have used the concept of multiple textboxes having same class fill with the multiple dropdown option selection which also having same class.I have facing problems in it.when i click the first dropdown option then it change the second textbox value.I want that if i click on first dropdown option it changes the values of first textbox not other or if click the second dropdown option it will change the value of second textbox.
<form action="" method="post">
<select name="drop[]" id="budget" class="drop">
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
</select>
<input type="text" name="txt" id="txt" class="txt" value="text1"><br>
<select name="drop[]" id="budget1" class="drop">
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
</select>
<input type="text" name="txt" id="txt1" class="txt" value="text2">
</form>
$('input[name="txt"]').each(function () {
$('.drop').on('change', function(){
var total = $(this).val();
$('input[name="txt"]').val($(this).find("option:selected").attr("value"));
});
});
You need to find out the next input element which should be updated when you change a select element. You can use the below code to achieve this.
$('.drop').on('change', function(){
var total = $(this).val();
$(this).next("input:first").val($(this).find("option:selected").attr("value"));
});
Plunker : https://plnkr.co/edit/qFjuFtwhHBvDE9zxAup2?p=preview

How can a visitor add options to a menu through text fields?

I have the following drop down menu.
<select id="MySelectMenu">
<option value="#">-*-*- Main Accounts -*-*-</option>
<option value="http://www.google.com">Google</option>
<option value="http://www.yahoo.com">Yahoo</option>
<option value="http://www.example.com">Example</option>
</select>
Is it possible for me to add two text input fields where the visitor can populate the menu options themselves?
For example, in text field one they input the url for the option, and text field two, they input the name of the option.
So...
Text field one: http://www.randomwebsite.com
Text field two: Random Website
Then an 'Add' button, which would result in this...
<select id="MySelectMenu">
<option value="#">-*-*- Main Accounts -*-*-</option>
<option value="http://www.google.com">Google</option>
<option value="http://www.yahoo.com">Yahoo</option>
<option value="http://www.example.com">Example</option>
<option value="http://www.randomwebsite.com">Random Website</option>
</select>
This is the javascript for the current menu, if this helps.
<script type="text/javascript">
function newSrc() {
var e = document.getElementById("MySelectMenu");
var newSrc = e.options[e.selectedIndex].value;
document.getElementById("MyFrame").src=newSrc;
}
</script>
Thanks in advance.
Yes Create two textboxes and Add id's to them and also create a button with a onclick function "Add", Then use the following javascript which is nothing but creating the option and appending to selectbox
function Add()
{
var x = document.getElementById("MySelectMenu");
var opt = document.createElement("option");
opt.value= document.getElementById("url").value;
opt.innerHTML = document.getElementById("name").value; // whatever property it has
x.add(opt);
}
<select id="MySelectMenu">
<option value="#">-*-*- Main Accounts -*-*-</option>
<option value="http://www.google.com">Google</option>
<option value="http://www.yahoo.com">Yahoo</option>
<option value="http://www.example.com">Example</option>
</select>
<input type="text" name="name" id="name">
<input type="url" name="url" id="url">
<button onclick="Add()">ADD</button>
Try below code
var url=$("#txtUrl").val();
var textValue = $("#txtDisplay").val();
$('#MySelectMenu').append("<option value='"+url+"'>"+textValue+"</option>);
use this code on OnClick event of Add button.

How do I select a specific option value from a drop down list to show a hidden div?

I have a drop down list that has 4 options, so what I want is when I click on the value "from" it shows a hidden div (used CSS to hide this div "display: none;"). anyone can help me with that? THANKS!
Html:
<select id="type">
<option value="">--select--</option>
<option value="category">Category</option>
<option value="brand_name">Brand</option>
<option value="campaign_name">Campaign</option>
<option value="from">Recap date</option>
</select>
</label>
<div id="showfrom">
<input type="text" class="filter" value="02-16-2012" id="from">
</div>
Js:
$("#type").change(function() {
var selected = $(this).find(':selected').val();
if (selected == from) {
$("#showfrom").show();
}
});
from should be a string literal. Also you need to hide if something else is selected so better if you can use .toggle()
$("#type").change(function () {
$("#showfrom").toggle(this.value == 'from');
}).change();//to set the initial state
Demo: Fiddle

Categories