Html/Javascript form calculation and validation in new page - javascript

I'm working on a website project and really need help as I'm new to all this. I'm basically given values to every option in the drop down menu's and make them add together which I've managed. But then I want to the total value from the menus to then be the range for a pseudo random to be a generated and added to the age I input.
When I hit submit I'd like it to calculate all that and display the result on a new page. I want to be able to do all this within javascript and html.
Any help would be greatly appreciated! My coding is below. Thanks so much!
<body>
<form id="form1" action="" method="post" onsubmit="return calcTotal(this)">
<select name=select1>
<option selected="selected" value="0">Chinese Zodiac</option>
<option value="3">Rat</option>
<option value="3">Ox</option>
<option value="4">Tiger</option>
<option value="2">Rabbit</option>
<option value="4">Dragon</option>
<option value="5">Snake</option>
<option value="3">Horse</option>
<option value="3">Sheep</option>
<option value="4">Monkey</option>
<option value="5">Rooster</option>
<option value="3">Dog</option>
<option value="3">Pig</option>
</select>
</select>
<br />
<select name=select2>
<option selected="selected" value="0">Star Sign</option>
<option value="2">Aries</option>
<option value="4">Taurus</option>
<option value="3">Gemini</option>
<option value="4">Cancer</option>
<option value="3">Leo</option>
<option value="2">Virgo</option>
<option value="2">Libra</option>
<option value="3">Scorpio</option>
<option value="2">Sagittarius</option>
<option value="4">Capricorn</option>
<option value="2">Aquarius</option>
<option value="3">Pisces</option>
</select>
<br />
<select name=select3>
<option selected="selected" value="0">Blood Type</option>
<option value="3">O</option>
<option value="2">A</option>
<option value="1">B</option>
<option value="3">AB</option>
</select>
<br />
<select name=select4>
<option selected="selected" value="0">Favourite Colour</option>
<option value="3">Black</option>
<option value="3">Blue</option>
<option value="2">Brown</option>
<option value="2">Green</option>
<option value="3">Orange</option>
<option value="3">Pink</option>
<option value="2">Purple</option>
<option value="4">Red</option>
<option value="2">Yellow</option>
<option value="2">White</option>
<option value="5">Other</option>
</select>
<br />
Age<input name="" type="number" value="" />
<br />
<input name="" type="submit" value="Total" />
<span>Total: </span><span id="result"></span>
</form>
<script type="text/javascript">
function calcTotal(oForm){
var sum = 0;
for(i=0; i < oSels.length; i++){
sum += new Number(oSels[i].value);
}
document.getElementById('result').innerHTML = sum;
return false;
}
window.onload=function(){
oSels = document.getElementById('form1').getElementsByTagName('select');
for(i=0; i < oSels.length; i++){
oSels[i].onchange=function(){
document.getElementById('result').innerHTML = '';
}
}
}
</script>

