I have a form in the CMS which has only one input (text type) and I cannot add additional fields to it (I don't have access to the DB), so what I want is to create select options near the field and add selected options values to the input field.
Let say I have this code:
<input type="text" placeholder="Your name" />
<select id="yourAge">
<option disabled>your age</option>
<option value="18">18</option>
<option value="19">19</option>
</select>
<select id="yourHeight">
<option disabled>height</option>
<option value="180 cm">180 cm</option>
<option value="190 cm">190 cm</option>
</select>
And this is how it must display after submition. The form submits the posts and works fine. This select tags should not touch any DB part or anything else. It only needs to get the values, insert to that inout text field and then show it.
And is it possible to show the values in special order like this?:
Name: Bla Bla
Age: 18
Height: 180 cm
Or at least like this:
Bla Bla, age 18 years old, height 180 cm
How can I do this using JavaScript or jQuery?
By the way my APP works based on nodeJS and MongoDB.
Thanks in advance.
Are you trying to get all of the fields to get added to the name field? It would be a good idea to create another input for the name and give it a unique identifier to distinguish it from the other input where you will be adding all of the information to.
I would create a function that handles transfering the values from your input and select fields to the input field provided. I would call this function on submit, adding the values to the provided input before the form submission.
Here it is on Codepen:
https://codepen.io/MattStillwater/pen/pogVeRp
This is the setField() function that I created for adding the values to the provided field:
function setField() {
var nameVal = jQuery('#yourName').val() +', ';
var ageSelectVal = jQuery('#yourAge').val() +', ';
var heightSelectVal = jQuery('#yourHeight').val();
var inputField = jQuery('input[type=text]').not(document.getElementById('yourName'));
inputField.val(nameVal + ageSelectVal + heightSelectVal);
}
This is the HTML that I am using:
<div class="section" id="yourField">
<input type="text" placeholder="Your name" id="yourName" />
<select id="yourAge">
<option>your age</option>
<option value="18">18</option>
<option value="19">19</option>
</select>
<select id="yourHeight">
<option>height</option>
<option value="180 cm">180 cm</option>
<option value="190 cm">190 cm</option>
</select>
</div>
<form action="#" class="section" id="formFields">
<input type="text" /> <!-- The endpoint -->
<input type="submit" value="Submit" />
</form>
The function is being called on submit event:
jQuery('input[type=submit]').submit(function() {
setField();
});
Welcome to SO, this is not a writing service website, so please next time do your own research first and ask when you get stuck. Combination of this things I wrote is all over this website with examples.
You could have searched for exactly what you need:
-How to get values of HTML elements.
-How to add values to elements.
-How to do this on some event.
var input = document.getElementById("in");
var sel1 = document.getElementById("yourAge");
var sel2 = document.getElementById("yourHeight");
sel1.onclick = function(){
sel1 = document.getElementById("yourAge");
var selected = sel1.options[sel1.selectedIndex].value;
input = document.getElementById("in");
input.value="Name: "+input.value+", Age: "+selected;
};
sel2.onclick = function(){
sel2 = document.getElementById("yourHeight");
var selected = sel2.options[sel2.selectedIndex].value;
input = document.getElementById("in");
input.value=input.value+", Height: "+selected;
};
<input type="text" id="in" placeholder="Your name" size="35"/>
<select id="yourAge">
<option disabled>your age</option>
<option value="18">18</option>
<option value="19">19</option>
</select>
<select id="yourHeight">
<option disabled>height</option>
<option value="180 cm">180 cm</option>
<option value="190 cm">190 cm</option>
</select>
I am trying to send a value to an based on a selection from a dropdown list such as . I want to fetch the value of possiblePhone.id and send it to .
<script>
function copyTextValue() {
var text1 = document.getElementById("source").value;
document.getElementById("destination").value = text1;
}
</script>
<div>
<select th:field="${possiblePhones}">
<option value="0">select phone</option>
<option id="source" onselect="copyTextValue()"
th:each="possiblePhone : ${possiblePhones}"
th:value="${possiblePhone.id}"
th:text="${possiblePhone.model}"></option>
</select>
</div>
<td><input type="text" id="destination"> </td>
For example, if "Samsung" is selected then "1" should be send to the input field and so on. Actually, i do not get any output.
<select id="source" onchange="copyTextValue()">
<option value="0">select phone</option>
<option value="1">samsung</option>
<option value="2">something</option>
</select>
The id="source" attribute should be in <select> element, also change onselect to onchange and move it to <select> element too.
Codepen: https://codepen.io/anon/pen/WVxLpz
You can achieve this by setting the listener to the select element and then query the selected option value.
I made a minimal example with two brands:
<script>
function copyTextValue() {
var e = document.getElementById("select");
var val = e.options[e.selectedIndex].value;
document.getElementById("destination").value = val;
}
</script>
<div>
<select onchange="copyTextValue()" id="select">
<option value="0">select phone</option>
<option value="1">Brand 1</option>
<option value="2">Brand 2</option>
</select>
</div>
<td><input type="text" id="destination"> </td>
one of the simple thing you have to observe here is that you have to capture the event when the dropdown is selected, and pass the current dropdown reference to your method.
<script>
function copyTextValue(selectedOption) {
if(selectedOption.selectedIndex <= 0){
document.getElementById("destination").value = '';
return;
}
var selectedOptionValue = selectedOption.value;
document.getElementById("destination").value = selectedOptionValue;
}
</script>
<div>
<select onChange="copyTextValue(this);">
<option value="0">select phone</option>
<option value="1">select first phone</option>
<option value="2">select second phone</option>
<option value="3">select third phone</option>
<option value="4">select fourth phone</option>
</select>
</div>
<td><input type="text" id="destination"> </td>
here you are also trying to avoid to pass any value to the textbox when the first element is selected. #kryptur's answer is also correct, but this is simpler.
You're using Thymeleaf. For these you to create a form to send you data to the server.
Follow this link for documentation for your exact problems.
https://www.thymeleaf.org/doc/tutorials/2.1/thymeleafspring.html#creating-a-form
As Frameworks like Thymeleaf usually store state on the server which means you update server first - and then your UI gets updated.
what value return is the value of the select field what you need to do is get the text of selected option i.e
function copyTextValue() {
var selectNode = document.getElementById("source");
enter code here
document.getElementById("destination").value =
selectNode .options[selectNode .selectedIndex].textContent;
}
I have a input type text with datalist that contains duplicate option values
<input type="text" id="my-input" list="data-list">
<datalist id="data-list">
<option value="John" data-id="1"></option>
<option value="George" data-id="2"></option>
<option value="John" data-id="3"></option>
</datalist>
What options i have to get the data-id when i select option. For example if i select the the second John to get 3 as id. I just found this:
$("#data-list option[value='" + $('#my-input').val() + "']").attr('data-id');
but if i chose the second john it returns 1 as id, whitch is incorrect.
You can add an index to duplicate option in datalist. So you should loop through options and in loop select any option in datalist has same value and add index to value attribute of it.
$("datalist option").each(function(){
var sameOpt = $(this).parent().find("[value='"+this.value+"']:gt(0)");
sameOpt.val(function(i, val){
return val+'-'+(sameOpt.index(this)+2);
});
});
$("datalist option").each(function(){
var sameOpt = $(this).parent().find("[value='"+this.value+"']:gt(0)");
sameOpt.val(function(i, val){
return val+'-'+(sameOpt.index(this)+2);
});
});
$("#my-input").change(function(){
var v = $("#data-list option[value='"+this.value+"']").attr('data-id');
console.log(v);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="my-input" list="data-list">
<datalist id="data-list">
<option value="John" data-id="1"></option>
<option value="George" data-id="2"></option>
<option value="John" data-id="3"></option>
<option value="George" data-id="4"></option>
<option value="John" data-id="5"></option>
</datalist>
I think that is just the wrong element for your case. If you want the user to pick an item, you should try a select element. There are lots of solutions for that available.
With that said, you could use the label attribute for the names, and have unambiguous values in value:
<option label="John" value="1"></option>
<option label="George" value="2"></option>
<option label="John" value="3"></option>
That would present all the options for the user, but the actual value they would see after selecting a John would be either 1 or 3, and not John.
I am building a fairly complex form-- I need to copy some data between one and another and I am using jQuery to do this. The only road block I am running into is setting the state.
I have two drop downs, one us using the full state name as the value and the other is using the state abbreviation as the value. The names are the same-
so on form 1 it looks like
<option value="Illinois">Illinois</option>
and form 2 it looks like
<option value="IL">Illinois</option>
Each form has its own unique css selector. How can I set the selected value of form 2 to match what is in form 1 using jQuery?
I do not have any control over the forms, just need to manipulate the input. Have tried using a name selector in jQuery, but I'm not having any luck.
Thank you.
You can do something like this
<select id="fullName">
<option value="Maryland" data-abbr="MD">Maryland</option>
<option value="Illinois" data-abbr="IL">Illinois</option>
<option value="Delaware" data-abbr="DE">Delaware</option>
</select>
<select id="abbr">
<option value="MD">Maryland</option>
<option value="IL">Illinois</option>
<option value="DE">Delaware</option>
</select>
And your jQuery
$('body').on('change', '#fullName', function(){
var abbr = $(this).find('option:selected').data('abbr');
$('#abbr').val(abbr);
});
Try this
<form id="form1" name="form1">
<select name="states" onchange="changeselect(this)">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
</form>
<form id="form2" name="form2">
<select name="states">
<option value="opt1">option1</option>
<option value="opt2">option2</option>
<option value="opt3">option3</option>
<option value="opt4">option4</option>
<option value="opt5">option5</option>
</select>
</form>
function changeselect(elem)
{
var value1 = $(elem).val();
$('#form2 select option').removeAttr('selected');
$('#form2').find('select option').each(function(){
var value2 = $(this).html();
if(value1 == value2)
{
var selected = $(this).attr('value');
$('#form2 select').val(selected);
}
});
}
If you create 2 arrays which exactly correspond with one another:
var StateNames = ['Alabama','Alaska','Arizona','Arkansas','California','Colorado','Connecticut','Delaware','Florida','Georgia','Hawaii','Idaho','Illinois','Indiana','Iowa','Kansas','Kentucky','Louisiana','Maine','Maryland','Massachusetts','Michigan','Minnesota','Mississippi','Missouri','Montana','Nebraska','Nevada','New Hampshire','New Jersey','New Mexico','New York','North Carolina','North Dakota','Ohio','Oklahoma','Oregon','Pennsylvania','Rhode Island','South Carolina','South Dakota','Tennessee','Texas','Utah','Vermont','Virginia','Washington','West Virginia','Wisconsin','Wyoming'];
var StateAbbreviations = ['AL','AK','AZ','AR','CA','CO','CT','DE','FL','GA','HI','ID','IL','IN','IA','KS','KY','LA','ME','MD','MA','MI','MN','MS','MO','MT','NE','NV','NH','NJ','NM','NY','NC','ND','OH','OK','OR','PA','RI','SC','SD','TN','TX','UT','VT','VA','WA','WV','WI','WY'];
You can:
get the value from the first option list;
find that value's index in the first array; (hint: use indexOf)
use the same index to find out what the corresponding abbreviation is in the second array;
use the returned abbreviation to locate the correct option in the second option list
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>