We Keep Coding

Change form action based on form select field

I can't get the form action to change based on a user's drop-down selection. What I want to do is have the form redirect to a different page, then the default for the form if a user selects "Student Loans" from the select field named "agency".
In other words, what I want to do is that if someone select "student loans" for the agency, I want the page to submit to /quote/quotes-sl.php instead of quote/quotes.php (the default of the form).
Here is my form code:
<form id="tdhcustom-pre-1-form" accept-charset="UTF-8" onsubmit="submit_function(this)" action="/quote/quotes.php" method="post" name="tdhcustom-pre-1-form">
<input id="edit-lead-source-description" name="lead_source_description" type="hidden" value="test" />
<label class="edit-owed" for="edit-owed"> Amount Owed: <span class="form-required" title="This field is required.">*</span>
</label><select id="owed" class="form-select required" name="owed">
<option selected="selected" value="">Select...</option>
<option value="$10,000 to $14,999">$10,000 to $14,999</option>
<option value="$15,000+">$15,000+</option>
</select>
<label class="edit-agency" for="edit-agency"> Problem With: <span class="form-required" title="This field is required.">*</span>
</label><select id="agency" class="form-select required" name="agency">
<option selected="selected" value="">Select Agency...</option>
<option value="Student Loan" data-action="/quote/quotes-sl.php">Student Loan</option>
<option value="FEDERAL">Federal Taxes</option>
<option value="STATE">State Taxes</option>
</select></div>
<input id="edit-submit" class="form-submit" height="31" name="submit" src="test.com/test.jpg" type="image" value="Submit" width="214" />
<input id="form-5ezy7kqpVIYFiVUgKIyxbp4n6MQ7ZqHuo33GJbq0QZE" name="form_build_id" type="hidden" value="form-5ezy7kqpVIYFiVUgKIyxbp4n6MQ7ZqHuo33GJbq0QZE" />
<input id="edit-tdhcustom-pre-1-form" name="form_id" type="hidden" value="tdhcustom_pre_1_form" />
</form>
Here is the javascript:
<script>
function submit_function(form) {
var selected = document.getElementById('Agency');
var dataset = selected[selected.selectedIndex].dataset;
if (dataset.action) {
form.action = dataset.action;
}
return true;
};
</script>

Add trigger on selected option val = "Student Loan" , then change attribute "action" form to url "/quote/quotes-sl.php"
$('#agency').on('change',function(){
var selected = $(this).val();
if(selected == "Student Loan")
$('#tdhcustom-pre-1-form').prop('action',"/quote/quotes-sl.php");
});
CMIIW :D

You want to change the form action based on an onchange event from your <select> ... but you'll also want to remove the onsubmit attribute from your form, like so:
<form id="tdhcustom-pre-1-form" accept-charset="UTF-8" action="/quote/quotes.php" method="post" name="tdhcustom-pre-1-form">
Assuming you're going to have data attributes on all the options like this:
<select id="agency" class="form-select required" name="agency">
<option selected="selected" value="">Select Agency...</option>
<option value="Student Loan" data-action="/quote/quotes-sl.php">Student Loan</option>
<option value="FEDERAL" data-action="/quote/quotes-s2.php">Federal Taxes</option>
<option value="STATE" data-action="/quote/quotes-s3.php">State Taxes</option>
</select>
You can just replace your <script> block with:
<script>
(function() {
var theForm = document.getElementById('tdhcustom-pre-1-form');
var theSelector = document.getElementById('agency');
theSelector.onchange = function() {
theForm.action = theSelector[theSelector.selectedIndex].getAttribute('data-action');
}
})();
</script>
That's pure JavaScript - so without jQuery (or any other framework).

Pass dropdown values to text box with javascript

I don't know much about javascript and unfortunately don't have time to learn before this project is due (wish I did!). I assume it is possible to pass the value of a drop-down selection into a hidden text input field on a form before the form is submitted. Could anyone help me figure out how to do that with javascript? Thank you! Here are my drop-down and text box details:
<div class="formEntryArea">
<div class="formEntryLabel">
<span class="formLabel"><label for=" langdropdown">Would you like to receive library notices in English or Spanish? ><span class="formRequired">*</span></label></span>
</div>
<div class="formMultiSelect" id=”langdropdown”>
<select name=" langdropdown ">
<option value="0" selected="selected">Choose language</option>
<option value="eng">English</option>
<option value="spa">Spanish</option>
<input type="text" id="ddepartment" name="ddepartment" value=””>
</select>
</div>

