I have select box and two (2) textboxes.
I want the value of select box that displays on the first textbox and whatever the value of the first textbox it display also in the second box.
select box = first textbox
first textbox = second textbox
Buy the way my first textbox is readonly so there is no way to trigger the input, keyup, keydown event. I want my two (2) textbox the same value every time.
I have the html code.
<select id="selectbox">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input id="first-textbox" type="text" readonly>
<input id="second-textbox type="text">
I want the value of select box that displays on the first textbox and
whatever the value of the first textbox it display also in the second
box.
select box = first textbox first textbox = second textbox
Try utilizing selector $("#selectbox, :text:not([readonly])") ; input , change event ; .val() to set both input type="text" values
$("#selectbox, :text:not([readonly])").on("input change", function(e) {
$(":text").val(this.value)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<select id="selectbox">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input id="first-textbox" type="text" readonly>
<input id="second-textbox type="text">
First change:
<input id="second-textbox type="text">
To:
<input id="second-textbox" type="text">
Then use the following to accomplish your goal:
$('#selectbox, #second-textbox').on('change input', function() {
var sel = $(this).is('#selectbox') ? '#first-textbox' : '#first-textbox,#second-textbox';
$( sel ).val( this.value );
})
.filter('#selectbox').change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selectbox">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input id="first-textbox" type="text" readonly>
<input id="second-textbox" type="text">
Solution 1 (best fits my eyes)
HTML
<select id="selectbox">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
JavaScript
$('#selectbox').on('change', function() {
$("#first-textbox").val($(this).val());
$("#second-textbox").val($(this).val());
});
fiddle here
Solution 2 (Best fits the question):
$('#selectbox').on('change', function() {
$("#first-textbox").val($(this).val()).trigger('keyup');
});
$('#first-textbox').on('keyup', function() {
$("#second-textbox").val($(this).val());
});
fiddle here
You can set the text on change:
$(function() {
var tbs = $('input[id$=-textbox]'); //cache all
$('#selectbox').on('change', function(e) {
tbs.val(this.value); //set text box value
}).trigger('change'); // force value on page load
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="selectbox">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input id="first-textbox" type="text" readonly='' />
<input id="second-textbox" type="text" />
I built upon #Rafael Topasi's solution posted in the comment above in his jsFiddle. All I did was add the functionality that you outlined in your question, which was to disable the first text input field and make it so that second input field is equal to the first input field when the select option changes.
jsFiddle Example
//StackOverflow Solution: http://stackoverflow.com/questions/32238975/two-textbox-same-value-in-jquery
//Disable Input: http://stackoverflow.com/questions/1414365/disable-enable-an-input-with-jquery
//Source: http://jsfiddle.net/nafnR/727/ by Rafael Topasi
//08-26-2015
$(document).ready(function() {
$("input#first-textbox").prop('disabled', true);
//$("input").prop('disabled', false);
$("#selectbox option").filter(function() {
return $(this).val() == $("#first-textbox").val();
}).attr('selected', true);
$("#selectbox").on("propertychange change", function() {
$("#first-textbox").val($(this).find("option:selected").attr("value"));
$("#second-textbox").val($(this).find("option:selected").attr("value"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<select id="selectbox" name="name">
<option value="">Please select...</option>
<option value="Elvis">Elvis</option>
<option value="Frank">Frank</option>
<option value="Jim">Jim</option>
</select>
<input type="text" id="first-textbox" name="firstname" value="Elvis" oninput="document.getElementById('second-textbox').value=this.value">
<input id="second-textbox" type="text" name="firstname" value="">
Related
I am trying to show a checked checkbox if a value is selected on a select input. So if someone is choosing any value in the dropdown I want the checkbox to switch from off to on. Here is the html example.
I tried different things to achieve that but it is not working at all. My latest try looks like this:
$(document).ready(function() {
$('#subject').each(function() {
if (this.selected)
$("#box-4").prop("checked", true);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select type="number" id="subject" name="subject">
<option value="none" selected disabled hidden>none</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<input type="checkbox" id="box" disabled="disabled">
I think that I am on the right track here but don´t understand why this isn´t working at all.
$(document).ready(function() {
$('#subject').click(function() {
var option = document.getElementById('subject');
console.log(option.value);
if (option.value ==1 ||option.value==2)
$("#box").prop("checked", true);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select type="number" id="subject" name="subject">
<option value="none" selected disabled hidden>none</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<input type="checkbox" id="box" >
It should be .change()
Don't check whether it is selected or not
$(document).ready(function() {
// Change event
$('#subject').change(function() {
// On change, at first reseting all checkboxes state
$('input[type="checkbox"]').each(function() {
$(this).prop('checked', false);
});
// After reseting checkboxes state, check the appropriate checkbox
$("#box-" + this.value).prop("checked", true);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select type="number" id="subject" name="subject">
<option value="none" selected disabled hidden>none</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<input type="checkbox" id="box-1" disabled>
<input type="checkbox" id="box-2" disabled>
I'm using the following code to pass a value from a select option to a given input field.
$(".itemconditionmenu").change(function() {
var conditionofitem = $(this).val();
$("#meta_itemcondition").val(conditionofitem);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<select id="itemcondition" class="itemconditionmenu">
<option value="">Choose Condition</option>
<option value="New">New</option>
<option value="Used">Used</option>
</select>
<input id="meta_itemcondition" type="text" value="New">
But how can I pass the value of the input field back to the select option value using jQuery?
I am not sure what you are exactly looking, however, as per my understanding I have modifed your code samples.. You can check below snippet.
$( document ).ready(function() {
var conditionofitem = $("#meta_itemcondition").val();
$(".itemconditionmenu").val(conditionofitem);
});
$(".itemconditionmenu").change(function() {
var conditionofitem = $(this).val();
if(conditionofitem == '') {
$("#meta_itemcondition").val('Choose Condition');
} else {
$("#meta_itemcondition").val(conditionofitem);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<select id="itemcondition" class="itemconditionmenu">
<option value="">Choose Condition</option>
<option value="New">New</option>
<option value="Used">Used</option>
</select>
<input id="meta_itemcondition" type="text" value="New">
Please check and let me know if you have any further queries.
Try this
$("#addOption").click(function(){
$("#itemconditionmenu").append('<option value="'+$("#meta_itemcondition").val()+'" selected="selected">'+$("#meta_itemcondition").val()+'</option>');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="itemconditionmenu">
<option value="1">1</option>
<option value="2">2</option>
</select>
<input id="meta_itemcondition" type="text" value=""></input>
<button id="addOption">ADD</button>
Example for the same: Blur out your input and value option will be added to select dropdown
$(".itemconditionmenu").change(function() {
var conditionofitem = $(this).val();
$("#meta_itemcondition").val(conditionofitem);
});
$("#meta_itemcondition").blur(function() {
var inputValue = $(this).val();
var o = new Option(inputValue, inputValue);
$(o).html(inputValue);
$("#itemcondition").append(o);
$("#itemcondition").val(inputValue);
});
$( document ).ready(function() {
var value = $("#meta_itemcondition").val();
console.log(value)
var alreadyOption = false;
$("#itemcondition option").each(function()
{
alreadyOption = $(this).val() === value;
if(alreadyOption) {
$("#itemcondition").val(value);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<select id="itemcondition" class="itemconditionmenu">
<option value="">Choose Condition</option>
<option value="New">New</option>
<option value="Used">Used</option>
</select>
<input id="meta_itemcondition" type="text" value="New"/>
Here you can find inline functionality
if you enter a value in textbox value append in drop-down
if you select drop-down value auto set in textbox.
Note: add value in textbox change just input focus
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="jsSelect" onchange="$('.jsTextBox').val($(this).val())">
<option value="1">1</option>
<option value="2">2</option>
</select>
<input class="jsTextBox" onchange="if($(this).val()!=''){$('.jsSelect').append($('<option></option>').attr('value',$(this).val()).text($(this).val()));$('.jsSelect').val($(this).val());}" type="text" value="">
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>
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 need to reset the value of a dropdown list with a radio button. So when a certain radio button is selected, it will reset a specific dropdown list to the default selected="selected" option.
How can this be done with js and css?
This should reset your dropdown to the first option.
Here's the markup
<select id=foo>
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input onclick="resetFoo();" type="radio" name="bar" value="bar">
Here's the jQuery.
function doSomething {
$("#foo option:first").attr("selected", true);
}
Say that this is the code for your first element
<select id=foo>
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
your radio button should be something like this:
<input onclick="document.getElementById('foo').value = '';" type="radio" name="bar" value="bar">
The value under the onclick event needs to be replaced with the default value for your dropdown.
document.getElementById('select').selectedIndex = 0;
<input type="radio" onchange="doSomething()" />