I played with your code. I don't now if it's someting like that that you wanted but here is an example of random score.
It now use the age to generate a value.
Take a look if you like it at my codepen.
I changed the age input:
Age<input id="age" name="" type="number" value="" />
I also added a new function to generate random number between min-max:
function getRandomInt (min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
And modified how the sum is calculated:
var age = document.getElementById('age').value;
sum = parseInt(age) + parseInt(getRandomInt(sum-(age / 4),sum+(age / 4)));
//Add some random. The more you are older, the more random it is.
You can do a lot of different generated sum. If you want less modifications, we also can take the last digit of the age to get the min/max value generated...
Edit:
To help you share variables between pages, Look at this question.

Adding this as an answer as the submitter considers it a good idea:
Put the result from all your maths into hidden fields. Then when you submit the form, the values will be passed along.
You don't need to do anything special really. Just add fields like this:
<input type="hidden" value="[yourValue]" name="fieldName" id="fieldId" />
For the yourValue part, simply insert your caclulated value from the JavaScript:
document.getElementById("fieldId").value = calculatedValue;
Since it's all part of the same form that you're submitting anyway, they will all be past along. You can retrieve the fields on the receiving page as normal.
I downloaded and edited your entire code block. I changed a couple of things.
1. You don't need the onsubmit on your form. You need a call the JavaScript function on a Total button. The submit button is added to submit the form when the user is done.
2. A hidden field to hold your result is added to the form.
3. The function where you do your calculation has an addition to send the calulated total to the new hidden field.
4. You need to add something to the ACTION, so it knows where to submit the form. You can also remove the ALERT. I just added that to be sure it worked right.
I've run and tested this, and it works exactly as expected. This is what the edited code looks like:
<body>
<form id="form1" action="" method="post">
<select name=select1>
<option selected="selected" value="0">Chinese Zodiac</option>
<option value="3">Rat</option>
<option value="3">Ox</option>
<option value="4">Tiger</option>
<option value="2">Rabbit</option>
<option value="4">Dragon</option>
<option value="5">Snake</option>
<option value="3">Horse</option>
<option value="3">Sheep</option>
<option value="4">Monkey</option>
<option value="5">Rooster</option>
<option value="3">Dog</option>
<option value="3">Pig</option>
</select>
</select>
<br />
<select name=select2>
<option selected="selected" value="0">Star Sign</option>
<option value="2">Aries</option>
<option value="4">Taurus</option>
<option value="3">Gemini</option>
<option value="4">Cancer</option>
<option value="3">Leo</option>
<option value="2">Virgo</option>
<option value="2">Libra</option>
<option value="3">Scorpio</option>
<option value="2">Sagittarius</option>
<option value="4">Capricorn</option>
<option value="2">Aquarius</option>
<option value="3">Pisces</option>
</select>
<br />
<select name=select3>
<option selected="selected" value="0">Blood Type</option>
<option value="3">O</option>
<option value="2">A</option>
<option value="1">B</option>
<option value="3">AB</option>
</select>
<br />
<select name=select4>
<option selected="selected" value="0">Favourite Colour</option>
<option value="3">Black</option>
<option value="3">Blue</option>
<option value="2">Brown</option>
<option value="2">Green</option>
<option value="3">Orange</option>
<option value="3">Pink</option>
<option value="2">Purple</option>
<option value="4">Red</option>
<option value="2">Yellow</option>
<option value="2">White</option>
<option value="5">Other</option>
</select>
<br />
Age<input name="" type="number" value="" />
<br />
<input name="" type="button" value="Total" onclick="calcTotal();" />
<input name="submit" type="submit" value="Submit" />
<span>Total: </span><span id="result"></span>
<input type="hidden" value="0" name="resultIs" id="resultIs" />
</form>
<script type="text/javascript">
function calcTotal(oForm) {
var sum = 0;
for (i = 0; i < oSels.length; i++) {
sum += new Number(oSels[i].value);
}
//This is what you are using to display the result to your user.
document.getElementById('result').innerHTML = sum;
//This will add the value of the result to a hidden field I added to the form. When you submit it, just request the value of "resultIs"
document.getElementById("resultIs").value = sum;
alert(sum);
return false;
}
//I really don't even see that this is needed. Your form doesn't need to be cleared onLoad.
window.onload = function() {
oSels = document.getElementById('form1').getElementsByTagName('select');
for (i = 0; i < oSels.length; i++) {
oSels[i].onchange = function() {
document.getElementById('result').innerHTML = '';
}
}
}
</script>

Related

how to get value from datalist

I need to get the value from the datalist?
Currently I get defined for the 2 parameter yoursign and friendsign
for example if I choose Aries for yoursign and Leo for friendSign I need to get both and pass to the function
<body>
<form id="Match"></form>
<label for="yourSignList">your sign:</label><br /><input list="yourSignList" name="sign1" required><br />
<datalist id="yourSignList">
<option value="Aries">
<option value="taurus">
<option value="Gemini">
<option value="Cancer">
<option value="Leo">
<option value="Virgo">
<option value="Libra">
<option value="Scorpio">
<option value="Saggitarius">
<option value="Capricon">
<option value="Aquarius">
<option value="Pisces">
</datalist>
<label for="friendSignList">your friend sign:</label><br /><input list="friendSignList" name="sign2" required><br />
<datalist id="friendSignList">
<option value="Aries">
<option value="taurus">
<option value="Gemini">
<option value="Cancer">
<option value="Leo">
<option value="Virgo">
<option value="Libra">
<option value="Scorpio">
<option value="Saggitarius">
<option value="Capricon">
<option value="Aquarius">
<option value="Pisces">
</datalist>
<button type='submit' onclick="Match()">Done</button><br>
<label for="output">התאמה: </label><output id='output'></output>
<form />
<script>
function Match() {
const signYours = $("yourSignList").val();
const signFriend = $("friendSignList").val();
$("#output").val(answer(signYours, signFriend));
}
try this code may be working like
$("#friendSignList").find("option").each(function(e,i){
console.log( e, i );
});
this works for me:
function Match() {
var signYours = $("input[name='sign1']").val();
var signFriend = $("input[name='sign2']").val();
$("#output").val(answer(signYours, signFriend));
}

Javascript detect total of multiple select option to be sum up

I have a onchange multiple select option that can select multiple course then display the total price in other input values
However how to get the total price if I have another multiple select option for months to be sum up in that input
Each months's price is same
course select option code
<select class="form-control" onchange="selectFunction(event)"
name="pay_course[]" required="" multiple>
<option data-price="1111" value="courseId1">English</option>
<option data-price="2222" value="courseId2">Math</option>
</select>
month select option code
<select class="form-control" multiple="multiple" >
<option selected="selected" value="" name="pay_fee_month[]" disabled="true">Select Month...</option>
<option value='Janaury'>Janaury</option>
<option value='February'>February</option>
<option value='March'>March</option>
<option value='April'>April</option>
<option value='May'>May</option>
<option value='June'>June</option>
<option value='July'>July</option>
<option value='August'>August</option>
<option value='September'>September</option>
<option value='October'>October</option>
<option value='November'>November</option>
<option value='December'>December</option>
</select>
Input to be display the total
<input type="number" value="" id="money" class="form-control">
Script
function selectFunction(e) {
var type_id = $('select option:selected').map(function() {
return $(this).attr('data-price');
})
.get().map(parseFloat).reduce(function(a, b) {
return a + b
});
console.log(type_id)
$("#money").val( type_id );
}
I would do it another way... Completely.
What you wish to have is the total price based on selected courses multiplied by the amount of selected months.
Below, is a script that does just that... On change of both selects.
$("#courses, #months").on("change", function(){
// Get the total price of the selected courses.
var price = 0;
$("#courses").find("option:selected").each(function(){
price += $(this).data("price");
});
console.log(price);
// Get the amount of selected months.
var monthCount = $("#months").find("option:selected").length;
console.log(monthCount);
// Multiply.
var total = monthCount * price;
$("#money").val(total);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" id="courses" name="pay_course[]" required="" multiple>
<option data-price="1111" value="courseId1">English</option>
<option data-price="2222" value="courseId2">Math</option>
</select>
<select class="form-control" id="months" multiple="multiple" >
<option value="" name="pay_fee_month[]" disabled>Select Month...</option>
<option value='January'>January</option>
<option value='February'>February</option>
<option value='March'>March</option>
<option value='April'>April</option>
<option value='May'>May</option>
<option value='June'>June</option>
<option value='July'>July</option>
<option value='August'>August</option>
<option value='September'>September</option>
<option value='October'>October</option>
<option value='November'>November</option>
<option value='December'>December</option>
</select>
<input type="number" value="" id="money" class="form-control">
Notice that I removed the inline onchange handler and used jQuery .on()
I also removed the selected="selected" on the first month option since it also is disabled.

Mandatory fields and selecting drop down list values

Basically, I have two fields, one a selection (drop down) list and the other an input textbox, both different question's.
My question is, if I choose only one value in the selection list (first question), the textbox (second question) must be 6 characters or numbers in length. Otherwise, the other values chosen in the selection list can be 10 characters long in the textbox.
How can I write this in Javascript form without the use of regex and within ?
I have written parts of this script but I would like to see how others can write it. My sole problem is to get the rest of the other values to be 10 characters long.
I'd also like to add that the first question does not need to be a selection list. I made it this way for the html to be more presentable and organised.
This is my script (so far):
function imposeMaxLength(object, limit) {
var num = document.getElementById("Number").value;
if (num == "3") {
document.getElementById("Type").value {
return (object.value.length <= limit);
}
}
}
HTML:
<label for="number">Number:</label>
<select size="1" id="Number">
<option disabled>...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<br>Type:<input type="text" id="Type" onkeypress="return imposeMaxLength(this,6);"><br>
<input type="button" value="submit"/>
Please help.
i think you need this
<script>
$('#Number').on('change', function () {
var value=this.value;
if(value==1)
{
$("#Type").attr('maxlength','6');
}
else
{
$("#Type").attr('maxlength','10');
}
});
</script>
This sets the maxlength to the required value whenever the Select element changes. So if you do select multiple values, then the maxlength will change to 10, otherwise, if only 1 item is selected it will have a maxlength of 6.
<div>
<select size="1" id="Number" multiple>
<option disabled>...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</div>
<div>
<input type="text" id="Type" />
</div>
<div>
<input type="button" value="submit"/>
$("#Number").on('change', function() {
var selects = $(this).find('option:selected');
if(selects.length > 1) {
$("#Type").attr('maxlength', 10);
} else {
$("#Type").attr('maxlength', 6);
}
});
Demo
u may simply use the property maxlength:
html
<input type="text" id="Type" maxlength="1"/><!-- default value in select -->
<select onchange="imposeMaxLength(this.value);">
js
<script>
function imposeMaxLength(max) {
document.getElementById("Type").maxlength = max;
}
</script>

To redirect a page on Form submit using values from dropdown feild

this is my Form code
<form id="search_mini_form">
<select id="cat" class="input-text-select catvalue" name="cat">
<option value="">All Mediums</option>
<option value="150">Painting</option>
<option value="151">Photography</option>
<option value="152">Work on paper</option>
<option value="153">Drawing</option>
</select>
<select id="style" class="input-text-select styvalue" name="style">
<option value="">All Styles</option>
<option value="54">Abstract</option>
<option value="55">Architectural</option>
</select>
<button class="button" title="Search" type="submit">Search</button>
what trying to achieve on submit my from redirects according to what values are selected from drop down
like if on painting is selected it should redirect to mysite/paintings or if only style (abstract) selected it would redirect to mysite/artwork?abstract or if both selected it should be like mysite/painting?abstract
how can i achieve this ?
i have tried using Jquery
<script type="text/javascript">
$(".catvalue").change(function(){
$catvalue = $(".catvalue option:selected").val();
alert ("$catvalue")
});
$(".styvalue").change(function(){
$styvalue = $(".styvalue option:selected").val();
});
if ($catvalue)
{
$redirecturl = "mysite/"+$jqcatvalue;
}
else if ($styvalue)
{
$redirecturl = "mysite/artwork?"+$styvalue;
}
else if ($styvalue && $styvalue )
{
$redirecturl = "mysite/"+$jqcatvalue="?"+$jqstyvalue;
}
is it right approach ?? how could i pass it to form action ?
edit : using magento so have to get base url by <?php echo Mage::getBaseUrl() ?>
I think what you are looking for here is almost the basic drop down navigation schema, very common implementation similar to this example.
<FORM name="f1">
<SELECT name="s1">
<OPTION SELECTED value="http://www.java2s.com">Java2s.com
<OPTION value="http://www.google.com">Google
<OPTION value="http://www.msn.com">msn
<OPTION value="http://www.perl.com">Perl.com
<OPTION value="http://www.php.net">Php.net
</SELECT>
<INPUT type="button" name="go" value="Go!" onClick="window.location=document.f1.s1.options[document.f1.s1.selectedIndex].value">
</FORM>
Your select options should have the value of the page location to navigate and your onClick value simply calls window.location and uses the selected form data appropriately. No need to actual "submit" the form here to a form handler, use pure javascript like one of the commenters mentioned.
Using this example you could easily add the second portion of your select as a "?option" with an if statement. The onClick could be moved into a function instead of calling window.location directly to do the analysis.
UPDATE: Here is your code re-purposed with this method, it's quick and dirty, might have a couple errors I haven't had the time to check it yet.
<script>
function doSearch() {
var cat = document.search_mini_form.cat.options[document.search_mini_form.cat.selectedIndex].value;
var style = document.search_mini_form.style.options[document.search_mini_form.style.selectedIndex].value;
if ((cat) && (style)) {
alert(cat + "?" + style);
// send to page using variables
}
else if (cat) {
alert(cat);
// send to page using variables
}
else {
alert("nothing selected");
}
}
</script>
<form name="search_mini_form" id="search_mini_form">
<select name="cat" id="cat" class="input-text-select catvalue">
<option value="">All Mediums</option>
<option value="painting">Painting</option>
<option value="photo">Photography</option>
<option value="paper">Work on paper</option>
<option value="drawing">Drawing</option>
</select>
<select name="style" id="style" class="input-text-select styvalue">
<option value="">All Styles</option>
<option value="abstract">Abstract</option>
<option value="arch">Architectural</option>
</select>
<button class="button" title="Search" onClick="doSearch()">Search</button>
</form>
<form id="search_mini_form" action="">
<select id="cat" class="input-text-select catvalue" name="cat">
<option value="">All Mediums</option>
<option value="150">Painting</option>
<option value="151">Photography</option>
<option value="152">Work on paper</option>
<option value="153">Drawing</option>
</select>
<select id="style" class="input-text-select styvalue" name="style">
<option value="">All Styles</option>
<option value="54">Abstract</option>
<option value="55">Architectural</option>
</select>
<button class="button" title="Search" type="submit">Search</button>
$(".input-text-select styvalue").change(function(){
$("search_mini_form").attr("action","mysite/");
var thisvalue = $(this).find("option:selected").text();
$("search_mini_form").attr("action","mysite/"+thisvalue );
});
Please try the following code
<form id="search_mini_form">
<select id="cat" class="input-text-select catvalue" name="cat">
<option value="">All Mediums</option>
<option value="150">Painting</option>
<option value="151">Photography</option>
<option value="152">Work on paper</option>
<option value="153">Drawing</option>
</select>
<select id="style" class="input-text-select styvalue" name="style">
<option value="">All Styles</option>
<option value="54">Abstract</option>
<option value="55">Architectural</option>
</select>
<input class="button" title="Search" type="submit" value="Search"/>
</form>
Check the javascript code
$('#search_mini_form').submit(function(){
var mediums=$('#cat option:selected').text();
var styles=$('#style option:selected').text();
if(styles!="AllStyles" && mediums =="All Mediums")
{
$('#search_mini_form').attr("action",'mysite/artwork?'+styles+'=test');
}
else if(styles =="AllStyles" && mediums !="All Mediums")
{
$('#search_mini_form').attr("action",'mysite/'+mediums);
}
else
{
$('#search_mini_form').attr("action",'mysite/'+mediums+'?'+styles+'=test');
}
});
http://jsfiddle.net/zzyEY/18/

Jquery validate and a list of select box

How Can i specific require and unique condition for a list of select box like below?
<form name="signupForm" class="cmxform" id="signupForm" method="get" action="">
<select name="category[]" id="cat_1">
<option value="">Select One</option>
<option value="1">aa</option>
<option value="2">bb</option>
<option value="3">cc</option>
<option value="4">dd</option>
</select>
<select name="category[]" id="cat_2">
<option value="">Select One</option>
<option value="5">ee</option>
<option value="6">ff</option>
<option value="7">gg</option>
<option value="8">hh</option>
</select>
<select name="category[]" id="cat_3">
<option value="">Select One</option>
<option value="9">ii</option>
<option value="10">jj</option>
<option value="11">kk</option>
<option value="12">ll</option>
</select>
<input class="submit" type="submit" value="Submit">
</form>
Notice that there are the number of cat is not fixed, it can be more than 3,
so how to make it required for each selectbox,
and each selectbox chosen value must be unique using jquery validate plugin? Thank you
var $selects = $('form select[name^=category]'),
values = [];
$(':submit').click(function(e) {
e.preventDefault();
values = [];
$($selects).each(function() {
if($(this).val()) {
values.push($(this).val());
}
});
if(!values.length) {
alert('Please select all categories');
return false;
}
if(values.length < $selects.length || $.unique(values).length < $selects.length) {
alert('Please select all categories and be unique');
return false;
}
});
DEMO
Here is a great jQuery validation plugin that will make your life easier: http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/
This is all you need to do: (the plugin does the rest)
<select id="sport" class="validate[required]" name="sport">
<option value="">--Select--</option>
<option value="option1">Tennis</option>
<option value="option2">Football</option>
<option value="option3">Golf</option>
</select>
Hope that helps :)

Categories