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
Related
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>
hey guys i am building a form in which i want when a user select an option from the dropdown menus a text to be displayed and calculate the price.
The dropdown menu is:
<select id="recipient" name="recipient" tabindex="6" class="selmenu">
<option value="staff">Site Staff</option>
<option value="editor">Editor-in-Chief</option>
<option value="technical">Tech Department</option>
<option value="pr">Public Relations</option>
<option value="support">General Support</option>
</select>
and the other dropdown menu is:
<select id="recipient" name="recipient" tabindex="6" class="selmenu">
<option value="one">1</option>
<option value="two">2</option>
<option value="three">3</option>
<option value="four">4</option>
<option value="five">5</option>
</select>
What i want to do is when the user selects something from the first and the second menu i want a textfield to change dynamically... can anyone point me the way?
only ajax/jquery could do that in combination of php step might be...
onchange of any dropdown make a ajax request to php script.
return the json response from php script
use this response to either manipulate your form or display data on page.
you don't need to use php for this, it can all be done with jquery/javscript
an example using jquery is below (i had to rename your second select as you had re-used an ID):
$('.selmenu').change(function() {
$('#output').text($('#recipient option:selected').text() + ' ' + $('#recipient2 option:selected').text());
})
output is the id of your textbox.
on a select value being changed, output will be filled with the selected value in both select controls
below is my code (1.jsp)
<html>
<head>
<script type="text/javascript">
function changeFunc() {
var selectBox = document.getElementById("selectBox");
var selectedValue = selectBox.options[selectBox.selectedIndex].value;
document.write("\n value is"+selectedValue);
}
</script>
</head>
<body>
<form method="post" action="SampServlet">
<select id="selectBox" name="selurl" onchange="changeFunc();">
<option value="1">Option #1</option>
<option value="2">Option #2</option>
</select>
</form>
</body>
</html>
Here I have inserted this code into a jsp page.And getting the value of "selectedValue" from javascript to scriptlet with in the same jsp like this.
<% String val=(String)request.getParameter("selurl");
System.out.println("\n selected value is:"+val); %>
I am getting selected value as null as output. And if I print javascript selectedValue parameter it is giving me correct output i.e.,output as the option selected.But in scriptlet am getting null.Where is the error.I included all headers and directives.Please help me.
In your web browser you have only html, javascript and css. All JSP code is meant to be run on the server. So you get only the output of the jsp file. And after this you cannot change the jsp code.
Use submit Button to get Your Selected value at same page and
no need any function,no need onsubmit.
for example:
<form method="post" action="">
<select id="selectBox" name="selurl">
<option value="1">Option #1</option>
<option value="2">Option #2</option>
</select>
<input type="submit" value="Submit" name="sub">
//use scriplet tag
<% String r=request.getParameter("sub");
if(r.equals("Submit"){
String s=request.getParameter("selurl");
System.out.println("selected value is "+s);
}%>
</form>
Your select element should have a name attribute and you must use that name in request.getParameter()
<select id="selectBox" name="selurl"">
<option value="1">Option #1</option>
<option value="2">Option #2</option>
</select>
String val = request.getParameter("mySelect");
EDIT:
If you want the server request to be made on the select element's onchange event, you must Ajax.
Using jQuery,
$.post('SampServlet', {selectedValue: selectedValue}, function(data) {
//Update view
});
You're missing the <submit> button.
<form method="post" action="SampServlet">
<select id="selectBox" name="selurl" onchange="changeFunc();">
<option value="1">Option #1</option>
<option value="2">Option #2</option>
</select>
<input type="submit" /> <!-- MISSING!! -->
</form>
Add the button and click on it to submit the form to your servlet with the selected value sent as selurl. Please, note that your form's action attribute is pointing to SampServlet which seems to be a servlet. For jsps we usually have something like action="page.jsp" in the form.
EDIT:
If you want to post the form automatically when the user selects a value from the drop-down just set your onchange to: (you won't even need the <submit> button then)
onchange="this.form.submit()"
I'm sure this shouldn't be so hard!
I've been struggling with facebook's javascript: I need to redirect to a URL based on the value in a select drop down menu, something like:
<form name="cityselect">
<select name="menu" onChange="location=document.cityselect.menu.options[document.cityselect.menu.selectedIndex].value;" value="GO">
<option value="http://www.leeds.html">Leeds</option>
<option value="http://www.manchester.html">Manchester</option>
</select>
</form>
Can anybody help me get this working? I've had good look though the facebook dev forum and docs but either don't understand what needed or can't find the answer!
Try {} this.options also your urls are mistyped. http://www.leeds.html should be http://www.leeds.com , not sure if that is related but just wanted to point that out just in case.
<form name="cityselect">
<select name="menu" onChange="window.document.location.href=this.options[this.selectedIndex].value;" value="GO">
<option selected="selected">Select One</option>
<option value="http://www.leeds.com">Leeds</option>
<option value="http://www.manchester.com">Manchester</option>
</select>
</form>
Parent Frame:
<form name="cityselect">
<select name="menu" onChange="top.location.href=this.options[this.selectedIndex].value;" value="GO">
<option selected="selected">Select One</option>
<option value="http://www.leeds.com">Leeds</option>
<option value="http://www.manchester.com">Manchester</option>
</select>
</form>
how to remember selection after redirect.
for example
let us suppose there are many city name in drop down. when i select city name in drop down then relevant page should appear on website and selection of current city should remain on redirected page until selection not changed
all redirect on same domain with subdomain
all sub domain layout same
dropdown will be available on all pages of website.
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());