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>
Related
Now I do foreach the select option and do the required but when I foreach it only required the top option, the rest refuse required. How do I requried every option?
blade:
#foreach($student as $index => $students)
<input type="hidden" class="form-control" name="student_id[]" value="{{$students->student_id}}">
<input type="hidden" class="form-control" name="member_id" value="{{CurrentUser::user()->member_id}}">
<select name="status[]" class="form-control" style="width:70%;" id="status" required>
<option disabled selected value="" >
Choose...
</option>
<option name="status[]" value="Present">Present</option>
<option name="status[]" value="Absent">Absent</option>
<option name="status[]" value="Tardy">Tardy</option>
</select><br>
<p style="color:#D30707;font-size:5px;" id="check_status"></p>
#endforeach
js:
function myFunction() {
var status = document.getElementById("status");
if (!status.checkValidity()) {
document.getElementById("check_status").innerHTML = "Please choose status field.";
} else {
document.getElementById("check_status").innerHTML = "";
}
}
When you do foreach in blade you should generate unique ids for each of your input or element you want to select later using JavaScript. Now you have situation that you have generate N number of inputs with id="status" so your JavaScript code will select only first one.
You could instead of unique ids add some dummy class to your element and then select with JS all elements containing that class and loop trough them to check is required satisfied.
try this
<select name="status[]" class="form-control" style="width:70%;" id="status" onchange="myFunction()" multiple required>
<option disabled selected value="" >
Choose...
</option>
<option name="status[]" value="Present">Present</option>
<option name="status[]" value="Absent">Absent</option>
<option name="status[]" value="Tardy">Tardy</option>
</select>
<br>
<p style="color:#D30707;font-size:5px;" id="check_status"></p>
in js
function myFunction() {
var status = document.getElementById("status");
var selectedValues = Array.from(status.selectedOptions).map(option => option.value);
if (!selectedValues.includes('Absent')) { // change here containe value
document.getElementById("check_status").innerHTML = "Please choose status field.";
} else {
document.getElementById("check_status").innerHTML = "";
}
}
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>
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 am trying to Select one of the options from the drop-down and populate the input field with the correct values.
I want to set the value 1 to ($100) val 2 to ($200)
I will not have access to a database to store the values.
<div class="row">
<div class="form-group">
<select class="form-control" id="costfield" name=
"costfield">
<option value="Select Country"> Select Country</option>
<option value="1"> country 1</option>
<option value="2"> country 2</option>
<option value="1"> country 3</option>
</select>
</div>
</div>
<div class="form-group">
<input type="estimate" class="form-control" id="exampleInputEstimate1" placeholder="Estimate">
</div>
</div>
<script>
$( "#costfield" ).val();
$( "#estimate" ).text( "this" ).show();
</script>
</div>
You can store the values in the HTML5 data- attribute for each <option> element. This approach is useful when there is no direct relationship between the option's value attribute and the dollar value you are assigning it to.
p/s: type="estimate" is not a valid attribute value. Try type="text" (anyway, browsers will parse invalid type into text automagically.
// Listen to change
$('#costfield').change(function() {
$('#exampleInputEstimate1').val($(this).find('option:selected').data('dollar-value'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="form-group">
<select class="form-control" id="costfield" name="costfield">
<option value="Select Country">Select Country</option>
<option value="1" data-dollar-value="$100">country 1</option>
<option value="2" data-dollar-value="$200">country 2</option>
<option value="1" data-dollar-value="$100">country 3</option>
</select>
</div>
</div>
<div class="form-group">
<input type="text" class="form-control" id="exampleInputEstimate1" placeholder="Estimate" />
</div>
$('[name="costfield"]').change(function () {
console.log("test");
var cost = this.value;
var str = "";
switch (cost) {
case "1":
str = "$100";
break;
case "2":
str = "$200";
break;
}
$("#exampleInputEstimate1").val(str);
});
JSFiddle
You could use jQuery to get the value from the Select when it changes and then change the value of the input accordingly. So put this in between the script tags.
$('#costfield').on('change', function() {
var value = $(this).val();
$('#exampleInputEstimate1').val(value);
});
You can either set your option values to be 100 or 200 then on any change in the drop down set the value of your input to the value.
$("#costfield").on("change", function(){
$("#exampleInputEstimate1").val($("#costfield").val());
} );
If you want to keep your option values as they are then you can still use the same as above with a small change. (on the assumption that 1 will be 100, 2 will be 200, 3 will be 300, and so on)
$("#costfield").on("change", function(){
$("#exampleInputEstimate1").val($("#costfield").val() + "00" );
} );
Also you may want to put a new option and set it as blank with no value that way you force the user to select something. Or you can set the input on document load and keep the number of options you have. AKA:
<option value="" ></option>