I have a form featuring 2 inputs, a dropdown and a text-input. I would like to append an empty array with the values of each, using the dropdown as the Key and the text-input as the value.
Furthermore, I have an unknown number of these key/value : select/input combinations, the example below featuring 2.
<div id="referenceList">
<!-- Pair #1 -->
<label>1) 'Reference value 1'</label>
<select class="form-control form-list input_importData predictionType" id="input_importData_referenceTypeMap-0">
<option value="" disabled="">Select a Reference Type</option>
<option value="Dry Matter">Dry Matter</option>
<option value="Brix">Brix</option>
<option value="Total Acid">Total Acid</option>
<option value="Firmness">Firmness</option>
</select>
<input type="number" class="form-control form-list input_importData" id="input_importData_referenceValue-0">
<!-- Pair #2 -->
<label>2) 'Reference value 2'</label>
<select class="form-control form-list input_importData predictionType" id="input_importData_referenceTypeMap-1">
<option value="" disabled="">Select a Reference Type</option>
<option value="Dry Matter">Dry Matter</option>
<option value="Brix">Brix</option>
<option value="Total Acid">Total Acid</option>
<option value="Firmness">Firmness</option>
</select>
<input type="number" class="form-control form-list input_importData" id="input_importData_referenceValue-1">
</div>
Here is an example of my code attempting to do this:
var referenceArray = {};
$('#referenceList select, #referenceList input').each(function(key, value) {
referenceArray[this.value] = this.value;
});
And here is the result of outputting referenceArray:
{{"Reference value 1":13.644132614135742,"Reference value 2":16.426380157470703}: "{"Reference value 1":13.644132614135742,"Reference value 2":16.426380157470703}", Brix: "Brix", 13.644132614135742: "13.644132614135742", Dry Matter: "Dry Matter", 16.426380157470703: "16.426380157470703", …}
Clearly not functioning properly as the expected result would be
{"Brix":13.64434534, "Dry Matter": 15.343483423}
Not sure if I'm doing this incorrectly by using unique id's for each select/input combination or if they should be titled the same for better iteration?
Thanks!
Try this out. I added a fieldset to your html. And then all you need to do is cycle through every fieldset o whatever and add that to your object. I´ll explain the code in a later edit.
IDK whether this is a more optimal way but it might be easier to comprehend and edit, since every value pair will be separated and extracted accordingly.
$(document).ready(function() {
var referenceArray = {};
$('select, input').on('change', function() { /**I use these to capture an event*/
referenceArray = {}; //Rebuild the object, if you need
let fld, objKey, objValue;
$('fieldset').each(function(key, value) { /*Cycle through every container not every field. then extract the value of the inputs in every container. In this case i am using a fieldset*/
fld = $(this);
objKey = fld.find('select').val(); //Get the key of your property
objValue = fld.find('input').val(); //Get the actual value
referenceArray[objKey] = objValue; //Add the key and value as needed
});
console.log(referenceArray);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="referenceList">
<!-- Pair #1 -->
<fieldset>
<label>1) 'Reference value 1'</label>
<select class="form-control form-list input_importData predictionType" id="input_importData_referenceTypeMap-0">
<option value="" disabled="">Select a Reference Type</option>
<option value="Dry Matter">Dry Matter</option>
<option value="Brix">Brix</option>
<option value="Total Acid">Total Acid</option>
<option value="Firmness">Firmness</option>
</select>
<input type="number" class="form-control form-list input_importData" id="input_importData_referenceValue-0">
</fieldset>
<fieldset>
<!-- Pair #2 -->
<label>2) 'Reference value 2'</label>
<select class="form-control form-list input_importData predictionType" id="input_importData_referenceTypeMap-1">
<option value="" disabled="">Select a Reference Type</option>
<option value="Dry Matter">Dry Matter</option>
<option value="Brix">Brix</option>
<option value="Total Acid">Total Acid</option>
<option value="Firmness">Firmness</option>
</select>
<input type="number" class="form-control form-list input_importData" id="input_importData_referenceValue-1">
</fieldset>
</div>
Related
I’m struggling to show some options when u type a match and others if you don’t. I'm new in coding in general.
I just cant make it work how I want.
test html:
<input class="form-control input-lg email" type="email"
name="useremail[]" required />
<select class="form-control" name="youchoose[]" required>
<option value=""></option>
<optgroup class="groupa" label="Group A">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</optgroup>
<optgroup class="groupb" label="Group B">
<option value="option4">option4</option>
<option value="option4">option5</option>
</optgroup></select>
<br><br>
<hr>
<br>
<input class="form-control input-lg email" type="email"
name="useremail[]" required />
<select class="form-control" name="youchoose[]" required>
<option value=""></option>
<optgroup class="groupa" label="Group A">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</optgroup>
<optgroup class="groupb" label="Group B">
<option value="option4">option4</option>
<option value="option4">option5</option>
</optgroup></select>
the js:
$('.email').on("input", function(){
$("optgroup.groupa").toggle(/hotmail/ig.test(this.value) )
var _this = $(this);
if ( _this.val() == 0 )
$('optgroup.groupa').show();
else {
$('optgroup.groupb').hide();
$('optgroup.' + _this.val()).show();
}
});
How is this working? I'm to noob.
How can I avoid when you input in input1, input2 changes also? I’m going to have lots of inputs since I add them dynamically and you can have 1 row or tons of rows.
How do I keep select hidden until match/or not match is inputted? I don’t want to show options since u can pick them before you input something in the box.
Thanks
How can I avoid when you input in input1, input2 changes also? I’m
going to have lots of inputs since I add them dynamically and you can
have 1 row or tons of rows.
Your code didn't produce this issue, but both of your inputs are identical which is likely related to your question here. Give your second input different attributes to distinguish it from the first.
<input class="input2" type="text" name="input2" required />
How do I keep select hidden until match/or not match is inputted? I
don’t want to show options since u can pick them before you input
something in the box.
The solution below should provide the logic you need. It's a pretty odd use case, but you're describing displaying or toggling a group of options based on matching user input.
jQuery .on() is an event handler. Get the user input by accessing event.target.value inside the handler and conditionally show or hide what you need.
Run the below code and type "Group A" into the input. Then, you'll see the options for group A appear in the select list. When the input no longer matches, those options are hidden again. I've checked the user input against the group label here to illustrate. You can adjust the logic and what elements to target as needed.
<input
class="form-control input-lg email"
type="email"
name="useremail[]"
required
/>
<select class="form-control options" name="youchoose[]" required>
<option value=""></option>
<optgroup hidden class="groupa" label="Group A">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</optgroup>
<optgroup hidden class="groupb" label="Group B">
<option value="option4">option4</option>
<option value="option4">option5</option>
</optgroup>
</select>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"
></script>
<script>
$('.email').on('input', function (event) {
$('optgroup').each(function () {
console.log(event.target.value);
if (this.label === event.target.value) {
console.log('match');
$(this).removeAttr('hidden');
} else {
$(this).attr('hidden', true);
}
});
});
</script>
On click, user can dynamically add combo (select option + input field) into form with (city code and telephone number), need to retrieve in a object with the inputed values for these fields.
//Code that retreive the input values:
var number_el = document.getElementById('phone').getElementsByTagName('input')
var telefoneNumber = [].map.call(number_el, function(input) {
return {
'telefone': input.value
};
});
console.log(telefoneNumber);
<div id="phone">
<p>Telephone</p>
<select name="city_code" id="telephone_1" class="telephoneList">
<option value="1">212</option>
<option value="2">216</option>
<option value="3">215</option>
</select>
<input type="text" name="phone_number" id="phone_input1" value="555-222555"> </br>
<p>Telephone</p>
<select name="city_code" id="telephone_1" class="telephoneList">
<option value="1">212</option>
<option value="2">216</option>
<option value="3">215</option>
</select>
<input type="text" name="phone_number" id="phone_input2" value="555-666555">
</div>
The above code retreive the input telefone:values in object.
I need to loop throw the select options to get its values and add to the object as show below:
Element name can be used as property name for both telefone and city_code.
telephoneList: [
{
"telefone":555-222555,
**"city_code":1**
},
{
"telefone":555-666555,
**"city_code":2**
}
]
You can use the attribute previousElementSibling for getting the previous element which is a select.
This is assuming that the previous element is always the select element.
//Code that retreive the input values:
var number_el = document.getElementById('phone').getElementsByTagName('input')
var telefoneNumber = Array.from(number_el).map(function(input) {
var object = {
'telefone': input.value,
'city_code': input.previousElementSibling.options[input.previousElementSibling.selectedIndex].value
}
return object;
});
console.log(telefoneNumber);
<div id="phone"> <p>Telephone</p> <select name="city_code" id="telephone_1" class="telephoneList"> <option value="1">212</option> <option value="2">216</option> <option value="3">215</option> </select> <input type="text" name="phone_number" id="phone_input1" value="555-222555"> <br> <p>Telephone</p> <select name="city_code" id="telephone_1" class="telephoneList"> <option value="1">212</option> <option value="2">216</option> <option value="3">215</option> </select> <input type="text" name="phone_number" id="phone_input2" value="555-666555"> </div>
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>
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>
This works, does anyone see anything I shouldn't be doing?
My function that is called
function getWeight(){
var weight;
var quantity = document.dhform.quantity.value;
var cardSize = document.dhform.cardSize.value;
weight = quantity * cardSize;
document.rates.weight.value = weight;
}
takes values from these drop down menues
<td><span class="style29">Quantity</span><span class="style1"><br/>
<select id="Quantity" name="quantity" size="1">
<option value="250">250</option>
<option value="500">500</option>
<option value="1000" selected>1000</option>
<option value="1500">1500</option>
<option value="2000">2000</option>
<option value="2500">2500</option>
<option value="3000">3000</option>
<option value="4000">4000</option>
<option value="5000">5000</option>
</select>
</span></td>
<td><p><span class="style1"><span class="style29">Size</span><br/>
<select id="Size" name="Size" size="1" onChange="getWeight()">
<option value="0.00999" selected>8.5 x 3.5</option>
<option value="0.0146">11 x 4</option>
</select>
</span></p></td>
Value needs to be inserted into this text box
<td style="width: 115px; height: 49px;"><span class="style16">Weight</span><br/>
<input type="text" id="weight" name="weight" size="10" maxlength="4"/>
</td>
Yes, it's done with Javascript. Let's say the "choose something" part is a drop-down (an HTML select box). You add an "onchange" event handler to that select box which fires a javascript function (which will automatically get the changed select box element as a parameter). Within that function, you use the value of the select box to determine what you want the value of the other box to be, and you update that other box's value.
Example:
<head>
<script language="JavaScript">
function setToy(dropDown) {
var pet = dropDown.options[dropDown.selectedIndex].value);
var newBox = document.getElementById("toy");
var toyText = "";
switch(pet) {
case "dog": toyText = "bone";
case "cat": toyText = "mouse";
default:toyText = "";
}
newBox.innerHTML = toyText;
}
</script></head>
<body>
<select name="petDropDown" onChange="updateToy(this)">
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select><br />
Preferred Toy: <input id="toy" />
</body>
I'll add that if you do this stuff a lot, you should look into jQuery, which makes this kind of thing much easier.