We Keep Coding

jQuery change selected value and submit form basd of localStorage value

I have a problem. I have select with name category and have code:
if (localStorage.getItem('category') !== null) {
$('select[name=category]').val(localStorage.getItem('category')).trigger('change');
$('.form-search').submit();
}
If in Local storage I have id, then I change selected value in select. But How I can submit this form? My code is not working, because page reloading many times..
MY form:
<form method="get" class="form-search">
....
<select name="category">
<option value="1">Auto</option>
<option value="2">Sport</option>
...
</select>
</form>

Because the form hasn't action, browser submit form to this page and page reloaded and because you don't removed localStorage the code runned again. So you should remove localStorage category before submitting form.
var category = localStorage.getItem('category');
if (category !== null) {
$('select[name=category]').val(category).trigger('change');
localStorage.removeItem('category');
$('.form-search').submit();
}

You may not need the trigger
if(localStorage.getItem('category') !== null) {
$('select[name=category]').val(localStorage.getItem('category'));
$('.form-search').submit(function(e){
e.preventDefault();
});
}
Check code here

Submit a value from dropdown without refresh then use the value re calculate a price

I have a select option to add accessories to a product. What I want to do is recalculate the price without have to refresh the page. This is what I'v got so far:
<form action="" method="post">
<select name="option" onchange="this.form.submit()">
<option value="15">Acc1</option>
<option value"30">Acc2</option>
<option value"45">Acc3</option>
</select>
</form>
$oldprice ='678';
$option = $_POST['option'];
$newPrice= $oldprice + $option;
This works great, however it has to refresh the page. Is there a way to recalculate the new price without having to refresh the page.
And also use the option value in other places on the page for example
If ($_POST['option] == '15'){ \do something}
Any help welcome

You could use ajax or if the needed information is already in the page which it seems to be based on your example code, then you could change the onchange to be a function:
onchange='updatePrice()'
Sample function code:
function updatePrice(){
var e = document.getElementsByName("option")[0];
var accessory_value = e.options[e.selectedIndex].value;
//additional code to update the price where
}

Hook onchange event in select tag.
Ex:
<select onChange="calculate(e)">
// option here
</select>
*.js:
function calculate(e) {
console.log(e.target.value);
}

Change value of form input based on check box click

I have a form with validation, but im looking for a way to allow a check box to force a value for a form field so the validation will not see it as blank once the check box is clicked.
I currently have:
if (document.drop_list.Make.value == "")
{
message = message + "Make is missing\n";
valid = false;
}
I also have a check box, with this function:
// add event handler to checkbox
element.addEventListener('change', function() {
// inside here, this refers to the checkbox that just got changed
textbox = document.getElementById('textbox_1');
textbox.disabled = this.checked;
Can I add something to that function to force a value for:
<SELECT class="enteredMake" onchange=SelectModel(); name=Make id="textbox_2">
<OPTION selected value="">Vehicle Make</OPTION>
</SELECT>
This way, it wont be blank, it would be, say "Checked"
allowing the validation to pass?

So are you looking for something that will set the value of a select box once a checkbox has been ticked? For example:
selectbox = document.getElementById('myselectbox');
checkbox = document.getElementById('mycheckbox');
checkbox.addEventListener('change', function() {
selectbox.value = "1"
});
HTML:
<input type="checkbox" id="mycheckbox" />
<select id="myselectbox">
<option value="-1">Please select...</option>
<option value="1">1</option>
</select>
JSFiddle

Check in javascript in the select

How can i check the select items in javascript / jQuery.
I want check in javascript. When you clicked on value limburg and brabant. But how can i select in javascript this options?
I have this code:
<form action="/" method="post" class="clearfix">
<fieldset class="clearfix">
<div class="field">
<select>
<option value="" selected="selected">Kies een regio?</option>
<option value="Limburg">Limburg</option>
<option value="Brabant">Brabant</option>
</select>
</div><!-- /field -->
</fieldset>
</form>

You'll want to bind the change event to the select box and put your filtering in there, it would be best to assign an id or class to the select element so it can be specifically selected but the following code should alert to the screen when either of these options are selected.
$(".field select").change(function() {
if($(this).val() === "Brabant") {
//Brabant was selected
alert("Brabant");
}
if($(this).val() === "Limburg") {
//Limburg was selected
alert("Limburg");
}
});
If you just want to know what the current value of the selected element to you can do
var selecteditem = $("select").val();
if(selecteditem === "Limburg" || selecteditem === "Brabant") {
alert("'Limburg' or 'Brabant'");
}
However this will not automatically trigger anything when the value is changed, to do that, this could be for validation purposes that you would do this to check that it is one of the two.

Assuming I've understood you correctly, you want to check the value of the selected option. You can do that by simply checking the value of the select element. With jQuery, that's as simple as:
$("select").val();
You probably want to bind an event handler to the change event so you can check the value when it changes:
$("select").change(function() {
if(this.value === "Limburg") {
//Limburg was selected
}
});
Here's a working example of that.

Not sure if i understood your question, but to change the selected value, you can do something like
$('select').val('Limburg'); // to select limburg

Select value of current form in JQuery

I have many forms on my site. When the Submit is triggered on the form I expect to receive an id of the form and the option selected.
html
<form name="order">
<select id="count">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select><br/>
<input type="text" name="id" value="6" />
<input href="#" type="submit" value="Submit" />
</form>
JavaScript
var fancyboxOptions = {
ajax : {
type: "POST",
data: {
id: null,
count: null
}
}
}
$(document).ready(function() {
fancyboxOptions.ajax.data.id = $('input[name="id"]').val();
fancyboxOptions.ajax.data.count = $('#count').val();
$('div#buy input').fancybox(fancyboxOptions);
$('#count').change(function() {
fancyboxOptions.ajax.data.count = $('#count').val();
});
With this code I receive only data from the first form -- when the submit is triggered other forms I receive data from the first form rather than from the form I pressed submit on.
How do I restructure my code, so the form submits triggers the submit to give me only the the data in the form for which I pressed submit.
PS Do not pay attention a fancybox, it's work good.

May want to change your code to something like this
<script>
$('input[name=id]').parent().change(function(){
fancyboxOptions.ajax.data.id = $(this).find('input[name="id"]').val();
fancyboxOptions.ajax.data.count = $(this).find('#count').val();
});
</script>
This will install a change handler on each form which contain a input field named id, and the callback function (which is installed on the parent() form ) will have access to "this" which the can navigate the DOM and find all the sub-fields relative to the form node.

Do you need to loop through all the forms on your page and get their values after clicking one button? If so, try this:
$('form').each(function(){
var currentForm = $(this);
var someValue = currentForm.find('input[name="id"]').val();
// do the rest here
});
If that's not your question, then maybe it has something to do with using ids for your inputs instead of classes. You can only use an id once, so if your other forms also include < select id="count"> then when jQuery reads that value, it will only ever return the value of the first one.
Hope this helps...