So I have a form that submits device,color and the problem(with the device) and it displays the correct price underneath nicely using jQuery but I can't figure out how to insert the jQuery result into the hidden input value so that it also sends the price to next page(checkout page) Thanks :)
<form method="POST" action="../action.php">
<select class="custom-select mr-sm-2" name="device" id="inlineFormCustomSelect">
<option value="Motorola Edge">Moto Edge</option>
<option value="Motorola Edge Plus">Moto Edge Plus</option>
</select>
<select class="custom-select mr-sm-2" name="color" id="inlineFormCustomSelect">
<option selected>Select Color..</option>
<option value="Solar Black">Solar Black</option>
<option value="Midnight Magneta">Midnight Magneta</option>
</select>
<select class="custom-select mr-sm-2" name="issue" id="inlineFormCustomSelect3">
<option data-price="£0.00" data-total="" selected>Select Problem..</option>
<option data-price="£40.00" data-total="£42.00" value="Screen Repair">Damaged Screen</option>
<option data-price="£15.00" data-total="£15.75" value="Battery Replacement">Battery Replacement</option>
<option data-price="£35.00" data-total="£36.75" value="Audio Repair">Faulty Audio</option>
<option data-price="£35.00" data-total="£36.75" value="Mic Repair">Faulty Microphone</option>
<option data-price="£35.00" data-total="£36.75" value="Cam Repair">Faulty Camera</option>
</select>
<p><i id="price"></i>+Additional Fees</p>
<p>Total:<span id="total"></span></p>
<script type="text/javascript" language="javascript">
$(function(){
$('select').change(function(){
var selected = $(this).find('option:selected');
$('#price').html(selected.data('price'));
$('#total').html(selected.data('total'));
}).change();
});
*//This is some code I tried below//*
$(document).ready(function(){
$('input[id="price"];').val(price);
});
</script>
<input type="hidden" id="price" name="price" value=''>
<button type="submit" name="submit">
In the case that you are trying to use the same values in an entirely different page. You should know that JS variables do not automatically save, you will lose them after refreshing the page or loading another page.
In order to save variables in the browser, you can use localStorage or localSession. In this particular case, I suggest localSession. localSession will delete the data when the browser is close or the cache is cleared.
Also, you could remove the semicolon ';' from $('input[id="price"];').val(price)
I do not suggest using localStorage or localSession for important forms, this requires back-end. You could use PHP, Node, Django, or any back-end for managing forms. But what you tried was ultimatly right, it's just that there was no variable set to retrive the data from. Hence, why the input could be left empty.
One way you can do this is to update the hidden field when you update the text field.
$(function(){
$('select').change(function(){
var selected = $(this).find('option:selected');
$('#price').html(selected.data('price'));
$('#total').html(selected.data('total'));
$('#hiddenPrice').val(selected.data('price'));
}).change();
});
HTML:
<input type="hidden" id="hiddenPrice" name="hiddenPrice" value="">
Notes:
In your question, the hidden input has the same Id as the text field. That's not valid HTML. So give your hidden input a different Id (such as id='hiddenPrice'). Also, be aware that hidden fields can still be modified by a user. You should validate the posted price in your server side code to verify it is the correct price.
Try these
$('select[name="issue"]').on('change', function() {
var issue = parseFloat($(this).children("option:selected").data('price'));
$('input[name="price"]').val(issue);
// or this one below
$('input[name="price"]').val(issue).trigger('change');
});
Also, try changing the id of your hidden input field and remove or extract this '£' from the data-price.
Related
I have this option selector which updates url adding ?type=size, type depends on option selected. I use $_GET to then get the data from url.
The problem is, after entering value in inputs (name, price, etc) before, then on selection part the page refreshes and the input data I entered before is gone.
<label>Type</label>
<select name="type" onchange="location = this.value;">
<option>Select...</option>
<option value="?type=size">Size</option>
<option value="?type=weight">Weight</option>
<option value="?type=dimension">Dimension</option>
</select>
How can I fix this?
I have a dropdownlist with a list of countries (all countries)
<select id="Country" onchange="country();">
<option id="3">Japan</option>
<option id="4">Canada</option>
<option id="5">France</option>
<option id="6">Peru</option>
</select>
I have the form in a modal that i want get country value from.
<input id="seachcountry" type="text" class="form-control" name="country">
I have written a JQuery line to get the value from the modal form to the page fields, everything works great but the country select fields are not changing the value.
$("#seachcountry").val($("#modalform").val()).trigger("change");
thank you for your suggestions!
This will work for you:
Just inject the value of the <input> to <select>.
I have created a snippet for you.
var Tval = $('#seachcountry').val();
$('#Country').val(Tval);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="Country" onchange="country();">
<option id="3">Japan</option>
<option id="4">Canada</option>
<option id="5">France</option>
<option id="6">Peru</option>
</select>
<input id="seachcountry" type="text" class="form-control" name="country" value="France">
Try this.
function country() {
$("#seachcountry").val($(this).val());
}
For changing value in any select you just need send exist value from this select. In your select options have only ids, but not have value attribute. So if you add value equal to id to change value in the your form to "France" need run following:
$("#selectId").val(5)
Instead of 5 you can obtain value from any other field or else.
If you want set your value to input field when changed in select, you need attach listener that will do all work. It will looks like this:
$("#selectId").on("change", function(){
$("#inputFieldId").val($(this).find(":selected").text());
})
This will set displayed value to select, to set real value just write instead $(this).find(":selected").text() this $(this).val()
I got stuck with targeting the correct element and I hope you can help me.
So:
I have fields generated by PHP script:
<fieldset>
<div class="row">
<select>
<option value="A">A</option>
<option value="B">B</option>
</select>
<input type="text" />
</div>
<div class="row">
<select>
<option value="A">A</option>
<option value="B">B</option>
</select>
<input type="text" />
</div>
</fieldset>
And I need to initialize an auto complete plugin over each of textfield on focus, based on what is selected inside the select in the row, where is the textbox.
Because of templates of project, where I don't have access, I cannot edit the ID or classes of rows (like numbering the rows), so even this is a simplified solution, it is all like what I am working with.
So, once again, what I need to achieve:
$(input).focus(function(){
Ask_what_is_in_select_at_the_same_row()
Store_value_of_Selected_Option_to_Variable()
});
You can use it this way:
$('div.row :text').focus(function(){
// get the value of the select which is the sibling of focussed text input.
var optVal = $(this).siblings('select').find('option:selected').val();
// now you can use it.
});
DEMO
I have an issue related to an HTML page. Hoping that someone could help resolve it -
I have an HTML page with a Country select and a Text Box. The value attribute of the Option tag contains the Country codes. When the User selects a country, its respective country code should get populated in the Text Box.
This will happen each time the User changes the country.
All of the data is present in the page itself, and no server calls are made to fetch the data.
Could this be done using the delegate method? Can I also use Ajax in this case?
Any help would be very much appreciated.
Many thanks in advance!!
By using Jquery
Try this
HTML
<select id="c_code">
<option value="IN">India</option>
<option value="US">USA</option>
</select>
<input id="code" type="text">
Script
$('#c_code').on('change',function(){
$('#code').val($(this).val());
});
DEMO
You simply need to bind the logic to the change event of select
Here is the html code
<select id="ddl">
<option value="001">India</option>
<option value="002">USA</option>
</select>
<input type="text" id="txt" />
Here is the jQuery
$('#ddl').change(function(){
$('#txt').val($('#ddl').val());
});
Here is the demo
I made a function populating one select box using values from another select box when clicked and it works pretty well for the most of my selectboxes in the system but I am struggling with this one now lol:
function for testing the selected value and alerting if found:
function updateSelectBox(parent, child){
for(i = 0; i < document.getElementById(parent).length; i++){
if(document.getElementById(parent).options[i].selected){
alert(document.getElementById(parent).options[i].value);
}
}
this one when selected doesnt alert:
<input type="hidden" name="data[Series][3][Profession][Profession]" value="" id="Professions3_">
<select name="data[Series][3][Profession][Profession][]" multiple="multiple" id="Professions3" onchange="updateSelectBox("Professions3", "Specialisms3");">
<option value="24">Scientist</option>
and this is alerting when selected:
<input type="hidden" name="data[Series][4][Profession][Profession]" value="" id="Professions4_">
<select name="data[Series][4][Profession][Profession][]" multiple="multiple" id="Professions4" onchange="updateSelectBox("Professions4", "Specialisms4");">
<option value="24">Scientist</option>
this is the full html output from different selectbox that is also WORKING
<div class="input select"><label for="Zones">Zones</label><input type="hidden" name="data[Series][0][Zone][Zone]" value="" id="Zones_">
<select name="data[Series][0][Zone][Zone][]" multiple="multiple" id="Zones" onchange="updateSelectBox("Zones", "Countries");">
<option value="4">Europe</option>
</select>
</div>
This doesn't work. Even if it works on your page, the code in your post cannot work: your JavaScript is missing closing brackets, you're using HTLM with double quotes inside of double quotes, no one will be able to run this. So let's step back and rewrite this to something that'll definitely work:
HTML
<select onchange="updateSelectBox(this);">
<option value="0">Scientist 1</option>
<option value="12">Scientist 2</option>
<option value="24">Scientist 3</option>
</select>
JS
function updateSelectBox(selectBox) {
var sid = selectBox.selectedIndex;
var selectedOption = selectBox.children[sid];
console.log(selectedOption);
}
Now we at least have something we know works, using the minimal amount of code, that we can build back out. I'd recommend using this to build up the HTML and function you have right now. You definitely need to stop using so many strings and lookups, for instance. Especially trusting strings to not have typos is going to ruin your day (your have an input called 'Professions3_' and a select called 'Professions3'... this is just asking for trouble)