This is simply. First of all, you have to bind a change event handler for your select. Then, you have to set input text with value selected from dropdown.
var select=document.getElementsByTagName('select')[0];
var input=document.getElementById('ddepartment');
select.onchange=function(){
input.value=select.options[select.selectedIndex].text;
}
<div class="formEntryArea">
<div class="formEntryLabel">
<span class="formLabel"><label for=" langdropdown">Would you like to receive library notices in English or Spanish? ><span class="formRequired">*</span></label></span>
</div>
<div class="formMultiSelect" id=”langdropdown”>
<select name=" langdropdown ">
<option value="0" selected="selected">Choose language</option>
<option value="eng">English</option>
<option value="spa">Spanish</option>
</select>
<input type="text" id="ddepartment" name="ddepartment">
</div>

You can use this code:
var myselect = document.getElementById("MySelect");
myselect.onchange = function(){
alert(myselect.options[myselect.selectedIndex].value);
document.getElementById("ddepartment").value = myselect.options[myselect.selectedIndex].value;
};
Result: https://jsfiddle.net/fh5myefw/

Mind to close the tags, it's better practice.
var select = document.getElementById('selectElem');
var outputElem = document.getElementById('ddepartment');
select.addEventListener('change',function(){
var newValue = !this.selectedIndex ? "":this.options[this.selectedIndex].text;
outputElem.value = newValue;
});
<select name="langdropdown" id="selectElem" required>
<option value="" selected="selected">Choose language</option>
<option value="eng">English</option>
<option value="spa">Spanish</option>
</select>
<input type="text" id="ddepartment" name="ddepartment" value="">

this is javascript function
function func(selectObject)
{
document.getElementById('ddepartment').value = selectObject.value;
}
add onchange event to select element like this
<select name="langdropdown" onchange="func(this)">

Here use this:
var sel = document.getElementById('lang');
sel.onchange = function() {
var val = this.options[this.selectedIndex].value;
var che = document.getElementById('cache').value;
che = val;
console.log(che);
}
SNIPPET
var sel = document.getElementById('lang');
sel.onchange = function() {
var val = this.options[this.selectedIndex].value;
var che = document.getElementById('cache').value;
che = val;
console.log(che);
}
<select id='lang' name="lang">
<option value="" selected>Choose language</option>
<option value="eng">English</option>
<option value="spa">Spanish</option>
<option value="jpn">Japanese</option>
<option value="zho">Chinese</option>
<option value="fin">Finnish</option>
<option value="nav">Navajo</option>
</select>
<input type="hidden" id="cache" name="cache" value=””>

Calculating two persisted bootstrap-select values on .load

Using bootstrap-select -- I am multiplying the values of two select fields in a form, and changing the value of an input field to display the total -- after page load.
How can I have the input field stay empty when just one or neither of the select fields are selected?
Below code only works if both fields are selected.
When neither of the fields are selected, it calculates with the first values of both fields - output becomes $10.
When either one of the fields is selected, it multiplies the selected value with the first value of the non-selected field - output becomes 1 * selected value, or selected value * $10.
PS. Reason I am using .load and not .change is that the fields are persisted with garlic.js
<select class="price selectpicker form-control" id="price" name="price" title="Please choose price.." />
<option>$10</option>
<option>$20</option>
<option>$30</option>
</select>
<select class="multiply selectpicker form-control" id="multiply" name="multiply" title="Please choose multiplier.." />
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<input type="text" class="form-control" name="total" id="total" readonly="true" />
$(window).on("load", function(){
var price = parseInt($('.price').val());
var multiply = parseInt($('.multiply').val());
var total = price * multiply;
if(total === ''){
$('#total').val('');
} else {
$('#total').val('$' + total);
}
});

