I have here selectbox with option value USA and OTHERS. What I need is if I choose OTHERS on Selectbox1 the Selectbox2 should be display none and textbox1 comes out. Other problem also is it's name field, If I POST the value of name="cboState" . How to remove the name of a field? Any help will appreciate.
<form action="try.php" method="POST">
<select id="cboCountry">
<option value="USA">USA</option>
<option value="OTHERS">OTHERS</option>
</select>
Selectbox 2
<select id="cboState" name="cboState">
<option value="Alabama">Alabama</option>
</select>
Textbox 1
<input type="text" id="cboState" name="cboState"/>
<input type="submit">
</form>
Try this
HTML
<select id="cboCountry">
<option value="USA">USA</option>
<option value="OTHERS">OTHERS</option>
</select>
<select id="cboState" name="cboState">
<option value="Alabama">Alabama</option>
</select>
<input type="text" id="txtcboState" name="cboState" style="display:none;"/>
JS
$("#cboCountry").change(function() {
if ( $(this).val() == "OTHERS") {
$("#cboState").hide();
$("#txtcboState").show();
}
else{
$("#cboState").show();
$("#txtcboState").hide();
}
});
Note: ID Must be unique for each element.
To remove The name attribute of input, you can use the following
$("#txtcboState").removeAttr('name');
DEMO HERE
Something like this?
$("#selectbox1").onchange(function() { selectionChanged();});
function selectionChanged() {
if ( $("#selectbox1").val() == "other") {
$("#selectbox2").hide();
$("#textBox1").show();//should already be hidden
}
}
Make sure the IDs for your elements are unique.
Related
I am doing to change 2nd select tag name by javascript.
this is my HTML
1st select
<select name="bank" id="bank" class="select" onchange="myFunction(event)">
<option value="Bank Account" a="required">Bank Account</option>
<option value="UPI" a="hidden">UPI</option>
</select>
2nd Select
<select name="bank1" class="select" id="bank1" required>
<option disabled selected>Choose Bank Name</option>
<option value="SBI">SBI</option>
<option value="PNB" >PNB</option>
</select>
this is my javascript
function myFunction(e) {
document.getElementById("bank1").name = e.target.a
but i want to change in 2nd select required to hidden
probably you are looking for setAttribute.
document.getElementById("bank1").required = false;
And for style mutation. As #Kokodoko had already written.
document.getElementById("bank1").classList.add("hidden")
Do you want to hide the second select box completely?
function myFunction(e) {
document.getElementById("bank1").classList.add("hidden")
}
CSS
#bank1.hidden {
display:none;
}
I have a select and input tags. I am updating a value of a text input based from what is selected in the select tag.
Select Tag
<select class="form-control form-field-username form-field-users">
<option class="form-field-first-option" value="0" selected="selected">Select User...</option>
<option value="1">Peter Fel</option>
<option value="2">Mark Getty</option>
</select>
Input Tag
<input name="user_id" id="user_id" class="form-control form-field-user-id" type="number">
Code for onchange select:
$('.form-field-username').change( function() {
$(this).find(":selected").each(function () {
var userId = $(this).val();
$('.form-field-user-id').val(userId);
});
});
I want to set the value of text input with user id of "user_id" to null or undefined if the onchange chooses the first value or user_id == 0.
Do you know how to modify the code? Any help is appreciated. Thanks
Check the value within the handler using a ternary operator. The each() method is completely unnecessary here since there is only single selected option.
$('.form-field-username').change(function() {
$('.form-field-user-id').val(this.value == 0 ? '' : this.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control form-field-username form-field-users">
<option class="form-field-first-option" value="0" selected="selected">Select User...</option>
<option value="1">Peter Fel</option>
<option value="2">Mark Getty</option>
</select>
<input name="user_id" id="user_id" class="form-control form-field-user-id" type="number">
Set empty on first option value.
<select class="form-control form-field-username form-field-users">
<option class="form-field-first-option" value="" selected="selected">Select User...</option>
<option value="1">Peter Fel</option>
<option value="2">Mark Getty</option>
</select>
<span id="s_home_country">
<select name="Home Country" id="home_country">
<option value="Select one" selected="selected">Select one</option>
<option value="h1">Home1</option>
<option value="h2">Home2</option>
<option value="h3">Home3</option>
<option value="h4">Home4</option>
</select>
</span>
and I have another data that i want to incorporate, when Home1 is selected, I want this to show 21-dec into another textbox automatically. and so on..
var Home_country = [
"21-Dec",
"01-Jan",
"01-Jan",
"01-Jan",
];
You could use an object and an event listener.
var home_country = {
"h1":"21-Dec",
"h2":"01-Jan",
"h3":"01-Jan",
"h4":"01-Jan",
};
var selectbox = document.getElementById('home_country');
var textbox = document.getElementById('home_country_date');
selectbox.addEventListener('change', function(e){
textbox.value = home_country[this.value]
})
<span id="s_home_country">
<select name="Home Country" id="home_country">
<option value="Select one" selected="selected">Select one</option>
<option value="h1">Home1</option>
<option value="h2">Home2</option>
<option value="h3">Home3</option>
<option value="h4">Home4</option>
</select>
</span>
<input type="text" id="home_country_date">
Please find below snippet just add another attribute data-attr1 and on change of select list find selected option and get its attribute with name data-attr1 and pass attribute's value to textbox
$("#home_country").on("change",function(){
$(".txtvalue").val($(this).find("option:selected").attr("data-attr1"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="s_home_country">
<select name="Home Country" id="home_country">
<option value="Select one" selected="selected">Select one</option>
<option data-attr1="21-Dec" value="h1">Home1</option>
<option data-attr1="01-Dec" value="h2">Home2</option>
<option data-attr1="02-Dec" value="h3">Home3</option>
<option data-attr1="03-Dec" value="h4">Home4</option>
</select>
</span>
<input type="text" class="txtvalue" />
Add an event listener to your select input which outputs the relevant value from your array when an option is selected:
var el = document.getElementById('home_country');
var textbox = document.getElementById('your_textbox_el');
el.addEventListener('change', function(e){
if (e.target.value == 'h1') {
textbox.value = Home_country[0];
} else if (e.target.value == 'some other condition') {
// do something else
}
}
Unless I'm misunderstanding you, you can just put the values of the Home_country array inside the value properties of the options like so:
<span id="s_home_country">
<select name="Home Country" id="home_country">
<option value="Select one" selected="selected">Select one</option>
<option value="21-Dec">Home1</option>
<option value="01-Jan">Home2</option>
<option value="01-Jan">Home3</option>
<option value="01-Jan">Home4</option>
</select>
</span>
Now, when you do get the value of your select element, it will be the value in the array that you gave.
I have a html form where a select field and input box exist and I am using 2 class for that which is work_phone_class and work_phone_class_input.
I am calling ajax by trigger a save button with a class when select field value is changed or any option selected AND again calling ajax when user complete typing on input box. So that I am using following jQuery code :
$(".work_phone_class").change(function() {
$(".save_phone_class").trigger('click');
});
$(".work_phone_class_input").change(function() {
$(".save_phone_class").trigger('click');
});
Now I want to trigger the save button with the class when select field value is selected AND user completed typing on input box.
Update :
Html form is look like this. I think I have to use $(this) but not sure.
<select class="work_phone_class">
<option value=""></option>
<option value="1"></option>
</select>
<input type="text" class="work_phone_class_input">
<select class="work_phone_class">
<option value=""></option>
<option value="1"></option>
</select>
<input type="text" class="work_phone_class_input">
<select class="work_phone_class">
<option value=""></option>
<option value="1"></option>
</select>
<input type="text" class="work_phone_class_input">
I am no so clear about your requirement.... but i think this will help you
$(".work_phone_class,.work_phone_class_input").change(function() {
$(".work_phone_class_input").each(function(){
if($(this).val() == ""){
//// Validation goes here for input
return false;
}
})
$(".work_phone_class").each(function(){
if($(this).val() == undefined){
//// Validation goes here for input
return false;
}
//// trigger your save button click here
})
});
please let me know if it helps by marking it as an answer
You just have to add a test before send your ajax..
UPDATE
$(".save_phone_class").click(function(){
var allFilled = true;
$(".work_phone_class").each(function(){
if($(this).val()=="")
allFilled =false;
});
$(".work_phone_class_input").each(function(){
if($(this).val()=="")
allFilled =false;
});
if(allFilled)
{
//AJAX
}
});
$(".work_phone_class_save").click(function(){
var allFilled=true;
$(".work_phone_class_input").each(function(){
if($(this).val()=="")
allFilled=false;
});
$(".work_phone_class").each(function(){
if($(this).val()=="")
allFilled=false;
});
if(allFilled)
{
alert("Ajax sent");
}
else
alert("All input are not filled");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="work_phone_class">
<option value=""></option>
<option value="1">1</option>
</select>
<input type="text" class="work_phone_class_input">
<select class="work_phone_class">
<option value=""></option>
<option value="1">1</option>
</select>
<input type="text" class="work_phone_class_input">
<select class="work_phone_class">
<option value=""></option>
<option value="1">1</option>
</select>
<input type="text" class="work_phone_class_input">
<button class="work_phone_class_save">Save</button>
In my registration page, I'm gonna use two drop-down select that one of them should be hidden if its Negative and if its positive new drop-down will open to choose ...
In mysql table I've table as diabetes name with enom
enum('negative', 'insulin', 'drug', 'ndm', 'mody', '')
Here's my code:
<div><label for="diabetes">Diabetes:</label>
<select id="diabetes" name="diabetes">
<option value="negative">Negative</option>
<option value="">Positive</option>
</select>
</div>
<div><label for="diabetestype">Diabetes Type:</label>
<select id="diabetestype" name="diabetestype">
<option value="insulin">Insulin</option>
<option value="drug">Drug</option>
<option value="ndm">NDM</option>
<option value="mody">MODY</option>
</select>
</div>
For example: If Diabetes is negative value is negative as default then Diabetes Type is hidden
and
If Diabetes is positive then Diabetes type will be appeared to choose items.
those values like insulin, drug, mdm, mody should be inserted into this:
value="positive"
How can I make it through java script?
I can't add class or div or span. Is it possible just through JavaScript using ??
Thank you so much
Use jquery, it is comparatively easier.
$(document).ready(function(){
$("#diabetestype").hide();
$("#diabetes").on("change", function(){
var v = $(this).val();
if(v=="positive"){
$("#diabetestype").show();
}else{
$("#diabetestype").hide();
}
});
});
To make this code workable, you need to add value of Positive option also. So instead value="" change it to value="positive".
You can even hide the label also:
$(document).ready(function(){
$("#diabetestype").closest("div").hide();
$("#diabetes").on("change", function(){
var v = $(this).val();
if(v=="positive"){
$("#diabetestype").closest("div").show();
}else{
$("#diabetestype").closest("div").hide();
}
});
});
<div><label for="diabetes">Diabetes:</label>
<select id="diabet" name="diabet" onchange="checkDiabet();">
<option value="negative">Negative</option>
<option value="positive" id="isDiabet">Positive</option>
</select>
</div>
<div id="type" style="display: hidden;">
<label for="diabetestype">Diabetes Type:</label>
<select id="diabetestype" name="diabetestype">
<option value="insulin">Insulin</option>
<option value="drug">Drug</option>
<option value="ndm">NDM</option>
<option value="mody">MODY</option>
</select>
</div>
<script>
function checkDiabet() {
var isDiabet = document.getElementById("isDiabet").selected;
if (isDiabet == true) { document.getElementById("type").removeAttribute("style"); }
else { document.getElementById("type").style.display = "none"; }
}
</script>
First, set the first select to fire the function checkDiabet() by the attribute onchange. Then give the option an id, which needs to be checked, so you can access it easily.
Then, set the second select to display: none This could be done in a CSS header or file, or like in this case inline. (div style=""), also add an id to access it easily. (div id="type")
Now comes the function checkDiabete(). It checks if the select is selected (can be true or false (bool)). Is selected => show (div id="type"), if not, hide this div (and all of it's contents)
(if is already hidden, it then overwrites the (style="display: none;") with (style="display: none;))
That's it! :)
Try this:
function SelectDiabetes() {
var d = document.getElementById("diabetes").value;
var dType = document.getElementById("diabetestypebox");
if(d == "negative")
dType.style.display = "none";
else
dType.style.display = "block";
}
SelectDiabetes();
<div><label for="diabetes">Diabetes:</label>
<select id="diabetes" name="diabetes" onchange="SelectDiabetes(this.value);">
<option value="negative">Negative</option>
<option value="positive">Positive</option>
</select>
</div>
<div id="diabetestypebox"><label for="diabetestype">Diabetes Type:</label>
<select id="diabetestype" name="diabetestype">
<option value="insulin">Insulin</option>
<option value="drug">Drug</option>
<option value="ndm">NDM</option>
<option value="mody">MODY</option>
</select>
</div>
Call a js function onchange of select id diabetes
<div><label for="diabetes">Diabetes:</label>
<select id="diabetes" name="diabetes" onchange="toggleTypes()">
<option value="negative">Negative</option>
<option value="">Positive</option>
</select>
</div>
<div><label for="diabetestype">Diabetes Type:</label>
<select id="diabetestype" style="display:none" name="diabetestype">
<option value="insulin">Insulin</option>
<option value="drug">Drug</option>
<option value="ndm">NDM</option>
<option value="mody">MODY</option>
</select>
</div>
Use the following javascript
function toggleTypes(){
var el=document.getElementById('diabetes');
var medElem=document.getElementById('diabetestype');
if(el.value=='positive') {
medElem.style.display='block';
} else {
medElem.style.display='none';
}
}