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>
Related
this is my html,
I have two select if one select contains a value, then the required attribute is deleted,and the third select must be required
<select class="form-control costume-{{$stud}}" name="subject-{{$stud}}[]" id="sub1" disabled="disabled">
<option value="" selected> --------Select-------- </option>
<option value="math,indonesia">Math (Indonesia)</option>
<option value="math,english">Math (English)</option>
</select>
<select class="form-control costume-{{$stud}}" name="subject-{{$stud}}[]" id="sub2" disabled="disabled">
<option value="" selected> --------Select-------- </option>
<option value="science,indonesia">Science (Indonesia)</option>
<option value="science,english">Science (English)</option>
</select>
<select class="form-control select-long costume-{{$stud}}" name="location_id[{{$stud}}]" disabled="disabled">
<option value="" selected> -----Select------</option>
#foreach ($venue as $row)
<option value="{{$row['location_id']}}">{{$row['location_name']}}</option>
#endforeach
</select>
<input type="checkbox" id="enableSelect-{{$stud}}" onclick="getCheck({{$stud}});">
and this is my jquery
function getCheck(id){
var e = document.getElementById("sub1");
var sub1 = e.options[e.selectedIndex].value;
console.log(sub1);
if($('#enableSelect-' +id).is(':checked')) {
$('.costume-' +id).prop("disabled", false);
$('.costume-' +id).prop("required", true);
$('.visibility').show();
}else{
$('.costume-' +id).prop("disabled", true);
$('.costume-' +id).prop("required", false);
$('.visibility').hide();
}
}
Your JS doesn't correspond to the HTML, the selectors don't match up.
I would check form values and set the required like this :-
$('select').on('change', function() {
if($(this).val() != ""){
$('select').prop('required',false);
}
});
This would work with your HTML as by default the select value is ""
You would also need required="true" on the and your default option should be something like this -
<option value="" disabled selected>Select your option</option>
on the select elements by default.
title is what it is.
I have this code with input and it works correctly.
<input type="text" class="form-control" id="command" onkeyup="command = $(this).val(); command_string();"/>
Now I want to do same with select and option value, something like this is:
<select id="cmd-id" class="selectpicker form-control" data-dropup-auto="false" data-size="6" name="cmd-id" onclick="this.select();">
<option value="cmd1">1</option>
<option value="cmd2">2</option></select>
I would like to do this basicly with html, I know it must be possible. I want to get rid of input type'text' and do the same job with selected option value.
onchange works!
<select id="cmd-id" class="selectpicker form-control" data-dropup-auto="false" data-size="6" name="cmd-id" onchange="command = this.value; command_string();">
<option value="cmd1">1</option>
<option value="cmd2">2</option>
</select>
Replace onclick with onchange.
<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 am working on a Formstack form. I need to use Javascript to change the value of a dropdown box to whatever the value being typed into a text field is once a match is made.
<input type="text" id="field35497729" name="field35497729" size="50" value="" class="fsField">
<select id="field35497839" name="field35497839" size="1" class="fsField">
<option value=""> </option>
<option value="CIPSmember">CIPSmember</option>
<option value="TECHCONNEXmember">TECHCONNEXmember</option>
<option value="TCBCpreferred">TCBCpreferred</option>
<option value="TCBCcomp2015">TCBCcomp2015</option>
</select>
So as soon as someone types in CIPSmember into the text field, the dropdown should be selected with the same value. If there is no match, the dropdown has no selection.
I used the following jQuery on jsFiddle, but it is not working on Formstack:
$('#field35497729').keyup( function() {
$("#field35497839").val($('#field35497729').val());
}
);
Here is one Javascript method I am trying on jsFiddle that does not work:
document.getElementByID('field35497729').onkeyup = function() {
document.getElementById('field35497839').value = document.getElementByID('field35497729').value;
};
I checked here, here and maybe 10 other places but I can't get it to work. There are plenty of tutorials on how to get a text field to change when a dropdown selection change, but not nearly as many on the opposite.
misspelled ID in getElementById
missing end bracket on the jQuery version
simplified to use this and $(this)
I am however curious. Perhaps you want an autocomplete instead?
Here are your fixed versions
Plain JS version
window.onload=function() {
document.getElementById('field35497729').onkeyup = function() {
document.getElementById('field35497839').value = this.value;
}
}
<input type="text" id="field35497729" name="field35497729" size="50" value="" class="fsField">
<select id="field35497839" name="field35497839" size="1" class="fsField">
<option value=""> </option>
<option value="CIPSmember">CIPSmember</option>
<option value="TECHCONNEXmember">TECHCONNEXmember</option>
<option value="TCBCpreferred">TCBCpreferred</option>
<option value="TCBCcomp2015">TCBCcomp2015</option>
</select>
jQuery version
$(function() {
$('#field35497729').on("keyup",function() {
$("#field35497839").val($(this).val()); // or (this.value)
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="field35497729" name="field35497729" size="50" value="" class="fsField">
<select id="field35497839" name="field35497839" size="1" class="fsField">
<option value=""> </option>
<option value="CIPSmember">CIPSmember</option>
<option value="TECHCONNEXmember">TECHCONNEXmember</option>
<option value="TCBCpreferred">TCBCpreferred</option>
<option value="TCBCcomp2015">TCBCcomp2015</option>
</select>
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.