The problem was that the 'title' attribute of 'bootstrap-select', does not use a '0' value default option field. So the above code takes the value from the first selectable option when form is loaded.
To go around this issue:
Added the first default option with a zero value in the select tag.
Used the built in 'show.bs.select' to trigger an event when drop-down list is shown, and the built in 'refresh' method to remove it.
Complementary code:
$('.selectpicker').on('show.bs.select', function () {
$('.selectpicker').find('[value=0]').remove();
$('.selectpicker').selectpicker('refresh');
});
<select class="price selectpicker form-control" id="price" name="price" title="Please choose price.." />
<option value="0"></option>
<option value="10">$10</option>
<option value="20">$20</option>
</select>
<select class="multiply selectpicker form-control" id="multiply" name="multiply" title="Please choose multiplier.." />
<option value="0"></option>
<option value="1">1</option>
<option value="2">2</option>
</select>

I hope this will helps you
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script src="http://garlicjs.org/garlic.js"
type="text/javascript"></script>
<form data-persist="garlic" method="POST">
<select class="price selectpicker form-control" id="price" name="price" title="Please choose price.." />
<option value="10">$10</option>
<option value="20">$20</option>
<option value="30">$30</option>
</select>
<select class="multiply selectpicker form-control" id="multiply" name="multiply" title="Please choose multiplier.." />
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="text" class="form-control" name="total" id="total" readonly="true" />
</form>
In script side
<script>
$(window).on("load", function(){
calculate();
$('.selectpicker').on('change',function(){
calculate();
})
});
function calculate()
{
var price = $('.price').val()?parseInt($('.price').val()):10;
var multiply =$('.multiply').val()? parseInt($('.multiply').val()):1;
var total = price * multiply;
if(total === ''){
$('#total').val('');
} else {
$('#total').val('$' + total);
}
}
</script>

Multiple option selects to create unique shopping cart SKU

Is there a way of inserting a string into a field, whereby the string is predetermined depending on what options are selected from two drop down menus?
This is so that a combination of two drop down menus creates a unique SKU for that product, and that string referred to as a SKU is inserted into the input value of the item_number variable and then passed to paypal during checkout.
I will use the example of selling tee-shirts. So the combinations will be black/small, black/large, white/small, & white/large. And each will have a unique SKU of TEESHIRT-BS, TEESHIRT-BL, TEESHIRT-WS & TEESHIRT-WL respectively.
Here is my HTML for the option selects, however, I think I need some JavaScript to insert the SKU into the value field.
<input type="hidden" name="on0" value="colour"><b>select colour</b></><br>
<select name="os0" >
<option value="black">black</option>
<option value="white">white</option>
</select>
<br>
<br>
<input type="hidden" name="on1" value="size"><b>select size</b></><br>
<select name="os1" >
<option value="small">small</option>
<option value="large">large</option>
</select>
<!-- SKU-->
<input type="hidden" name="item_number" value="">

Try the following:
var sizeList = document.getElementById('size');
var colorList = document.getElementById('color');
sizeList.onchange = function() {
generateSku();
};
colorList.onchange = function() {
generateSku();
};
function generateSku() {
var selectedSize = sizeList.options[sizeList.selectedIndex].text;
var selectedColor = colorList.options[colorList.selectedIndex].text;
document.getElementById('sku').value = 'TEESHIRT-' + selectedColor.charAt(0).toUpperCase() + selectedSize.charAt(0).toUpperCase();
}
generateSku();
<input type="hidden" name="on0" value="colour"><b>select colour</b></><br>
<select id="color" name="os0" >
<option value="black">black</option>
<option value="white">white</option>
</select>
<br>
<br>
<input type="hidden" name="on1" value="size"><b>select size</b></><br>
<select id="size" name="os1" >
<option value="small">small</option>
<option value="large">large</option>
</select>
<!-- SKU-->
<input id="sku" name="item_number" value="">

How do I pre select selectbox and checkbox based on localStorage using jQuery

