The following html code is part of a form, which sends the information to a java servlet and updates sql database. It is a dropdown menu. When the user selects "Other", javascript makes a textbox appear so that the user can specify more detail. However, when user presses submit button, in the database, it simply says "Other" instead of what the user entered in the text box. Help is appreciated, thanks!
<script type="text/javascript">
function showfield(name){
if (name == 'Other')
document.getElementById('div1').innerHTML = 'Please Specify: <input type="text" name="other" />';
else
document.getElementById('div1').innerHTML = '';
}
</script>
<select id="description" name="description" onchange="showfield(this.options[this.selectedIndex].value)" required>
<option disabled selected value> ---Select--- </option>
<option value="Accommodation">Accommodation</option>
<option value="Travel">Travel</option>
<option value="Meal Allowanced">Meal Allowances</option>
<option value="Flat Rate">Flat Rate Expenses</option>
<option value="Other">Other</option>
</select>
<div id="div1"></div>
I think the field you're checking on the server is "description" which is the name of your select. Which is indeed set to "Other" (this is the value of the selected option).
I would have written it a bit differently but with the current code you need to name the input with some other name and check that one on your server, or change the selected option value.
Example change for client code:
<select id="description" name="description" required>
<option disabled selected value> ---Select--- </option>
<option value="Accommodation">Accommodation</option>
<option value="Travel">Travel</option>
<option value="Meal Allowanced">Meal Allowances</option>
<option value="Flat Rate">Flat Rate Expenses</option>
<option value="Other">Other</option>
</select>
<div id="div1">
Please Specify: <input type="text" name="otherDescription" />
</div>
<script>
document.querySelector('#description').addEventListener('change', function (evt) {
var inputWrapper = document.getElementById('div1'),
input = inputWrapper.querySelector('input);
if (evt.target.value == 'Other') {
document.getElementById('div1').style.display = '';
} else {
document.getElementById('div1').style.display = 'none';
input.value = '';
}
});
</script>
The you need to check 'otherDescription' on the server.
Hope it helps
Assuming that all of this markup is contained within a <form> element that will be submitted to the server, you should be able to simply check to see if the value posted for description is "Other" and then read the posted value for other.
The code will vary depending on your server-side implementation.
Related
I want to know how to have a form setup so if an option is selected, a text input is shown.
I am after the text input to only show if option "y" is selected.
I suspect this is more of a jquery/js thing but I'm trying to keep as much of it server side as possible.
<label for="resetpw">Reset Password</label>
<select name="resetpw">
<option value"n">No</option>
<option value="y">Yes</option>
<? if($_POST['resetpw']=='y'){?><p><label for="password">Reset Password</label><input type="password" name="password"></p> <? };?>
</select>
There is no real reason for doing client-side things on server-side.
E.g. Anything that doesn't involve processing and is not sensitive data.
The fact that you're only enabling and disabling the visibility of the input, you can simply use jQuery like I did in the code below.
Code Snippet
$("#resetpw_select").on("change", function() {
if ($(this).val() == "y") {
$("#input_").append("<input type='password' name='password'>");
} else {
$("#input_ input").remove();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="resetpw">Reset Password</label>
<select name="resetpw" id="resetpw_select">
<option value="n">No</option>
<option value="y">Yes</option>
</select>
<p id="input_"></p>
My html form has the content below:
<form name="profile">
...
<select id="province" name="province">
<span id="provinceWarning" class="alert"></span>
<option value="">Select Province</option>
<option value="AB">Alberta</option>
...
In my javascript, I'm trying to grab the form's ID to show a message telling the user to choose something in the dropdownlist if they haven't chosen anything and pressed the submit button. The problem is that the javascript block returns undefined.
//validate the profile form
function validate(e){
e.preventDefault();
var valid=true;
if(document.profile.province.value == ""){
document.getElementById('provinceWarning').innerHTML="*Please choose a province*";
valid=false;
}
if(valid){
alert("Thank You!");
}
return valid;
};
You can't have a span tag inside a select tag. Browser while rendering this HTML would have stripped it off.
See the demo below (check in your browser's dev tools that browser is stripping off span tag while rendering)
<select id="province" name="province">
<span id="provinceWarning" class="alert"></span>
<option value="">Select Province</option>
<option value="AB">Alberta</option>
</select>
You need to put the span tag outside the select tag.
Try this, it comes down and reset once u select and submit.
function submit(){
if(!document.getElementById("province").value){
document.getElementById("provinceWarning").innerHTML="*Please choose a Province*";
valid=false;
}else{
document.getElementById("provinceWarning").innerHTML=""
valid=true;
window.alert("thank you")
}
}
<form name="profile">
<select id="province" name="province">
<option value="">Select Province</option>
<option value="AB">Alberta</option>
</select>
<span id="provinceWarning" class="alert"></span>
</form>
<button id="btnSubmit" onclick="submit();">Submit</button>
Problems:
1- You can not define span in select option then move it out of your select
2- To check select value you should getElementById("province") and then check the value
3- Testable code can be as below(You can change it as you want):
function func()
{
var ddl = document.getElementById("province");
var selectedValue = ddl.options[ddl.selectedIndex].value;
if (selectedValue == ""){
document.getElementById("provinceWarning").innerHTML="*Please choose a Province*";
valid=false;
}else{
alert("Thank You!");
}
}
<form name="profile">
<div>
<span id="provinceWarning" class="alert"></span>
</div>
<div>
<select id="province" name="province">
<option value="">Select Province</option>
<option value="AB">Alberta</option>
</select>
</div>
</form>
<button id="btnSubmit" onclick="func();">Click Me</button>
I want to provide users two input mechanisms - text entry and drop down menu by using element. The input value is fetched in javascript. (no php used).
I can make each method work, but not simultaneously.
This is probably fundamental question, but could someone explain how I need to set up event-handlers as well as value for each input to make this work?
<form name="myform" onsubmit="return userInput()">
<select id="myVal" onchange="userInput()" onsubmit="return userInput()">
<option>Select a country</option>
<option value="All Countries">All Countries </option>
<option value="Austrailia">Austrailia</option>
<option value="Korea">Korea </option>
<option value="Austria">Austria </option>
<option value="United States of America">United States of America
</option>
<option value="Japan">Japan</option>
<option value="Canada">Canada </option>
<option value="India">India</option>
</select>
<!-- <input name="Submit" type="submit" value="Add to list" > -->
<input type="text" id="myVal" placeholder="Add some text…">
</form>
// Javascript code where I fetch user input.
function userInput(event){
userinput = document.getElementById("myVal").value
// console.log(userinput)
// console.log(document.getElementById("myVal").value)
//draw(document.getElementById("myVal").value)
d3.select('svg').remove();
main();
console.log("Main has been called")
// draw(document.getElementById("myVal").value)
return false;
}
Both your select element and your text input element have the same ID. Make them unique and make one call for each element in your JS. Also, get rid of the onsubmit event handler attribute in your select element.
I am creating my first Web Form and I'm looking for a little help getting this JavaScript Function to work for me.
I am trying to use a JavaScript function to specify which datalist to use for a form input list=" " based on the selected value of a separate form. As you can see below I have supplied the first form (which I intend to 'fire' the JavaScript and input the variable) and the second form which should have the input list=" " value set by the script. In the first form I have used two different events simply to figure out which is the appropriate: onselect= and onchange=.
I greatly appreciate any help or comments.
Here is my code, I have approached this quite a few different ways and at this point it exists as:
<form>
Tendon Type: <input list="tendontype">
<datalist id="tendontype">
<option value="Cantilever" onselect="locationScript('ct')">
<option value="Drape" onchange="locationScript('ut')">
<option value="Span">
</datalist>
</form>
<form name="location">
Location: <input id="loc229" list="need js to insert here"><br />
<datalist id="pier">
<option value="Pier EN-1">
<option value="Pier EN-2">
</datalist>
<datalist id="unit">
<option value="Unit EN-2">
<option value="Unit EN-3">
</datalist>
<datalist id="span">
<option value="Span EN-1">
<option value="Span EN-2">
</datalist>
</form>
<script>
function locationScript(x) {
var locationlist;
if (x == 'ct') {
locationlist = setAttribute("list","pier")
} else {
if (x == 'ut') {
locationlist = setAttribute("list","unit")
} else {
locationlist = setAttribute("list","span")
}
}
document.getElementById("loc229").locationlist;
}
</script>
First off sorry for a re-post, I voted to delete my old post because I'm asking for help on the code now, not just which way is the better route. Any my code has changed several times
On my page there is a drop down to select a country, dynamically loaded from a db. Once the user selects a country two things can happen. 1) If they select Canada or the US a second drop-down appears and the user can select a region. 2) If the user selects any other country it creates an input box so that the user can type the region instead. This all works fine.
Now there is a third input which takes the province/state value so it can be posted. There are only two of us who will use this form so I'm not worried about JavaScript being turned off in the browser.
My issue is that when the user first selects the Canada/US and a region, nothing is filled into the third input unless they change the country selection. However, if they select a country other than Canada/US and have to type the region, it works as expected.
Here is an example of the issue: http://jsfiddle.net/owalsh/BQXZA/3/
If anyone can tell me why I'd appreciate it, thanks
Working here: http://jsfiddle.net/5A4v4/11/
HTML:
<form id="customer_bill_add_post" name="customer_bill_add_post">
<select id="country" name="country">
<option value="0">Select a country</option>
<option value="CA">Canada</option>
<option value="US">United States</option>
<option value="OT">Other</option>
</select>
<select id="province_select" name="province_select">
<option value="0">Select a Province</option>
<option value="AB">Alberta</option>
<option value="AL">Alabama</option>
</select>
<input type="text" id="province_input" name="province_input">
<input type="text" id="province" name="province" />
</form>
Jquery: code (there was some extra change event binding going on) you can prettify it.
$(function(){
//initially hide the textbox
$("#province_input").hide();
$("#province_select").hide();
$('#country').change(function() {
if($(this).find('option:selected').val() == "CA"){
$("#province_select").show();
$("#province_input").hide();
} else if($(this).find('option:selected').val() == "US"){
$("#province_select").show();
$("#province_input").hide();
} else {
$("#province_input").show();
$("#province_select").hide();
}
});
$('#country, #province_select, #province_input').bind("change", function() {
if($('#country').find('option:selected').val() == "CA"){
document.customer_bill_add_post.province.value = document.customer_bill_add_post.province_select.value;
} else if($('#country').find('option:selected').val() == "US"){
document.customer_bill_add_post.province.value = document.customer_bill_add_post.province_select.value;
} else {
//alert('foo');
document.customer_bill_add_post.province.value = document.customer_bill_add_post.province_input.value;
}
});
});
Cheers,