I have the following form that I am working on...
When a user choses an option from a radio group a div is displayed with a multiple selection list. If one of those selections is "other" a text box is dislayed allowing the user to input the information.
How do I get the form to return the selections from the multiple selection list while replacing the "other" value with the value of the text input field??
I'vespent countless hours searching google and this website and while I've found some similar solutions, none are for multiple selections and none fit my needs.
This is what I have so far for the form:
<form method="post" action="send_email.asp" onsubmit="return Form_Validator (this)"
name="form2" id="form2" >
<tr>
<td>Product Type: <br />
<input name="ProductType" type="radio" value="Network" tabindex="1"
onclick="setVisibility('NetworkProducts','inline'); setVisibility
('CPEProducts','none');"/>
Network<br />
<input name="ProductType" type="radio" value="Network and CPE" tabindex="2"
onclick="setVisibility('NetworkProducts','inline'); setVisibility
('CPEProducts','inline');"/>
Network and CPE<br />
<input name="ProductType" type="radio" value="CPE Only" tabindex="3"
onclick="setVisibility('NetworkProducts','none'); setVisibility
('CPEProducts','inline');"/>
CPE Only<br/>
<div id="NetworkProducts" align="left">
Network Product Sold <span class="style2">*</span>
<select name="NetProductSold" size="3" multiple="MULTIPLE"
id="NetProductSold" onchange="showothernet(this.form);">
<option value="Prod1">Prod1</option>
<option value="Prod2">Prod2</option>
<option value="Prod3">Prod3</option>
<option value="Prod4">Prod4</option>
<option value="Prod5">Prod5</option>
<option value="Prod6">Prod6</option>
<option value="Prod7">Prod7</option>
<option value="Prod8">Prod8</option>
<option value="Prod9">Prod9</option>
<option value="Prod10">Prod10</option>
<option value="Other">Other</option>
</select>
</div>
<blockquote>
<div id="OtherNetworkProducts" align="left" >
If other, Please specify: <input name="OtherNetProductSold"
type="text" id="OtherNetProductSold" size="50" onblur="setFocus(this);" >
</div>
</blockquote>
<div id="CPEProducts" align="left">
CPE Product Sold <span class="style2">*</span>
<select name="CPEProductSold" size="3" multiple="multiple"
id="CPEProductSold" onchange="showothernet(this.form);" >
<option value="CPE1">CPE1</option>
<option value="CPE2">CPE2</option>
<option value="CPE3">CPE3</option>
<option value="CPE4">CPE4</option>
<option value="CPE5">CPE5</option>
<option value="CPE6">CPE6</option>
<option value="CPE7">CPE7</option>
<option value="Other">Other</option>
</select>
</div>
<blockquote>
<div id="OtherCPEProducts">
If other, Please specify: <input name="OtherCPEProductSold" type="text"
id="OtherCPEProductSold" size="50" >
</div>
</blockquote>
</form>
And this is what I have for the javascript:
<script Language="JavaScript"><!--
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
function showothernet (form)
{
for (var j = 0; j < form.NetProductSold.length; j++)
{
if (form.NetProductSold.options[j].selected)
{
if(form.NetProductSold.options[j].value == "Other")
{
setVisibility('OtherNetworkProducts','inline');
}
else
{
setVisibility('OtherNetworkProducts','none');
}
}
}
for (var i = 0; i < form.CPEProductSold.length; i++)
{
if (form.CPEProductSold.options[i].selected)
{
if(form.CPEProductSold.options[i].value == "Other")
{
setVisibility('OtherCPEProducts','inline');
}
else
{
setVisibility('OtherCPEProducts','none');
}
}
}
}
function setFocus(form)
{
var process = form.OtherNetProductSold.value;
form.NetProductSold.options[10].value = process
alert (form.NetProductSold.options[10].value);
}
//--></script>
The form functions the way I want it to, when the user clicks "Network" or "Network and CPE" and list appears for the Network products, then if the "other" option is one of the selected options, the text field for other is displayed.
The problem is how to replace that "other" value from the multiple selection with the input from the text field.
PLEASE HELP!
Thanks in advance!
The text showed to the user is between <option> and </option>. So, set it as .innerHTML instead (it changes the text between):
form.NetProductSold.options[10].innerHTML = process;
Secondly, you have:
<input name="OtherNetProductSold"
type="text" id="OtherNetProductSold" size="50" onblur="setFocus(this);" >
while your setFocus accepts a form. So, setFocus(this.form) you should use.
http://jsfiddle.net/pimvdb/nMkvb/
Related
I am trying to remove custom validations in HTML that occur with "required" attribute in the form. I do want the validations but I want to introduce "alerts" for the inputs.
<form>
<div>
<span>Search_word</span>
<input type="text" required></input>
</div>
<div>
<span>Frequency</span>
<select required>
<option disabled selected value></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div>
<button>Search</button>
</div>
</form>
Even when I am setting alerts with onlick() method on both, they are coming up twice. If I set up alert only on form, then It's not coming up for the dropdown option. And I am not able to figure out how to remove the custom validations. Is there a way I can turn them to alerts?
You can use classes on HTML to listen the event on JavaScript:
HTML:
<form>
<div>
<span>Search_word</span>
<input type="text" class="required"></input>
</div>
<div>
<span>Frequency</span>
<select class="required">
<option disabled selected value></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div>
<button id="search">Search</button>
</div>
</form>
JavaScript:
document.getElementById('search').onclick = function changeContent() {
var requireds = document.getElementsByClassName('required');
var error = 0;
for (var i = 0, len = requireds.length; i < len; i++) {
if (requireds[i].value == "") {
var error = error + 1;
}
}
if (error > 0){
if (error == 1) {
alert("There is a required field to inform");
} else {
alert("There are requireds fields to inform");
}
} else {
// ....
}
}
EDIT
In order to keep the HTML validation and introduce a alert message, you can use in HTML:
<form>
<div>
<span>Search_word</span>
<input type="text" required oninvalid="this.setCustomValidity('Enter the search word here'); alert('You have to enter a search word');"
oninput="this.setCustomValidity('')">
</div>
<div>
<span>Frequency</span>
<select class="required" required oninvalid="this.setCustomValidity('Select a frequency'); alert('You have to select a frequency');"
oninput="this.setCustomValidity('')">
<option disabled selected value></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div>
<button id="search">Search</button>
</div>
</form>
Here is my script, what my goal is if other is selected in select, the other text input beside it will be enabled, this is what i've got so far, any approach will be really appreciated, I have 4 questions like this and I want it to be modular, best approach for doing my function to be reuseable.. How do I properly do this without any problem posting my data as 2 name inputs will generate 2 post variables in php.. T_T
<script type="text/javascript" charset="utf-8">
function validate()
{
var ddl = document.getElementById("cause_pain");
var selectedValue = ddl.options[ddl.selectedIndex].value;
if (selectedValue == "OTHER")
{
document.getElementsByClassName("causepain")[0].removeAttribute("name");
document.getElementsByClassName("causepain1")[0].removeAttribute("disabled");
}
}
</script>
<form action="test.php" method="GET">
<select class="select causepain" id="cause_pain" name="cause_pain" onchange="validate()">
<option value="" selected="selected">Select Cause of Pain</option>
<option value="ARTHRITIS">ARTHRITIS</option>
<option value="RHEUMATISM">RHEUMATISM</option>
<option value="OLD AGE">OLD AGE</option>
<option value="ACTIVE LIFESTYLE WHEN YOUNGER">ACTIVE LIFESTYLE WHEN YOUNGER</option>
<option value="OTHER">OTHER</option>
</select>
<input class="causepain1" type="text" id="cause_pain" name="cause_pain" size="40" onkeyup="clean('this.id')" disabled>
<input type="submit" id="submit"/>
</form>
This method is reusable and pretty straight forward. Using data attributes, you could specify the element that needs to be shown on the specific option element. Also before showing any input element hide the elements that were attributed to the previous selection.
Example:
<form action="test.php" method="GET">
<select class="select causepain" id="cause_pain" name="cause_pain">
<option value="" selected="selected">Select Cause of Pain</option>
<option value="ARTHRITIS">ARTHRITIS</option>
<option value="RHEUMATISM">RHEUMATISM</option>
<option value="OLD AGE">OLD AGE</option>
<option value="ACTIVE LIFESTYLE WHEN YOUNGER">ACTIVE LIFESTYLE WHEN YOUNGER</option>
<option value="OTHER" data-show="cause_pain_other">OTHER</option>
</select>
<input class="causepain1" type="text" id="cause_pain_other" name="cause_pain" size="40"
onkeyup="clean('this.id')" disabled style="display: none;">
<input type="submit" id="submit"/>
</form>
<script type="text/javascript" charset="utf-8">
var selectedOpt;
function selectionChanged(e) {
if (selectedOpt && selectedOpt.dataset.show) {
var showEl = document.getElementById(selectedOpt.dataset.show);
showEl.disabled = true;
showEl.style.display = 'none';
}
selectedOpt = this.querySelector('[value="'+e.target.value+'"]');
if (selectedOpt.dataset.show) {
var showEl = document.getElementById(selectedOpt.dataset.show);
showEl.disabled = false;
showEl.style.display = 'block';
}
}
document.querySelector('select').addEventListener('change', selectionChanged);
</script>
Your selectedOpt should be an object if you're using multiple selects on the same page and then just add the element to the object with the id as an index:
var selectedOpt = {};
...
selectedOpt[this.id] = this.querySelector('[value="'+e.target.value+'"]');
I have these conditional drop lists behaving on screen as expected, but I cannot get the selected values from the drop downs to output in the HTML form (I can if I don't include the javascript). Only the text inputs are outputing as per the xml result below (Company & Add1). I want the xml to contain the Location from the first drop down, and the selected city from the conditional 2nd drop down.
<body>
<form action="http://TESTPLANETPRESS:8080/ObtainQuote" method="GET" >
<fieldset>
<legend>Location</legend>
<select id="country" class="source" onchange="updateSelectTarget()">
<option value="England">England</option>
<option value="France">France</option>
<option value="Germany">Germany</option>
</select>
<select id="England">
<option value="Birmingham">Birmingham</option>
<option value="Liverpool">Liverpool</option>
<option value="London">London</option>
</select>
<select id="France" class="hidden">
<option value="Lyon">Lyon</option>
<option value="Marseille">Marseille</option>
<option value="Paris">Paris</option>
</select>
<select id="Germany" class="hidden">
<option value="Berlin">Berlin</option>
<option value="Hamburg">Hamburg</option>
<option value="Munich">Munich</option>
</select>
<label for="Company">Company:</label><input type="text" name="Company" value="Google">
<label for="Add1">Add1:</label><input type="text" name="Add1" value="1 Nowhere Street">
</fieldset>
<input type="submit" value="Submit">
</form>
<script>
function updateSelectTarget () {
var id = this.options[this.selectedIndex].value;
var targets = this.parentNode.getElementsByTagName("select");
var len = targets.length;
for (var i = len - 1; i > 0; --i) {
if (targets[i].id == id) {
targets[i].style.display = "block";
}
else {
targets[i].style.display = "none";
}
}
}
function initChangeHandler () {
var el = document.getElementById("country");
el.onchange = updateSelectTarget;
el.onchange();
}
window.onload = initChangeHandler;
</script>
</body>
Current XML result, (Does not include the results from the two drop downs).
<?xml version="1.0"?>
-<request type="GET">
<paths count="0"/>
-<values count="2">
<Company>Google</Company>
<Add1>1 Nowhere Street</Add1>
</values>
Do you want the value attribute or the text? Based on Get selected value in dropdown list using JavaScript? (similar to the first part), .value should work for the value attribute and .text for the text that is selected.
Also, please make two different questions instead of one question with 2 questions nested inside.
I am building a tool which on a selection of a value from a dropdown box populates the other fields.So if suppose (a) is selected fileds 2 3 and 4 are displayed in a form but if(b) is selected fields 2 3 4 as well as additional fields 5 and 6 are added as well.Right now I am working around a way to have two forms one with fields 2 3 and 4 and other with 2 3 4 5 and 6.Depending on selection of values from dropdown list(a or b) either forms are shown/hidden.
But it doesn't do as expected.
The html is
<html>
<head>
<title>My Page</title>
</head>
<body>
<center><h1>URL Builder</h1></center>
<div align="center">
<select id ="Type1" name="Aoldropdown">
<option value="Fixed">Fixed Ad Units</option>
<option value="Scrolled">Scrolled Ad Units</option>
<option value="Custom">Custom Ad Units</option>
</select>
<form name="Aolform" id ="aol1" action="/URLBuilder/URLRetriever" method="GET">
<select name="Sizedropdown">
<option value="300x1050">300x1050</option>
<option value="300x600">300x600</option>
<option value="300x250">300x250</option>
<option value="728x90">728x90</option>
<option value="970x250">970x250</option>
<option value="320x50">320x50</option>
<option value="768x90">768x90</option>
<option value="1024x90">1024x90</option>
</select>
<br></br>
Base URL:<input type="text" name="baseURL"><br>
Title Number:<input type="text" name="titleNo"><br>
Placement ID: <input type="text" name="placementId"><br>
Flight ID: <input type="text" name="flightId"><br>
<input type="submit" value="Retrieve URL">
<!-- input type = "submit" Value ="Select URL Type"-->
</div>
</form>
<form name="Aolform2" id ="aol2" action="/URLBuilder/URLRetriever" method="GET">
<select name="Sizedropdown">
<option value="300x1050">300x1050</option>
<option value="300x600">300x600</option>
<option value="300x250">300x250</option>
<option value="728x90">728x90</option>
<option value="970x250">970x250</option>
<option value="320x50">320x50</option>
<option value="768x90">768x90</option>
<option value="1024x90">1024x90</option>
</select>
<br></br>
Placement ID: <input type="text" name="placementId"><br>
Flight ID: <input type="text" name="flightId"><br>
<input type="submit" value="Retrieve URL">
<!-- input type = "submit" Value ="Select URL Type"-->
</div>
</form>
<script type ="text/javascript">
var forms = document.forms['Aolform'];
//console.log(forms);
//console.log(forms.elements);
document.getElementById("Type1").addEventListener("onchange",onDropDownChange,true);
if(document.getElementById("Type1").value =='Custom'){
document.getElementById('aol1').style.visiblity='visible';
document.getElementById('aol2').style.visibility='hidden';
}
else
{
document.getElementById('aol2').style.visibility='visible';
document.getElementById('aol1').style.visibility='hidden';
}
</script>
</body>
</html>
Please help me fix this.
IS THERE ANY OTHER WAY I CAN DO IT.
Thanks
Swaraj
Check out this fiddle. I made a few changes, first instead of onchange just use change. Also you are referencing a non-existent function onDropDownChange(), so I have put your condition inside of that:
function onDropDownChange() {
if (document.getElementById("Type1").value == 'Custom') {
document.getElementById('aol1').style.display = 'none';
document.getElementById('aol2').style.display = 'block';
} else {
document.getElementById('aol2').style.display = 'none';
document.getElementById('aol1').style.display = 'block';
}
}
I also changed the function to use style.display instead of style.visibility so that you don't have a gap above the second form when it displays.
Yes, there are lots of ways to do what you want, but I'm going to give you a straight answer based on what you have done so far. Your script is incorrect because the conditional is not triggered by the event OnChange. Try it like this:
document.getElementById("Type1").onchange = function() {
if(document.getElementById("Type1").value =='Custom'){
document.getElementById('aol1').style.visiblity='visible';
document.getElementById('aol2').style.visibility='hidden';
}
else
{
document.getElementById('aol2').style.visibility='visible';
document.getElementById('aol1').style.visibility='hidden';
}
}
But you should check the behaviour of your "if" condition to see if that's what you really want to do.
I have a sample site here.
In the bottom of the document, there's a section labeled 'Potential Gen Ed TOC'.
If you open the Accordion labeled Composition, you'll see dropdown menus on the right.
As you can see, in this JavaScript, it was based on whether or not a checkbox was activated. Then the 'Potential Gen Ed TOC' would display a number based on the assigned value.
$(function($) {
var sum = 0;
$('#CourseMenu :checkbox').click(function() {
sum = 0;
$('#CourseMenu :checkbox:checked').each(function(idx, elm) {
sum += parseInt(elm.value, 10);
});
$('#total_potential').html(sum);
});
});
As you continue to check boxes throughout the different courses, a sum would be displayed.
What' I'm trying to do now, is eliminate the checkbox trigger in the JS. I've replaced them with dropdown menus that say, "Credits - Select Credit".
Whenever someone selects a value, the "Potential Gen Ed TOC" slowly increases based on that value.
I would assume that all I have to do is assign value="Any Number" and the JavaScript would pick up on that.
In the JavaScript (above), I'm having trouble accounting for pulling these values from the dropdown menus. As you can see the JS is based on checked boxes.
Once I'm able to pull values from the dropdown menu, I want to have these values add up, but never display a number higher than 72, no matter how many total transfer credits are selected.
Does that make sense?
Edit: Here is some markup to understand where I'm trying to pull the values from (dropdown menu)...
<fieldset name = Comunication>
<legend>Transfer Course Information</legend>
<label for="School Int.">School Int.</label>
<input name="School Int." type="text" size="6" maxlength="6" />
<label for="ID">ID</label>
<input name="ID" type="text" id="ID" size="8" />
<label for="Name">Name</label>
<input name="Name" type="text" id="Name" size="25" />
<label for="Grade">Grade</label>
<input name="Grade" type="text" id="Grade" size="2" />
<label for="COM1"></label>
<form id="form2" name="form2" method="post" action="">
<label for="Credits">Credits</label>
<select name="Credits" id="Credits">
<option value="0">Select Credit</option>
<option value="0.67">1 QtrCr.</option>
<option value="1.33">2 QtrCr.</option>
<option value="2.00">3 QtrCr.</option>
<option value="2.67">4 QtrCr.</option>
<option value="3.33">5 QtrCr.</option>
<option value="4.00">6 QtrCr.</option>
<option value="4.67">7 QtrCr.</option>
<option value="5.33">8 QrtCr.</option>
<option value="6.00">9 QtrCr.</option>
<option value="6.67">10 QtrCr.</option>
<option value="1">1 SemCr.</option>
<option value="2">2 SemCr. </option>
<option value="3">3 SemCr.</option>
<option value="4">4 SemCr.</option>
<option value="5">5 SemCr.</option>
<option value="6">6 SemCr.</option>
<option value="7">7 SemCr. </option>
<option value="8">8 SemCr.</option>
<option value="9">9 SemCr.</option>
<option value="10">10 SemCr.</option>
</select>
</form>
Transferrable
<input name="COM105" type="checkbox" id="COM1" />
$('#total_potential').html(Math.min(sum,72));
Will display the sum up to 72 then just 72
Here's how you would do it with select inputs:
$(function($) {
$('#CourseMenu select').change(function() {
var sum = 0;
$('#CourseMenu select').each(function(idx, elm) {
sum += parseInt(elm.value, 10);
});
$('#total_potential').html(Math.min(sum,72));
});
});
Important note
You have some serious issues with your form HTML markup. You have repeating ids in some of your elements which represents invalid markup, id attributes must be unique in a page. Also some of your inputs have the same name, which mean only one value will be submitted with the form. You can use arrays in your inputs name to submit multiple values.
how about:
if (sum <= 72) {
$('#total_potential').html(sum);
} else {
$('#total_potential').html("72");
}