The problem is that when I close the browser and test it again it does show the value, but when I refresh the page it doesn't show to the user the values already chosen previously,but the localStorage have the data stored.
<form id="suspendedProperties">
<label for="stationDropdown">Select Station:</label>
<select name="stationDropdown" id="stationDropdown" onChange="storeLocalContent(this.id,this.value)" >
<option value="50028000">Tanama River</option>
<option value="50010500">Rio Guajataca, Lares</option>
<option value="60008002">Example River2</option>
<option value="60008003">Example River3</option>
<option value="60008004">Example River4</option>
</select>
<label for="sampleMediumDropdown">Select Sample Medium:</label>
<select name="sampleMediumDropdown" id="sampleMediumDropdown" onChange="storeLocalContent(this.id,this.value)">
<option value="WS">WS(Surface Water)</option>
<option value="WSQ">WSQ(Surface Water QC)</option>
</select>
<label for="date">Begin Date:</label>
<input naem="date" id="beginDate" type="date" onChange="storeLocalContent(this.id,this.value)" />
<label for="hydroEvent">Hydrologic Event:</label> <select name="hydroEvent" id="hydroEvent" onChange="storeLocalContent(this.id,this.value)" >
<option value="4">4- stable, low stage</option>
<option value="5">5- falling stage</option>
<option value="6">6- stable, high stage</option>
<option value="7">7- peakstage</option>
<option value="8">8- rising state</option>
<option value="9" selected>9- stable, normal stage</option>
<option value="A">A- Not Determined</option>
<option value="X">X- Not applicable</option>
</select>
<label for="containerCuantity">Add: </label><input type="number" min="1" value="1" id="containerCuantity"onChange="storeLocalContent(this.id,this.value)"/>
<select id="singleMultiContainer"name="singleMultiContainer" onChange="storeLocalContent(this.id,this.value)">
<option value="single">Single container sample</option>
<option value="multi">Multiple sets container</option>
</select>
<h4 >Analyses Requested:(Applies to all samples)</h4>
<label for="analysesC">Concentration</label><input type="checkbox" name="analysis" id="analysesC" value="C" onChange="isChecked(this.id,this.value)"/>
<label for="analysesSF">Sand-Fine break**</label><input type="checkbox" name="analysis" id="analysesSF" value="SF"onChange="isChecked(this.id,this.value)"/>
<label for="analysesSA">Sand Analysis**</label><input type="checkbox" name="analysis" id="analysesSA"value="SA" onChange="isChecked(this.id,this.value)"/>
<label for="analysesT">Turbidity</label><input type="checkbox" name="analysis" id="analysesT" value="T" onChange="isChecked(this.id,this.value)"/>
<label for="analysesLOI">Loss-on-ignition**</label><input type="checkbox" name="analysis" id="analysesLOI" value="LOI" onChange="isChecked(this.id,this.value)"/>
<label for="analysesDS">Dissolved Solids</label><input type="checkbox" name="analysis" id="analysesDS"value="DS" onChange="isChecked(this.id,this.value)"/>
<label for="analysesSC">Specific Conductance</label> <input type="checkbox" name="analysis" id="analysesSC" value="SC" onChange="isChecked(this.id,this.value)"/>
<label for="analysesZ">Full-size fractions**</label><input type="checkbox" name="analysis" id="analysesZ"value="Z" on onChange="isChecked(this.id,this.value)"/>
</form>
This is my localStrg.js:
var ls = window.localStorage;
function initialize(){
//Check if browser supports localStorage
if(!Modernizr.localstorage){
alert("Your browser will not store data, please change or update your current browser");
return false;
}
if(ls.length!= 0){
for(i=0;i<ls.length;i++){
getData(ls.key(i));
alert(ls.key(i));
}
}
}
function storeData(id,value){
ls.setItem('#'+id,value);
alert("Item saved"+' '+'#'+id);
}
function getData(id){
$(id).val(ls.getItem(id));
$(id).selectmenu('refresh');
}
$(document).ready(function(e) {
initialize();
});
All I want to do is to show the user the values he have chosen previously in their respective fields.
Example, if he chose option 4 in the dropdown and he refresh the page he should see option 4 already in the dropdown not option 1.

The code it's OK, the mistake is when I initialize JQuery Mobile:
<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
<script src="localStorage.js"></script>
That gives me all the defaults value from JQuery and then it loads my values from the localStorage. All I had to do is change the script of localStorage.js before initializing jquery mobile.
<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="localStorage.js"></script>
<script src="jquery-mobile/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
You can find a more detailed explanation here