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.

javascript pick values (or indexes) for multiple drop menu SELECTs iDs, and make them remove 'disable' from input fields that they are connected to

<div id="header_div">
<select id="store_name_select" name="store_name_select" onchange="checkEnable(this,'store_name')">
<option value="" selected="selected" disabled="disabled"></option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<p>
<input disabled="" id="store_name" name="store_name" type="text">
</p>
<div>
<div>
<select id="store_address_select" name="store_address_select" onchange="checkEnable(this,'store_address')">
<option value="" selected="selected" disabled="disabled"></option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
</div>
<p>
<input disabled="" id="store_address" name="store_address" type="text">
</p>
<select id="purchase_date_select" name="purchase_date_select" onchange="checkEnable(this,'purchase_date_month', 'purchase_date_day', 'purchase_date_year')">
<option value="" selected="selected" disabled="disabled"></option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<p>
<input disabled="" id="purchase_date_month" name="purchase_date_month" type="text"></span>
<input disabled="" id="purchase_date_day" name="purchase_date_day" type="text"></span>
<input disabled="" id="purchase_date_year" name="purchase_date_year" type="text">
</p>
</div>
Note 1: I do NOT own the site with this code so I can't change the page source code by editing it.
Note 2: I need a javascript (NOT JQuery)
Note 3: I'm accessing the website in question through Firefox or Waterfox web browser
I'm trying to make a greasemonkey (tampermonkey) script, which will do some things when browser access the web page.
The above code is just a small piece of page source code. I made it more simple so you can only see whats important for this issue.
As you can see, page has multiple 'select' (tags). Current 'state' (or value) is 'not picked'. For all 'select' tags I can select from drop menu 'yes' or 'no'. Once I select 'yes', it will 'unlock' the input fields that were previously 'disabled'.
Since most of the time the answer for 'select' is 'yes', I want to have a script which will automaticly select 'yes' for all 'selects' IDs, and 'unlock' (remove 'disable' state) for the 'inputs' that they are connected to. If I later need to switch from 'yes' to 'no' I'll do it manually.
I googled and searched before asking here, and although I did found some similar questions, NONE of the code worked, even if I tried to adopt it or change it to work for my case. I'm a newb so probably I missed something or coded it the wrong way, so please try not to criticize me too much. :)
For instance, I've tried this:
document.getElementsByTagName("select").selectedIndex = 1; //Option 'yes'
or
var test = document.querySelectorAll("#store_name_select, #store_address_select, #purchase_date_select");
for (var i = 0; i < test.options.length; i++) {
test.selectedIndex = 1;
}
^ that one also didn't work. At the top of that, (tampermonkey internal) script editor also warned me that 'i' is already defined. It's because I already used 'i' for other piece of code which does other things. Almost all the code that I can find ALL include 'i' letter. I wonder if I could use other letter for that line, eg.:
for (var b = 0; b < test.options.length; b++)
^ I did tried that line too but nothing has changed.
So, does anyone know how to get all 'select' IDs and force them to all select 'yes' (by value or by their 'index') and unlock input fields that are bound to them? Since this is a submit form, the owner needs to know that I selected 'yes' from drop menu. So the point is not only for the drop menu 'select' to unlock inputs, but to let the site owner 'know' that I actually did selected 'yes' before inputs removed their 'grayed out' cover.
THANK YOU in advance for your help!
If you need a 'test' page, here is the direct link to the page in question, so you can try your code and see if it really works:
amzon microworkers page

There isn't any selector to select multiple IDs at once. You have to write you code to get those elements.
Please see the getElementsById() function in this demo
The function accepts string of multiple ids separated by blank space and returns the corresponding elements for it.
I referred this answer

Make Sure All Forms In My Form Have Input Before Using Ajax

I have a set of input boxes and you can add more and more sets of these forms if you click the add more button. In my form I can submit data and I have got it to show up when you reload the page. However, I am stuck at making sure all of the fields have values before I run my AJAX. I use Jquery for this project
I cannot use a validation plugin because I am running magento and every time I try running the plugins in "No Conflict Mode" the plugins do not seem to work. Because I am running Magento this means I need to run Jquery in no conflict mode.
I have seen other solutions for this however they are all to do with input boxes and I have 1 input boxes and 2 select boxes. How can I make sure that all the input boxes are filled before and that all the select boxes that are not disabled have something selected before the ajax call?
Here is part of my HTML:
<form>
<input id="12">
<select id="1">
<option disabled="disabled" selected="selected">select please</option>
<option value="01">Option 1</option>
<option value="02">Option 2</option>
</select>
<select id="2">
<option disabled="disabled" selected="selected">Select Please</option>
<option value="01">Option 1</option>
<option value="02">Option 2</option>
</select>

