Get form recipient from <option> using jQuery/Javascript - javascript

Ok, I have form kind of like this:
<form method="post" action="processform.php" name="form1">
<input type="hidden" name="recipient" value="email1" />
<input type="text" />
</form>
I want to add a list containing multiple recipients, like this:
<select>
<option selected="selected">Choose recipient</option>
  <option value="email1">Recipient 1</option>
  <option value="email2">Recipient 2</option>
</select>
What is the best way to replace the value of "recipient" by selecting an option from the list?

You can either bind a change event to the select drop down list for auto update of your hidden field.
$("select").change(function(){
$("input[name=recipient]").val($(this).val());
});
Or your submit event you can assign the hidden field like this:
$("input[name=recipient]").val($("select").val());
Example on jsfiddle

$('input[name=recipient]').val($('select[name=recipient-list]').val());

Related

Javascript redirect to two thank you pages, depending on form response

There is a yes or no field on the form, depending on user's choice I would like to send them to a different thank you page depending on their answer.
With this, I just get a blank page. I've tried everything I can think of, so I appreciate any insight.
<form action="http://www.google.com/form" name="Lead" id="Lead" class="sem-form" onsubmit="return redirectTY()">
<label class="select">
<select name="Invest_RD" id="Invest_RD">
<option value="Yes">Yes</option>
<option selected="selected" value="No">No</option>
</select>
</label>
</form>
function redirectTY(){
var qualify = document.getElementById("Invest_RD".value);
if (qualify == "Yes"){
window.location.href='http://www.google.com';
} else {
window.location.href='http://www.bing.com';
}
}
Your code looks fine, except for this detail:
document.getElementById("Invest_RD".value);
This will crash all your javascript. Probably your console (developer tools) have red messages refered to this. To fix it write:
document.getElementById("Invest_RD").value;
That's because getElementById() is a method of document, and value is a property of the element returned by getElementById().
In your code snippet you are missing the submit button to submit the form or any other action call that executes the button submit. When the action call is done alone the form will submit and you can check upon the values.
Hence your HTML will look like
<form action="" name="Lead" id="Lead" class="sem-form" onsubmit="return redirectTY()">
<label class="select">
<select name="Invest_RD" id="Invest_RD">
<option value="Yes">Yes</option>
<option selected="selected" value="No">No</option>
</select></label>
<input type="submit" name="submit" value="SUBMIT" />
</form>
You no need an action to the since it is calling the JS after the form is submitted and you can catch up from there on.
The select tag value can be retrieved using the following JS and you can perform the calculations.
$('#Invest_RD').val(); // Getting the selected value from the select tag
Add submit button <input type ="submit" value="submit"> to trigger the onsubmit event in your html form. and change onsubmit = "redirectTY();return false;"
<label class="select">
<select name="Invest_RD" id="Invest_RD">
<option value="Yes">Yes</option>
<option selected="selected" value="No">No</option>
</select></label>
<input type ="submit" value="submit">
</form>

POSTvalue of a select populated by Ajax in a form

This may be a very typical task yet i am having issued cracking a solution for it.
I am using a form which has 2 select options in it
<form enctype="multipart/form-data" id="uploadimage" method="post" action="" class="allForms">
<select id="parentCatSel" onchange=listsubcategory(this.value)>
<option value="">Choose category</option>
</select>
<div id="subcatcontainer"><select id="subCatSel"><option value="">Choose Sub category</option></select></div>
<input name="save" class="save" type="submit" id="save" value="Save"/>
</form>
Based on the category chosen in "parentCatSel" the "subcatcontainer" is populated with a select option of subcategories
for the chosen parent category
listsubcategory()
returns
<select id="subCatSel"><option value="">Choose Sub category</option>
<option value="1">1</option>
<option value="2">2</option></select>
the display of subcategory works fine with no errors, however when i try to post the values in the form , i am not able to retrieve the value of chosen option in "subCatSel" as below
document.getelement['subCatSel']= null
post['subCatSel'] = null
please suggest an alternative.
Add name attribute to your select inputs.
<select id="subCatSel" name="subCatSel"><option value="">Choose Sub category</option>
Sorry guys, my terrible bad of coding in the actual code. I missed out on a quote in the select
just changed that to
it works as wanted!!, thanks everyone

