We Keep Coding

How to add input value using jQuery

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.

How to convert 'Results Per Page' drop down over to links

I currently have a drop down that has multiple values in it (i.e. 50, 100, 200, etc..) which when selected and a button clicked reloads the page and filters a data table to shows however many results were selected.
<form action="#" method="post" class="form-inline" name="normal" id="SearchResultsForm">
<select name="limitNumberOfResults" id="limitNumberOfResultsPerPage"
class="single">
<option value="10">10</option>
<option value="20" selected="selected">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="200">200</option>
</select>
<input type="submit" class="button" value="Show" name="submitbutton"/>
</form>
I'd like to convert this from a drop down over to a list of links. How would I go about doing this?
I was trying to use something like the following.
<a href="#" onclick="SearchResultsForm.submit();return false;">
10
</a>
<a href="#" onclick="SearchResultsForm.submit();return false;">
20
</a>
However, I'm not sure how to get the results per page value to be recognized.
Thank you!

If you click 10 go to same page with ?limitNumberOfResults=10 then get that value write your code to get result.
10
$per_page = $_REQUEST['limitNumberOfResults'];

Jakir Hossain's answer works (and doesn't require JavaScript) but may require reworking the links to include current state.
Another possibility is for you to use a hidden field and update it when the links are clicked; it does require JavaScript, but you don't have to know about any other parameters that are passed to the server.
<input type="hidden" name="limitNumberOfResults" value="20" />
10
20
var form = document.getElementById('SearchResultsForm');
// Using event delegation to register clicks on the links
form.addEventListener('click', function(e){
if (e.target.tagName === 'A' && e.target.classList.contains('set-result-count') ) {
e.preventDefault();
form.elements.limitNumberOfResults.value = e.target.getAttribute('data-result-count');
}
});

you can use <select onchange='this.form.submit();'></select> in select tag so that when options are changed form gets submitted and you get the results per page value

submitting value of <select> field inside div in form

i am trying to submit values of form.
but all values other than a <select> field is not submitted because i think its inside div element as shown in code below
<form action="next.php" method="post">
<input>....
<input>....
<input>....
<select name="asdf"> <!--This field submitted successfully -->
<option value="wtevr"> </option>
<option value="wtevr2"> </option>..........
</select>
<div>
<select name="asdf2"> <!--problem is here submitting this field -->
<option value="wtevr11"> </option>
<option value="wtevr22"> </option>..........
</select>
</div>
</form>
I used div because this is part of my ajax code through which i update the values in select field.
Is there any alternative solution to submit this select field form?
MY approach:
I think that there is a solution if i use a hidden input field in this form whose value get equal to value of select field before submitted the form.
<input type="hidden" value="<!--comes from JavaScript code -->">
I am new to JavaScript so any help is appreciated..

You could use:
<select name="asdf2" id="asdf2" onchange="setField();">
<option value="this">this</option>
<option value="that">that</option>
</select>
<input type="hidden" id="hiddenField" value="nothingYet">
<script type="text/JavaScript" language="JavaScript">
function setField() {
toWhat = document.getElementById("asdf2").value
document.getElementById("hiddenField").value = toWhat;
}
</script>
In any case. If all you're doing is submitting the form, there really is no reason for that value to be ignored. How are you retrieving the values?

Use a 'name' tag in your inputs, then they'll be submitted.
like this:
<form action="next.php" method="post">
<input name="foo" value="var"/>
</form>

The <select> tag has a property called [form=""].
With that you can assign it to a form element.
As the form gets submitted, the select element is included.
<form name="myform">
<input type="text" name =...>
<select name="selectelement" form="myform">
<input type="submit">
</form>

Combine input type="text" and select tag

I have a list of select elements:
<select id="id_tags_to" multiple="multiple" size="0" name="tags" class="filtered"></select>
I'd like to somehow either translate the entire list of select elements into text OR, populate a new form (with an input type=text) with the contents of the select elements list as one string of text.
I tried:
<form action="/search/{{search_type}})" method="get">
<input type="text" name="qTag">
<input type="submit" value=" Search Tags">
<select id="id_tags_to" multiple="multiple" size="0" name="tags" class="filtered"></select>
</form>
This did not work in that it not only did not accomplish what I'm trying to do but it also broke the select functionality.
In case its not very obvious, I have no experience with html or javascript or jquery, I'm just trying to get something working with temporary code, so any quick and dirty suggestion would be great.

Hello you could use html5 to achieve that easily, its called a datalist its a new form type in html5 which is very useful hope this helps - Andrew
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>

First you need that the <select> element contains some <option> elements. See some reference here!
Then, you can get the list of select elements using javascript and populate it in the text field. Install jQuery and use this example to work on your code. I hope that helps you!

Submit form with Javascript

I feel really silly for having to ask this head desk but I've got no idea why this code isn't working it really simple sigh
I'm getting the following JavaScript error when I select from either of the drop downs and the form doesn't submit.
Uncaught TypeError: Property 'submit' of object # is not a function
<form action="categories/view/52" method="post" accept-charset="utf-8" id="myform" name="myform">
<select name="sort" ID="sort_type" onchange='document.forms["myform"].submit();'>
<option value="label">Sort</option>
<option value="price-low-high">Price: Low - High</option>
<option value="price-high-low" selected="selected">Price: High - Low</option>
<option value="name-a-z">Name A - Z</option>
<option value="name-z-a">Name Z - A</option>
<option value="date-added-new">Date Added - New</option>
<option value="date-added-old">Date Added - Old</option>
</select>
<select name="limit" ID="sort_type" onchange='document.forms["myform"].submit();'>
<option value="items_3" selected="selected">3</option>
<option value="items_50">50</option>
<option value="items_100">100</option>
<option value="items_all">all</option>
</select>
<input type="submit" name="submit" value="submit" />
</form>

Since you have:
<input type="submit" name="submit" value="submit" />
The submit function has been clobbered with that HTMLElementNode.
The simple solution is to rename it, or remove the name.
<input type="submit" value="submit" />
If you can't rename it (because you have server side code that depends on that value being submitted and you can't change the server side code) then you can:
document.createElement('form').submit.call(document.forms["myform"]);

The reason for the error when trying to call form.submit() is that your submit button is called "submit". This means that the "submit" property of your Form object is now a reference to the submit button, overriding the "submit" method of the form's prototype.
Renaming the submit button would allow you to call the submit() method without error.
<input type="submit" name="submitEle" value="submit" />
Should work