can't update siblings in HTML document - javascript

I have the following HTML
<td>
<select tabindex="1" id="global_location_id" name="global_location_id">
<option value="0">-- NONE --</option>
<option value="15" style="font-weight: bold">canada</option>
<option value="16" style="font-weight: bold">usa</option>
</select>
<input tabindex="1" id="location_id" name="location_id" value="15" type="hidden">
</td>
When the item in the drop down list changes, I want to save the value in a hidden field... that's a sibling to the drop down.
I have the following jquery code:
$("body").live("change", "#global_location_id", function(e){
console.log(e);
var list = e.target;
var selected_location_value = $(list).val();
console.log(selected_location_value);
//save this value in the sibling <input> box called name=location_id
$(this).siblings("#location_id").attr('value',selected_location_value);
});
I must have a syntax error somewhere because this code is not working. Specifically, it's the line that attempts to save to the hidden input field called location_id that is not updating.
I'm sure it's something simple I'm missing.
Thanks.

I found my mistake.
I had to replace
$(this).siblings("#location_id").attr('value',selected_location_value)
with
$(list).siblings("#location_id").attr('value',selected_location_value)

Related

Pass the text from a form Select-Option to a text input field

I would like to pass the text portion (not the value) of a form Select-Option to a hidden text-input field within the same form when the user makes a selection.
I have explored some java and PHP 'examples' I found in my research, but none of them seem to work for me.
I have posted a raw example of the form to see if anyone can lead me to water. Any help wouold be appreciated.
HMTL
<html>
<head>
</head>
<body>
<form action="fruitBasket.php" method="post" enctype="multipart/form-data">
<select id="fruitSelector" name="fruitSelector">
<option value="0" selected="selected" disabled="disabled">Select Fruit</option>
<option value="1">Grapes</option>
<option value="2">Strawberries</option>
<option value="3">Peaches</option>
<option value="4">Blueberries</option>
</select>
<br>
<br>
<input type="text" class="hiddenField" name="hiddenField" placeholder="Selected fruit appears
here.">
</form>
</body>
</html>
It's not as easy as getting the selected option's value, which can be retrieved simply as selectElement.value, yet it's not difficult at all.
selectElement.options will give you an array of ALL the options inside the select element.
You will find the selected option's index to be selectElement.selectedIndex.
With that said, you can access to the selected option like this: selectElement.options[selectElement.selectedIndex].
Finally, you can get the text property like this: selectElement.options[selectElement.selectedIndex].text
Here's the code:
// THIS CONSTANT REPRESENTS THE <select> ELEMENT
const theSelect = document.getElementById('fruitSelector')
// THIS LINE BINDS THE input EVENT TO THE ABOVE select ELEMENT
// IT WILL BE EXECUTED EVERYTIME THE USER SELECTS AN OPTION
theSelect.addEventListener('input', function() {
// THIS IS HOW YOU GET THE SELECTED OPTION'S TEXT
let selectedOptText = theSelect.options[theSelect.selectedIndex].text
// FINALLY, THIS COPIES THE ABOVE TEXT TO THE INPUT ELEMENT:
document.querySelector('.hiddenField').value = selectedOptText;
})
<form action="fruitBasket.php" method="post" enctype="multipart/form-data">
<select id="fruitSelector" name="fruitSelector">
<option value="0" selected="selected" disabled="disabled">Select Fruit</option>
<option value="1">Grapes</option>
<option value="2">Strawberries</option>
<option value="3">Peaches</option>
<option value="4">Blueberries</option>
</select>
<br>
<br>
<input type="text" class="hiddenField" name="hiddenField" placeholder="Selected fruit appears
here.">
</form>
well if you want to pass the text portion you should add the names as the values too like
---
code
---
<option value="Grapes">Grapes</option>
<option value="Strawberries">Strawberries</option>
---
code
---

Can't get the option value into a hidden field