Using a click event, if you use .val() on your <select/>, it will return null if there is no value attribute on your <option/>.
Note: This will not work if you put a value attribute on your options.
Edit: Doing a !== compare will be faster.
$("#submit-button").click(function(){
//if this is true, then it is valid
alert($("#1").val() !== null);
});

You can do it by getting the inputs value into a property.
This script would alert the number of how many inputs aren't complete or missing with base in your structure.
(no jQuery)
var myForm=document.getElementsByTagName("form")[0];
var formSelectors=myForm.getElementsByTagName("select"),
formTextBoxes=myForm.getElementsByTagName("input"),
missing=0;
var i,
length=formSelectors.length;
for(i=0;length>i;i++){
if(formSelectors[i].value===formSelectors[i].children[0].value)
//Check if select value is equal to
//select please or Select please
//MISSING! (select)
missing++
}
length=formTextBoxes.length;
for(i=0;length>i;i++){
if(formTextBoxes[i].value.length===0)
//MISSING! (input)
missing++
}
alert(missing)

Try this:
if($('#12').val()!='') {
// your code
}

Changing a textbox based on a dropdown html array with jQuery

So I am finding issues doing this, I am curious if its because I am using HTML form arrays.
Anywho so heres my problem, I want to change a dropdown box and have it change the text in a textbox to that value! Sound's simple enough right?
Well here's my failed attempt:
<select id=discount[0] name=discount[0]>
<option value=1>option 1</option>
<option value=2>option 2</option>
</select>
<input type=text id=postdiscount[0]>
And my JS:
$("#discount[0]").change(function () {
$("#postdiscount[0]").val(this.value);
});
JSFiddle if you guys wanna play about:
http://jsfiddle.net/t75ut97f/3/
EDIT:
Has nothing to do with form items being in an array :X!

You need to escape the brackets, then just use this.value
$("#discount\\[0\\]").change(function () {
$("#postdiscount\\[0\\]").val(this.value);
});
http://jsfiddle.net/t75ut97f/2/

How do I select an option by class?

I tried using $('.className').show(); and $('.className').hide(); but it doesn't seem to work in IE. Is there another way to group options by class in a drop down list? I found this question but the answer is looking for the value "a" or "c".
//if 2 is selected remove C
case 2 : $('#theOptions2').find('option:contains(c)').remove();break;
//if 3 is selected remove A
case 3 : $('#theOptions2').find('option:contains(a)').remove();break;
How do I look for the actual class?
EDIT
<select id="theOptions2">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>

I've never seen anyone try to call hide/show on option elements before, and I imagine IE just doesn't allow you to do that. The selection is probably matching just fine, but IE is not hiding the elements. The selection for removing would be the same as for calling show hide...
$('.className').remove();
or
$('option.className').remove();
or
$('#theSelect option.className').remove();

You can add the disabled attribute to the options you don't want to use:
http://jsfiddle.net/sadmicrowave/Fnvqb/

$('select[class~="cactus"]')
$('option[class~="cactus"]')
javascript:(function(){
var out = "hi\n";
out += $('*[class~="cactus"]').html2string() ;
alert( out );
})()
For future reference, instead of describing in words the html ... show actual html

This demonstration code shows one way of how you can achieve option filtering... it would need modification to determine which candidate items are removed as I just hardcoded for purpose of demonstration, but it shows you what you need to consider - when you remove the items, you need to consider the ordering by which they're added back. The easiest way to bypass this problem is to keep a copy of the original list and then when you unfilter, just remove the remaining items, replacing them with what was originally there - otherwise you have to worry about keeping sort data.
So here's my drop down definition:
<select id="mySelector">
<option class="group1">Item 1</option>
<option class="group2">Item 2</option>
<option class="group1">Item 3</option>
<option class="group2">Item 4</option>
<option class="group1">Item 5</option>
</select>
<input type="button" id="removeItems" value="Remove candidate items" />
<input type="button" id="addItems" value="Add them back" />
And the jquery to filter/restore the items:
$(function () {
var originalOptionData;
$("#removeItems").bind('click', function () {
/* store original copy for rollback */
originalOptionData = $("#mySelector option");
$("#mySelector option.group2").remove();
});
$("#addItems").bind('click', function () {
var selector = $("#mySelector");
selector.children().remove();
selector.append(originalOptionData);
});
});
This could be turned into a select filter jquery plugin relatively simply I suppose, but I didn't go that far...