Multiple Dynamically-Added Inputs in HTML Form - javascript

I'm trying to add hidden input fields using JavaScript, but I did/have not achieved the desired result.
I want to add hidden fields to a form when a user selects a value from a dropdown list. The number of dropdown lists are not the same in this and other similar pages, there might be more or less than two.
I want to add a number of hidden fields when the user select value from the first dropdown list, and if he selects another value from another dropdown list I want to add additional hidden fields, and to save all the hidden fields' values.
Example:
<select id="s1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
If the user selects "2", I want to add 2 hidden fields:
<select id="s2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
If the user selects "3" in this second list I want to add three additional hidden fields but saving (preserving) the two hidden fields that was already dynamically added using the "s1" earlier.


Honestly, I have no idea what you are asking...but a quick fix could be using proper syntax for HTML.
i.e.
<select id"s2">
Change to
<select id="s2">


jQuery has the very useful change() function. So you might write something like:
$(document).ready(function(){
$("#s1").change(function(){
var field_value = $(this).val();
// then perhaps:
for(i = 0; i < field_value; i++){
}
// or
if(field_value == 2){
// do something
}
});
})
Hope thats of some use. Dukeland has a very good point above as well.

Related

Setting selected value of (Nth) element in a select box array in javascript or jQuery

hope you guys can help, as I have tried and googled a few things, but I just cant get it right.
I have a select box array in a form.
<select name="travel_to[]" id="travel_to[]">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="travel_to[]" id="travel_to[]">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="travel_to[]" id="travel_to[]">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Each box can contain a different selected value from whatever options are populated in the boxes.. (but all the boxes contain the same options as each other) (which makes sense for what I want)
I would like to access the first select box from the "travel_to[]" array and set the selected value to "1" then the second select box in the "travel_to[]" array set the selected option value "2" etc etc.
Any ideas? I can parse the post of this using PHP, but setting a specifc select element from the array... im going around in circles..
Any help would be greatly appreciated!
Cheers in advance :)
EDIT: 18/10/2018 at 10:00
Ok, have decided to do this differently.
Am going to make the ids be unique with an increment, by getting the total number of relevant input fields I have, and adding one more to the count, then keep the name being with the []
I thought I could do it having both name and id the same with the [], but way too much hassle, and doing this way with incremental ids.. should be easier..
Thanks all for those that responded.

How to set the select option can be type by numbers

I want to set my select option received types in numbers. This is my code.
<select style="width:100px;" autofocus>
<option disabled selected value></option>
<option value="6">6</option>
<option value="5">5</option>
<option value="4">4</option>
<option value="3"></option>
<option value="2">2</option>
<option value="1">1</option>
</select>
If I type number 6, The select option should display the 6 without selecting in the option value. Please help me.