Cannot Fill Textbox with Javascript After Editing

I have a simple drop-down box and I am successfully using Javascript to automatically fill a textbox when a drop-down item is selected.
Once I edit any of the textbox's automatically filled text, or use a "Clear" button to erase textbox, the drop-down list no longer replaces fills the textbox.
How can I continue to use the drop-down box once the user has altered the textbox?
JSFiddle Version
HTML code:
<select id="dropdown" onchange="preset();">
<option value="">Select a person:</option>
<option value="Abe" >Abe</option>
<option value="Bob" >Bob</option>
<option value="Cal" >Cal</option>
<option value="Dan" >Dan</option>
</select>
<input type=Submit value="Clear" onclick="document.getElementById('mytext').value='';">
<textarea id="mytext"></textarea>
Javascript code:
function preset() {
document.getElementById("mytext").innerHTML=document.getElementById("dropdown").value
}
You use innerHTML in one place, and value in another. Using value in both fixes it.
Demo
Update the submit button to this:
<input type=Submit value="Clear" onclick="document.getElementById('mytext').innerHTML='';">

Have an input field as part of a select list?

I have this code:
<select>
<option>thing one</option>
<option>thing two</option>
<option>thing <input type="text"> times</option>
</select>
Can a <select> input have an <input> added inside one of the <option>s so the user can fill it out?
Try something like the editable select list plugin for jQuery
http://coffeescripter.com/code/editable-select/

Editable Dropdown?

I have a php page with 4 text boxes, each need a "drop down" when the text boxes have the focus. Clicking the options would populate the (editable) text box(es) and close the drop down. The text boxes are of course part of html forms. How can I do this inline with javascript or ajax using minimal code?
Unless you are calling a webserver ajax is useless here.
You will need to have or create a div, since it is below your input box, and absolute positioning will be useful to ensure it is appropriately placed relative to the input box.
You should only have one function, so it should be adaptable to the input fields, hence the reason for absolute positioning.
You will want to track the keypress and mouseclick events in this div, and ensure that only one is open at a time, so have an onblur so that if the user clicks anywhere else the div closes.
if you use jquery you can do this extremely easily.
you could tweak this to your liking:
<html>
<script language='javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'></script>
<script language='javascript'>
$(document).ready(function(){
$("input[type='text']").focus(function(){
$(this).parent().find('select').show();
});
$('select').change(function(){
$(this).parent().find('input[type="text"]').val($(this).val());
$(this).hide();
}).blur(function(){
$(this).hide();
});
});
</script>
<form>
<fieldset>
<input type='text' /><br/>
<select style='display:none;'>
<option value=''>----</option>
<option value='1'>opt1</option>
<option value='2'>opt2</option>
<option value='3'>opt3</option>
</select><br/>
</fieldset>
<fieldset>
<input type='text' /><br/>
<select style='display:none;'>
<option value=''>----</option>
<option value='1'>opt1</option>
<option value='2'>opt2</option>
<option value='3'>opt3</option>
</select><br/>
</fieldset>
<fieldset>
<input type='text' /><br/>
<select style='display:none;'>
<option value=''>----</option>
<option value='1'>opt1</option>
<option value='2'>opt2</option>
<option value='3'>opt3</option>
</select><br/>
</fieldset>
<fieldset>
<input type='text' /><br/>
<select style='display:none;'>
<option value=''>----</option>
<option value='1'>opt1</option>
<option value='2'>opt2</option>
<option value='3'>opt3</option>
</select><br/>
</fieldset>
</form>
</html>
if your select options need to be dynamic, ajax is very simple with jquery. if you already know what's going to be in there, have the php populate the hidden select boxes, and the focus event will show them.

Categories

Resources