I'm using a select with options and i would like to use a form to submit the text of an option field into a database.
It's not working and I can't figure out why. the p-element changes its value (i only used it for debugging, i actually don't need it) but the hidden field stays empty.
can anybody help me out here?
function GetSelectedText(){
var e = document.getElementById("kunde");
var result = e.options[e.selectedIndex].text;
document.getElementById("title").textContent = result;
}
<select id="kunde" name="kunde" class="form-control" onchange="GetSelectedText()">
<option value="1">text for 1</option>
<option value="2">text for 2</option>
<option value="3">text for 3</option>
</select>
<p id="title">this text will be replaced</p>
<input name="title" type="hidden" id="title" value="">
Since the hidden field is an input field, change textContent to value.
Also, you can't have more than one element with the SAME ID, so get rid of the P element since you don't need it anyway.
This is probably because your p element has the same ID as the input element. HTML specifies that an ID must be unique. Something like this would work:
<p id="title">this text will be replaced</p>
<input name="title" type="hidden" id="titleInput" value="">
And the javascript:
// [...] rest of the function
document.getElementById("title").textContent = result;
document.getElementById("titleInput").value = result;
"textContent" has to be changed to "value".
Thanks for your help!

Multiple textboxes fill the dropdown selection having same class in jquery

I have used the concept of multiple textboxes having same class fill with the multiple dropdown option selection which also having same class.I have facing problems in it.when i click the first dropdown option then it change the second textbox value.I want that if i click on first dropdown option it changes the values of first textbox not other or if click the second dropdown option it will change the value of second textbox.
<form action="" method="post">
<select name="drop[]" id="budget" class="drop">
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
</select>
<input type="text" name="txt" id="txt" class="txt" value="text1"><br>
<select name="drop[]" id="budget1" class="drop">
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
</select>
<input type="text" name="txt" id="txt1" class="txt" value="text2">
</form>
$('input[name="txt"]').each(function () {
$('.drop').on('change', function(){
var total = $(this).val();
$('input[name="txt"]').val($(this).find("option:selected").attr("value"));
});
});
You need to find out the next input element which should be updated when you change a select element. You can use the below code to achieve this.
$('.drop').on('change', function(){
var total = $(this).val();
$(this).next("input:first").val($(this).find("option:selected").attr("value"));
});
Plunker : https://plnkr.co/edit/qFjuFtwhHBvDE9zxAup2?p=preview

How to assign a different name for each radio input group

I'm looking for a solution to dynamically change the name for a group of input radio buttons.
I'm creating a travel itinerary where the user selects "domestic" or "international." That selection will hide/show the appropriate state/country dropdown below. There could be multiple destinations, therefore, I need multiple state/country selectors. The problem I'm running into is that all the inputs have the same name, so only one button will display as "checked" at any given time.
The code snippet will come in via an .ssi, so I can't just hard code the input name. I need a JavaScript/jQuery method of dynamically changing it as more destinations are added. The default is "destination." I'd like it to be "destination1," "destination2," etc. for each radio button group.
Here's a very watered-down version of the HTML (Not looking for a debate on table-based layouts. My team has already hashed that out):
<table>
<tbody>
<tr>
<td colspan="2">
<input type="radio" checked="checked" name="destination" class="js-trigger" data-destination="stateForm"> Domestic
<input type="radio" name="destination" class="js-trigger" data-destination="countryForm"> International
</td>
</tr>
<tr>
<td>Destination:</td>
<td>
<form class="stateForm list">
<select name="State" id="state-selector" autofocus="autofocus" autocorrect="off" autocomplete="off">
<option value="Select State" selected="selected"></option>
<option value="Alabama" data-alternative-spellings="AL">Alabama</option>
<option value="Alaska" data-alternative-spellings="AK">Alaska</option>
<option value="Etc" data-alternative-spellings="Etc">Etc</option>
</select>
</form><!-- End State Form -->
<form class="countryForm list">
<select name="Country" id="country-selector" autofocus="autofocus" autocorrect="off" autocomplete="off">
<option value="Select Country" selected="selected"></option>
<option value="Afghanistan" data-alternative-spellings="AF افغانستان">Afghanistan</option>
<option value="Åland Islands" data-alternative-spellings="AX Aaland Aland" data-relevancy-booster="0.5">Åland Islands</option>
<option value="Etc" data-alternative-spellings="Etc">Etc</option>
</select>
</form><!-- End Country Form -->
</td>
</tr>
</tbody>
</table>
Here's my fiddle: http://jsfiddle.net/Currell/9sr5rkjy/2/
I'm a bit of a JavaScript beginner, so forgive me if my process, terminology, or my code is a bit off.
You could re-name them by adding this:
var counter = 0;
$('table').each(function(){
$(this).find('input[type=radio]').attr('name','destination'+counter);
counter++;
})
jsFiddle example
Update: I just noticed that all your select elements are duplicating name and ID attributes. To fix that you can change the code to:
var counter = 0;
$('table').each(function () {
$(this).find('input[type=radio]').attr('name', 'destination' + counter);
$(this).find('select').eq(0).attr({
'name': 'State' + counter,
'id': 'state-selector' + counter
});
$(this).find('select').eq(1).attr({
'name': 'Country' + counter,
'id': 'country-selector' + counter
});
counter++;
})
jsFiddle example
You need to change them in groups (currently grouped in TDs):
$("td:has(':radio')").each(function(index){
var $radio = $(this).find(':radio');
$radio.attr("name", $radio.attr('name') + index);
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/9sr5rkjy/5/
This will rename each set to name="destination0", name="destination1" etc.
You have duplicated ID fields too, which is invalid HTML, so you need to apply a similar fix to those. jQuery and Javascript can only find the first occurence of an ID as browsers use a fast lookup dictionary (with only one element stored against each ID value).

jQuery Selector: how can I specify one select menu when I have more than one?

I have 4 select menus, all with the same products. (User is supposed to use the select menus to add products to an invoice).
So each section is composed of a select menu, a quantity text field and a price text fields. But I have FOUR of those in the same page.
Whenever I select a product from the select menu, I want to change the quantity and price. But more specifically, I would just like to know, how to find out WHICH select menu was clicked.
if the select menus have a class of product (.product), when I select a product, ALL sections are affected. But I only want to affect that specific select menu section.
$(".product").change(function(event){
alert('product picked'); // testing
});
I can't just append a number, like this: product1, product2, product3. Because then in the javascript file i would have to write 4 different functions
$(".product1").change(function(event){,
$(".product2").change(function(event){, etc.
I know this is very basic, but I need to refresh my jQuery stuff.
This is some of the form HTML. I only included product select menu and quantity text field for simplification.
<div class="item">
<p>
Product:
<select class="product" id="invoice_line_items_attributes_0_item_id" name="invoice[line_items_attributes][0][item_id]"><option value="1" data-defaultquantity="1">WP setup</option>
<option value="2" data-defaultquantity="1">WordPress Theme Design</option>
<option value="3" data-defaultquantity="1">WHE/yr</option>
<option value="4" data-defaultquantity="1">WHE/mo</option></select>
</p>
Qty: <input class="quantity" id="invoice_line_items_attributes_0_quantity" name="invoice[line_items_attributes][0][quantity]" size="30" type="text" value="1"><br>
</div><hr>
<div class="item">
<p>
Product:
<select class="product" id="invoice_line_items_attributes_1_item_id" name="invoice[line_items_attributes][1][item_id]"><option value="1" data-defaultquantity="1">WP setup</option>
<option value="2" data-defaultquantity="1">WordPress Theme Design</option>
<option value="3" data-defaultquantity="1">WHE/yr</option>
<option value="4" data-defaultquantity="1">WHE/mo</option></select>
</p>
Qty: <input class="quantity" id="invoice_line_items_attributes_1_quantity" name="invoice[line_items_attributes][1][quantity]" size="30" type="text" value="1"><br>
</div><hr>
In your event handler, this will be bound to the relevant <select> element.
$(".product").change(function(event){
alert($(this).attr('name')); // name of <select> element changed
});
A handy trick is to use "data" attributes to relate something like that <select> to the other fields. That is, you can do something like store the "id" of the related field in a data attribute so that the handler can find the field to mess with:
<select name='whatever' data-quantity-id="whatever" data-price-id="whatever">
<option ... >
</select>
Then in the handler:
$('.product').change(function(event) {
var $quantity = $('#' + $(this).data('quantityId'));
var $price = $('#' + $(this).data('priceId'));
// ...
});
$(".product").change(function(event){
$(this).closest(".section").find(".quantity").val("somevalue");
$(this).closest(".section").find(".price").val("somevalue");
});

Categories