Let say you are typing number 6 in a text box which have a id "inputarea".
Now you can get the typed value from that input box as follow;
var inputval = docuemnt.getElementById("inputarea").value;
Now that inputval can be set to the select box via;
document.getElementsByTagName("select")[0].value = inputval;
Note that the [0] means the first select box in the page, if you have multiple such box you have to put the index accordingly
Now let's think you want something like there is no input box and you just want the select box be selected as 6 whenever you press button 6.
Then try this;
window.onload = function(){
{
document.getElementsByTagName("select")[0].focus(); // this will focus your select box
}
Now try pressing the button 6.

Shopify Variant Is Not Selected After JS action

Using funnel builder app for Shopify. Got 1 native shopify select item that's choosing variants, 2 other static input methods that I added (radio buttons and input), and JS that pulls input values from these 2 and sets select to it. The problem is- on the front end, it changes select value, but when I add to cart, it's still adding default option.
The select html looks like this.
<select class="form-control variant_Quantity" onchange="change_product_variant(this);" id="select_61">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
And this is my jQuery
$(".pricelinewrap").each(function(){
$(this).click(function(){
$(this).find("input[type=radio]").prop('checked', 'checked');
var quanval = $(this).find("input[type=radio]").prop('checked', 'checked').val();
$("input[name='quantity']").val(quanval);
$("select#select_62").val(quanval);
});
});
$("input[name='quantity']").change(function(){
var newquanval = $(this).val();
$("select#select_62").val(newquanval);
});
Keep in mind- everything works on the front end. But looks like i'm missing something that the actual variant is not selected. However, select option is shown correctly, when something else is changed.

You have to trigger change event to the select, since the following code:
$("input[name='quantity']").val(quanval);
$("select#select_62").val(quanval);
only changes the value of the select but it doesn't fire the actual change event.
It should become like this:
$("input[name='quantity']").val(quanval).trigger('change');
$("select#select_62").val(quanval).trigger('change');

How to select a particular value from a <select> element?

I have come across <select> (drop down list) in HTML in the learning process. I learnt how to code a <select> drop down list.
How can I perform a particular action (in my case I am performing a mathematical operation) when a value in the <select> is chosen?

You can do this a couple of ways.
I would suggest putting a onchange event attribute and give the element an ID.
eg.
<select id ="example1" onchange="example_function()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
Now that you have done that you can goto your JS and use the follow.
var droplist
var droplist_value
function example_function(){
droplist = document.getElementbyID("example1")
droplist_value = droplist.value
}
You can now use the droplist_value as you want.

How to fire a change event on a HTMLSelectElement if the new value is the same as the old?

I have the following markup:
<select onchange="jsFunction()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
When a user pulls down the combobox and selects the same option that was previously selected (or doesn't change the selection at all), JavaScript doesn't regard it as an onchange event. So, the jsFunction() is not called. But I want the jsFunction() called even in this case. How can I achieve this?

I'd do it like this:
<select onchange="jsFunction()">
<option value="" disabled selected style="display:none;">Label</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
If you want you could have the same label as the first option, which in this case is 1.
Even better: put a label in there for the choices in the box.

You have to add empty option to solve it,
I also can give you one more solution but its up to you that is fine for you or not Because User select default option after selecting other options than jsFunction will be called twice.
<select onChange="jsFunction()" id="selectOpt">
<option value="1" onclick="jsFunction()">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
function jsFunction(){
var myselect = document.getElementById("selectOpt");
alert(myselect.options[myselect.selectedIndex].value);
}

Just set the selectIndex of the associated <select> tag to -1 as the last step of your processing event.
mySelect = document.getElementById("idlist");
mySelect.selectedIndex = -1;
It works every time, removing the highlight and allowing you to select the same (or different) element again .

Try this. Just add an empty option. This will solve your problem.
<select onchange="jsFunction()">
<option></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>​

For this problem, I have finally put a new <i> tag to refresh the select instead. Don't try to trigger an event if the selected option is the same that the one already selected.
If user click on the "refresh" button, I trigger the onchange event of my select with :
const refreshEquipeEl = document.getElementById("refreshEquipe1");
function onClickRefreshEquipe(event){
let event2 = new Event('change');
equipesSelectEl.dispatchEvent(event2);
}
refreshEquipeEl.onclick = onClickRefreshEquipe;
This way, I don't need to try select the same option in my select.

use the "onmouseup" property with each option element. it's verbose, but should work. also, depending on what your function is actually doing, you could arrange things a little differently, assuming the number is important in the handler:
<select>
<option onmouseup="handler()" value="1">1</option> //get selected element in handler
<option onmouseup="handler(2)" value="2">2</option> //explicitly send the value as argument
<option onmouseup="handler(this.value)" value="3">3</option> //same as above, but using the element's value property and allowing for dynamic option value. you could also send "this.innerHTML" or "this.textContent" to the handler, making option value unnecessary
</select>

JavaScript code:
on mousedown event: set selectedIndex property value to -1
on change event: handle event
The only drawback is that when the user clicks on the dropdown list, the currently selected item does not appear selected

It's not firing because the value hasn't "changed". It's the same value. Unfortunately, you can't achieve the desired behaviour using the change event.
You can handle the blur event and do whatever processing you need when the user leaves the select box. That way you can run the code you need even if the user selects the same value.

Categories

Resources