I am trying to put two forms on one page, but to have only one main display area where selections can be made. My page would look something like this:
Sequence ID---Select Processor---Select Reviewer
1-------------------A------------------------B---------------Action Button
2-------------------A------------------------B---------------Action Button
3-------------------A------------------------B---------------Action Button
Where A and B are drown-down lists the users can select.
Then, in a separate part of the page and in a separate form, the A and B which are selected above will be populated in separate text fields. The issue is the way the two forms are process. The "Action Button" above does not use the A and B drop-down information AT ALL. But to make the display more concise, I don't want to make the user scroll to various parts of the page for different actions. Too confusing.
Here is the kicker. The total numbers in the sequence will different depending on the form. So, I need to create an array for the fields. I know that is not making much sense, so I here is my code:
<script type="text/javascript">
function myFunction() {
document.proc[1].value = f.processor[1].value;
document.write.getElementById("proc[1]").value;
document.rev[1].value = f.reviewer[1].value;
document.write.getElementById("rev[1]").value;
document.proc[2].value = f.processor[2].value;
document.write.getElementById("proc[2]").value;
document.rev[2].value = f.reviewer[2].value;
document.write.getElementById("rev[2]").value;
document.proc[3].value = f.processor[3].value;
document.write.getElementById("proc[3]").value;
document.rev[3].value = f.reviewer[3].value;
document.write.getElementById("rev[3]").value;
}
</script>
<form id="form" action="thispage.php" method="post">
<select name="processor[1]" onchange="myFunction(this.document)" id="processor[1]">
<option value="0">--Please select from the list...</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<select name="reviewer[1]" onchange="myFunction(this.document)" id="reviewer[1]">
<option value="0">--Please select from the list...</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<select name="processor[2]" onchange="myFunction(this.document)" id="processor[2]">
<option value="0">--Please select from the list...</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<select name="reviewer[2]" onchange="myFunction(this.document)" id="reviewer[2]">
<option value="0">--Please select from the list...</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<select name="processor[3" onchange="myFunction(this.document)" id="processor[3]">
<option value="0">--Please select from the list...</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<select name="reviewer[3]" onchange="myFunction(this.document)" id="reviewer[3]">
<option value="0">--Please select from the list...</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<input type="submit" name="action" value="Action Button">
</form>
<form id="newForm" action="thisform.php" method="post">
<input type="text" name="proc[1]" id="proc[1]">
<input type="text" name="rev[1]" id="rev[1]">
<input type="text" name="proc[2]" id="proc[2]">
<input type="text" name="rev[2]" id="rev[2]">
<input type="text" name="proc[3]" id="proc[3]">
<input type="text" name="rev[3]" id="rev[3]">
</form>
When I make the selection, the data is not entered into the text fields in the newForm, which is what I would like to happen.
Any advice anyone could offer would be greatly appreciated.
Answer to why the selection doesn't get transferred:
Having <input type="text" name="proc[1]" id="proc[1]"> doesn't allow you to reference it by document.proc[1]. The document object model just isn't that magical.
Other notes:
There are a lot of other issues with this code, e.g. this.document and document.write.getElementById(...).value. You should probably spend some time learning JavaScript and the document object model and finding the approach that's right for this application.
Related
I have a select element like this:
<select name="select">
<option value="opt1">Select One Value Only</option>
<option value="opt2">Type 2</option>
<option value="opt3">Type 3</option>
</select>
and I want user to select a option e.g. opt2, opt3... but opt1,
how to to use html 5 validation to valid the select?
I think the only way to add the validation here is to set the default option value to an empty string and add required attribute to select element. Now you can click on submit button to see the validation:
<form>
<label >Choose an option:</label>
<select name="select" required>
<option value="" disabled selected>Select One Value Only</option>
<option value="opt2">Type 2</option>
<option value="opt3">Type 3</option>
</select>
<input type="submit">
</form>
The issue here is that when you set a value to the default option to something other than empty string the validation infers it as a valid value has been already selected, thus the validation is not triggered at that point.
You can do something like the following:
<select name="select">
<option value="opt1" selected disabled>Select One Value Only</option>
<option value="opt2">Type 2</option>
<option value="opt3">Type 3</option>
</select>
In the snippet above, the opt1 is selected by default. The user can only select opt2 or opt3, but once they do that then they cannot selecte opt1, hope this is the behaviour you're looking for.
Try Using:
<select name="select" required>
<option value="opt1" selected="selected" disabled>Select One Value Only</option>
<option value="opt2">Type 2</option>
<option value="opt3">Type 3</option>
</select>
I have this scenario where i have 4 drop down boxes, where you can choose CM for a carport and a shed, within that carport.
I want to prompt the user with messages/errors in these scenarios:
the shed is chosen to be wider than it is long.
the shed is atleast 60cm smaller than the carports in both width and length
only one of the sheds dimensions being chosen
the form looks like this
<form name="createorder" action="FrontController" method="POST">
<input type="hidden" name="command" value="createorder">
<br>
Length of shed:<br>
<select name="lengthShed">
<option value="0">I do not want a shed</option>
<option value="180">180cm</option>
<option value="210">210cm</option>
<option value="240">240cm</option>
<option value="270">270cm</option>
<option value="300">300cm</option>
<option value="330">330cm</option>
<option value="360">360cm</option>
<option value="390">390cm</option>
<option value="420">420cm</option>
<option value="450">450cm</option>
<option value="480">480cm</option>
<option value="510">510cm</option>
<option value="540">540cm</option>
<option value="570">570cm</option>
<option value="600">600cm</option>
<option value="630">630cm</option>
<option value="660">660cm</option>
<option value="690">690cm</option>
<option value="720">720cm</option>
</select>
<br>
Width of shed:<br>
<select name="widthShed">
<option value="0">I do not want a shed</option>
<option value="18=">180cm</option>
<option value="210">210cm</option>
<option value="240">240cm</option>
<option value="270">270cm</option>
<option value="300">300cm</option>
<option value="330">330cm</option>
<option value="360">360cm</option>
<option value="390">390cm</option>
<option value="420">420cm</option>
<option value="450">450cm</option>
<option value="480">480cm</option>
<option value="510">510cm</option>
<option value="540">540cm</option>
<option value="570">570cm</option>
<option value="600">600cm</option>
<option value="630">630cm</option>
<option value="660">660cm</option>
<option value="690">690cm</option>
</select>
<br>
Width:<br>
<select name="width">
<option value="240">240cm</option>
<option value="270">270cm</option>
<option value="300">300cm</option>
<option value="330">330cm</option>
<option value="360">360cm</option>
<option value="390">390cm</option>
<option value="420">420cm</option>
<option value="450">450cm</option>
<option value="480">480cm</option>
<option value="510">510cm</option>
<option value="540">540cm</option>
<option value="570">570cm</option>
<option value="600">600cm</option>
<option value="630">630cm</option>
<option value="660">660cm</option>
<option value="690">690cm</option>
<option value="720">720cm</option>
<option value="750">750cm</option>
</select>
<br>
Length:<br>
<select name="length">
<option value="240">240cm</option>
<option value="270">270cm</option>
<option value="300">300cm</option>
<option value="330">330cm</option>
<option value="360">360cm</option>
<option value="390">390cm</option>
<option value="420">420cm</option>
<option value="450">450cm</option>
<option value="480">480cm</option>
<option value="510">510cm</option>
<option value="540">540cm</option>
<option value="570">570cm</option>
<option value="600">600cm</option>
<option value="630">630cm</option>
<option value="660">660cm</option>
<option value="690">690cm</option>
<option value="720">720cm</option>
<option value="750">750cm</option>
<option value="780">780cm</option>
</select>
Bind a function to your <select> elements onchange property.
let selects = document.querySelectorAll('select');
for(var i = 0; i < selects.length; i++){
selects[i].onchange = function(){
// Check for your conditions
// If your warning conditions are met, prompt user
}
}
That is, assuming you want the validation to happen when the user changes one of the select's values.
If you want to validate with a button click, you can instead bind the function to the click event of the button.
let button = document.getElementById(buttonID);
button.onclick = function(){
// Check for your conditions
// If conditions are met, prompt user
}
To prompt the user, you can use a simple alert() to which you pass your message. Or make a more elaborate function to do something custom.
As for your conditions, that sounds like commercial math. Might have to split your question in multiple questions here as there are a lot of possible awnsers.
It might be easier for you to add IDs to your selects so you can get them via document.getElementById(idString). You can then get their value through document.getElementById(idString).value. And to use it in math solving, you will need to parse the string that the <select> will return as value, like so parseInt(document.getelementById(idString).value).
Hello Guys Please Help me for this I didn't how I show select title. I want to show above When should we call you?.
please check my code Thanks:-
<select name="myfirst" title="When should we call you?">
<option class="optnoval"></option>
<option value="today" id="df">today</option>
<option value="tommorow" id="df">tommorow</option>
<option value="sunday" id="dfd">sunday</option>
</select>
Please check online codepen code link:- https://codepen.io/anon/pen/EQBbyG
You can add a <label> in your HTML Markup.
<label for="myfirst">When should we call you?</label>
<select name="myfirst" id="myfirst" title="When should we call you?">
<option class="optnoval"></option>
<option value="today" id="df">today</option>
<option value="tommorow" id="df">tommorow</option>
<option value="sunday" id="dfd">sunday</option>
</select>
If you use jQuery you can select all the <select> elements with a title attribute, and copy its value into the first <option>.
$("select[title] option:first-child").text(function(i, oldtext) {
if (oldtext.trim() == '') {
return $(this).parent().attr("title");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="myfirst" title="When should we call you?">
<option class="optnoval"></option>
<option value="today">today</option>
<option value="tommorow">tommorow</option>
<option value="sunday" >sunday</option>
</select>
<select name="mytime" title="What time of day?">
<option class="optnoval"></option>
<option value="morning">Morning</option>
<option value="afternoon" >Afternoon</option>
<option value="evening">Evening</option>
</select>
I have a form with 2 radio buttons and when either button is toggled it shows or hides a certain fieldset. The issue I have is because the fieldset is just hidden so when the form is submitted it still takes the first fieldsets values.
I have setup a fiddle to show how the form changes the fieldsets http://jsfiddle.net/hhdMq/1/
So when I select "Scale B" although you can change the correct values, when the form is submitted it takes the default values of Scale A.
<center>
<input type="radio" name="sellorlet" value="Yes" id="rdYes" checked="yes" />
<label for="rdYes">Scale A</label>
<input type="radio" name="sellorlet" value="No" id="rdNo" />
<label for="rdNo">Scale B</label>
</center>
<fieldset id="sell">
<center>
<select id="pricemin" name="min">
<option value="50000">Min Price</option>
<option value="50000">£50,000</option>
<option value="100000">£100,000</option>
<option value="200000">£200,000</option>
<option value="300000">£300,000</option>
<option value="400000">£400,000</option>
<option value="500000">£500,000</option>
<option value="600000">£600,000</option>
<option value="700000">£700,000</option>
<option value="800000">£800,000</option>
<option value="900000">£900,000</option>
<option value="1000000">£1,000,000</option>
<option value="1250000">£1,250,000</option>
<option value="1500000">£1,500,000</option>
<option value="1750000">£1,750,000</option>
<option value="2000000">£2,000,000</option>
<option value="3000000">£3,000,000</option>
</select>
<select id="pricemax" name="max">
<option value="5000000">Max Price</option>
<option value="100000">£100,000</option>
<option value="200000">£200,000</option>
<option value="300000">£300,000</option>
<option value="400000">£400,000</option>
<option value="500000">£500,000</option>
<option value="600000">£600,000</option>
<option value="700000">£700,000</option>
<option value="800000">£800,000</option>
<option value="900000">£900,000</option>
<option value="1000000">£1,000,000</option>
<option value="1250000">£1,250,000</option>
<option value="1500000">£1,500,000</option>
<option value="1750000">£1,750,000</option>
<option value="2000000">£2,000,000</option>
<option value="3000000">£3,000,000</option>
<option value="4000000">£4,000,000</option>
<option value="5000000">£5,000,000</option>
</select>
</center>
</fieldset>
<fieldset id="buy" style="display:none;">
<center>
<select id="lpricemin" name="min">
<option value="500">Min Price</option>
<option value="500">£500</option>
<option value="600">£600</option>
<option value="700">£700</option>
<option value="800">£800</option>
<option value="900">£900</option>
<option value="1000">£1000</option>
<option value="1150">£1150</option>
<option value="1250">£1250</option>
<option value="1500">£1500</option>
<option value="2000">£2000</option>
<option value="2500">£2500</option>
<option value="3000">£3000</option>
<option value="4000">£4000</option>
<option value="5000">£5000</option>
</select>
<select id="lpricemax" name="max">
<option value="5000">Max Price</option>
<option value="600">£600</option>
<option value="700">£700</option>
<option value="800">£800</option>
<option value="900">£900</option>
<option value="1000">£1000</option>
<option value="1150">£1150</option>
<option value="1250">£1250</option>
<option value="1500">£1500</option>
<option value="2000">£2000</option>
<option value="2500">£2500</option>
<option value="3000">£3000</option>
<option value="4000">£4000</option>
<option value="5000">£5000</option>
</select>
</center>
</fieldset>
and the jquery used:
$("input[name='sellorlet']").change(function () {
$("#sell").toggle(this.value == "Yes");
$("#let").toggle(this.value == "No");
});
My question is, how can I completely disable the first fieldset if Scale B is selected and likewise when Scale A is selected it will disable the second fieldset?
Many thanks
When submitting a form, you cannot have two inputs, selects, or textareas with the same name in the same form. Doing so will cause confusion and probably end up the wrong info being submitted. There are two ways you can fix this.
Method 1:
Change the
<select id="lpricemin" name="min">
<select id="lpricemin" name="lmin">
to
<select id="lpricemax" name="max">
<select id="lpricemax" name="lmax"> respectively.
This will allow you to handle the data from lmin and lmax and ensure you get the info from the second fieldset.
Method 2:
Put the second fieldset in a different form. Then just change the jQuery to show the forms instead of the fieldsets.
Changed the radio buttons now to a tabbed design so the form can be separated correctly. If anyone would like to know how the tabs are done they are here http://cssdeck.com/labs/fancy-tabbed-navigation-with-css3-and-jquery
Method 3 would be to change the switch the content of your select through Javascript rather than toggling through visibility. You can do that through:
function setMaxScale()
{
document.getElementById().innerHTML = "<option value="50000">Min Price</option>\
<option value="50000">£50,000</option>\
<option value="100000">£100,000</option>\
<option value="200000">£200,000</option>\
<option value="300000">£300,000</option>...";
}
An other clean solution would be to create your scales dynamically with a loop.
I'm new posting here, have visited several times over the years to read every ones ideas.
My issue is I have a form with 2 select boxes, second one populated with values upon selection in the first. The second holds a url value which you got to upon submit.
This function works perfectly using the onchange but on submit only the first of the second select list urls work. I can swap them but only the first works, all the others only pass the primary url followed by a crosshatch '#'.
<script>
$(document).ready(function($){
$("#category").change(function() {
$('select[name="product"]').removeAttr("name").hide();
$("#" + $(this).val()).show().attr("name", "product");
});
/* ' This works on all
$(".product").change(function() {
document.location = $(this).val();
});
*/
/* this only passes url on first product option list else passes opening url + #*/
$('#discover').submit(function() {
document.location = $(".product").val();
return false;
});
});
</script>
<div id="discover-box">
<form id="discover" method="post">
<fieldset>
<p class="category">
<label class="title">Category:</label>
<select id="category" name="category">
<option value="#" selected="selected">Choose category</option>
<option value="accommodation">Accommodation</option>
<option value="food">Food</option>
<option value="explore">Explore</option>
</select>
<p><label>Sub-Category:</label>
<select id="accommodation" name="product" class="product">
<option value="#" selected="selected">Choose sub-category</option>
<option value="accommodation_category.asp?o=1&c=1">Motels</option>
<option value="accommodation_category.asp?o=2&c=2">Camping, Caravan & Holiday Parks</option>
<option value="accommodation_category.asp?o=3&c=3">B&B, Self-Contained Houses & Cottages</option>
<option value="accommodation_category.asp?o=4&c=4">Hotels</option>
<option value="accommodation_category.asp?o=5&c=5">Backpackers & Group Accommodation</option>
<option value="accommodation_category.asp?o=6&c=6">National Parks</option>
</select>
<select id="food" style="display:none" name="product" class="product">
<option value="#" selected="selected">Choose sub-category</option>
<option value="food_wine_category.asp?o=1&t=1&c=1">Restaurants & Cafes</option>
<option value="food_wine_category.asp?o=2&t=1&c=2">Pubs</option>
<option value="food_wine_category.asp?o=3&t=1&c=3">Bakeries & Takeaway</option>
<option value="food_wine_category.asp?o=4&t=1&c=4">Local Produce</option>
<option value="food_wine_category.asp?o=5&t=2&c=1">Mount Gambier Wine Region</option>
<option value="food_wine_category.asp?o=5&t=2&c=2">Other Limestone Coast Wine Regions</option>
</select>
<select id="explore" style="display:none" name="product" class="product">
<option value="#" selected="selected">Choose sub-category</option>
<option value="explore_category.asp?o=1">Top 10</option>
<option value="explore_category.asp?o=2">Arts, Crafts, Galleries & Museums</option>
<option value="explore_category.asp?o=3">Heritage, Antiques & Collectables</option>
<option value="explore_category.asp?o=4">Family Fun</option>
<option value="explore_category.asp?o=5">Caves & Sinkholes</option>
<option value="explore_category.asp?o=6">Parks & Gardens</option>
<option value="explore_category.asp?o=7">Walks & Drives</option>
<option value="explore_category.asp?o=8">Kanawinka Geotrail</option>
<option value="explore_category.asp?o=9">Retail</option>
<option value="explore_category.asp?o=10">Recreation, Leisure & Adventure</option>
</select>
</p>
<p class="buttons">
<input type="image" src="images/submit-red.png" Value="submit">
</p>
</fieldset>
</form>
</div>
because $(".product").val(); will find first occurrence of DOM having class product so in any case it will fetch first one... u can do this using
$('#discover').submit(function() {
document.location = $('select[name="product"]').val();
return false;
});
Open Fiddler (fiddler2.com) and watch the post go past. I find that generally when more than one control on a page uses the same name, the browser actually passes all of them, but the server-side framework expecting each post parameter to be unique, ignores all but the last one.
when you submit , you have only one select box with attribute name ,so you can select the selected value by that attribute
$('#discover').submit(function() {
document.location = $('select[name="product"]').val();
return false;
});