Using javascript to calculate form - javascript

I have a question on how to use javascript to calculate a form, but I can't seem to get it. Sorry if it's obvious but I'm new to scripting. Okay, so I have a form in html where you can select different options:
if (((document.getElementById("age").value = "15")||(document.getElementById("gender").value = "male")||(document.getElementById("psy").value = "sedentary")))
{
return("2200cal");
}
<div class="container">
<div class="row">
<label for="age">Age</label>
<input type="text" id="age" name="age" placeholder="Enter age">
<div class="row">
<label for="gender">Gender</label>
<select id="gender" name="gender">
<option value="" disabled selected hidden>Select gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
</div>
<div class="row">
<label for="fname">Physical Activity</label>
<select id="psy" name="psy">
<option value="" disabled selected hidden>Select activity level</option>
<option value="sedentary">SEDENTARY</option>
<option value="mod">MOD. ACTIVE</option>
<option value="active">ACTIVE</option>
</select>
<input type="submit" value="Submit" onclick="if">
</div>
and using it I wanted to use javascript to output a number based on this chart:
output chart
I tried using an equation to output a value by using if and then statements but it doesn't work, especially when it needs to find the result from all three variables together in the code.
Edit: fixed values but still not outputting anything.

Related

How to add up values in HTML form inputs with the help Laravel

I am trying to get a sum of input values in an HTML form within a Laravel application.
Here is the code that I already have. Any suggestions on how this is possible?
Two Things I want to achieve:
For "Total Cost" I want it to add up the two dollar amounts of the two inputs and display the sum in the input field.
For "Total Qty" I want it to add up the two quantity amounts of the two inputs and display the sum in the input field.
<!--FORM-->
<form action="/orders/create" method="POST">
#csrf
<div class="form-group">
<label for="productsOrdered">Products Ordered</label>
<input name="product1" class="form-control" id="product1" placeholder="Product 1">
<input name="price1" class="form-control" id="price1">
<select name="q1" class="form-control" id="q1">
<option value="">Quantity</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>
<option value="9">9</option>
<option value="10">10</option>
</select><br>
<input name="product2" class="form-control" id="product2" placeholder="Product 2">
<input name="price2" class="form-control" id="price2">
<select name="q2" class="form-control" id="q2">
<option value="">Quantity</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>
<option value="9">9</option>
<option value="10">10</option>
</select><br>
<div class="form-group">
<label for="shippingcost">Shipping Cost:</label>
<input name="shipping" class="form-control" id="shipping" placeholder="--.-- (no dollar sign)">
</div>
<div class="form-group">
<label for="tax">Tax</label>
<input name="tax" class="form-control" id="tax" placeholder="(leave blank if 0)">
</div>
<!--For "Total Cost" I want it to add up the two dollar amounts of the two inputs and display the sum in the input field.-->
<div class="form-group">
<label for="total">Total Order Cost:</label>
<input name="total" class="form-control" id="total">
</div>
<!--For "Total Qty" I want it to add up the two quantity amounts of the two inputs and display the sum in the input field.-->
<div class="form-group">
<label for="total">Total Qty:</label>
<input name="total" class="form-control" id="total">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Unfortunately I'm having trouble finding decent documentation/instructions on how to achieve this.
Add this to the bottom of your code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$("#price2").keyup(function(){
$("#total").val(parseFloat($("#price2").val()) + parseFloat($('#price1').val()));
})
$("#q2").change(function(){
$("#total_quan").val(parseInt($("#q1").val()) + parseInt($('#q2').val()));
})
</script>
And change the "id" of the quantity total to "total_quan". As a good note, you shouldn't have two elements with the same ID.
Now, this this code I've supplied, this will only work if the first quantity/price is entered followed by the second input. It won't calculate if it's entered as product two then product one. But this should be enough to get you tested and started.
This was all done with jquery/javascript. From here, just send the value of the totals to the laravel back end to do whatever you need to do with the data. So javascript to do the calculations from the form, php to do the server side stuff with the output of the calculations supplied from JS.

HTML form validation - check if at least one dropdown is selected

I'm struggling with the following issue - I have an HTML form in which there are three select fields. Before submitting values, I want to make a form validation in which at least ONE of the four dropdowns should be selected. I have the following code but it keeps requiring all the dropdowns.
Link to the code: jsfiddle
Code - HTML
<div class="container">
<div class="row">
<div class="col-lg-12">
<form method="post" id="myform">
<div class="form-group ">
<label class="control-label " for="select">
Select a Choice
</label>
<select class="select form-control" id="select1" name="select1" required>
<option value="">---</option>
<option value="First Choice">1</option>
<option value="Second Choice">2</option>
<option value="Third Choice">3</option>
</select>
<select class="select form-control" id="select2" name="select2" required>
<option value="">---</option>
<option value="First Choice">a</option>
<option value="Second Choice">b</option>
<option value="Third Choice">c</option>
</select>
<select class="select form-control" id="select3" name="select3" required>
<option value="">---</option>
<option value="First Choice">X</option>
<option value="Second Choice">Y</option>
<option value="Third Choice">Z</option>
</select>
</div>
<div class="form-group">
<div>
<button class="btn btn-primary " name="submit" id="sub" type="submit">
Submit
</button>
</div>
</div>
</form>
</div>
</div>
</div>
Code - JS:
$(document).ready(function () {
$('#sub').click(function() {
check = $(".select option:selected").length;
if(!check) {
alert("You must select an option from at least one dropdown");
return false;
}
});
});
Where I make a mistake in the code?
Take a look at this
jsfiddle example
You need to remove the "required" attribute and manage required values using JS because if you set all combobox to required you'll be forced to fill all of them.
<div class="container">
<div class="row">
<div class="col-lg-12">
<form method="post" id="myform">
<div class="form-group ">
<label class="control-label " for="select">
Select a Choice
</label>
<select class="select form-control" id="select1" name="select1">
<option selected disabled value="">---</option>
<option value="First Choice">1</option>
<option value="Second Choice">2</option>
<option value="Third Choice">3</option>
</select>
<select class="select form-control" id="select2" name="select2">
<option selected disabled value="">---</option>
<option value="First Choice">a</option>
<option value="Second Choice">b</option>
<option value="Third Choice">c</option>
</select>
<select class="select form-control" id="select3" name="select3">
<option selected disabled value="">---</option>
<option value="First Choice">X</option>
<option value="Second Choice">Y</option>
<option value="Third Choice">Z</option>
</select>
</div>
<div class="form-group">
<div>
<button class="btn btn-primary " name="submit" id="sub" type="submit">
Submit
</button>
</div>
</div>
</form>
</div>
</div>
</div>
JS code
$(document).ready(function () {
$('#sub').click(function() {
check = $('option[disabled]:selected').length;
if(check == 3) {
alert("You must select an option from at least one dropdown");
return false;
}
});
});
Hope it helps you
First, you must delete the required on your select tags. Then, use something like this in the jquery part:
$(document).ready(function () {
$('#sub').click(function() {
var anySelected = false;
$(".select option:selected").each(function(){
if(!$(this).val() == ""){
anySelected = true;
}
});
if(!anySelected) {
alert("You must select an option from at least one dropdown");
return false;
}
});
});
Here is a working fiddle.
Hope it helps!

How to get label text and selected value from checked radio button?

I am trying to get text and selected value from checked radio button and put it into variable. Trying to get something like "Is published" or if is other radio checked to be like "Is not In Review". This needs to be plain javascript - no jquery or any other framework.
<form>
<div class="filter-option">
<input type="radio" id="status" name="status" checked="checked"/>
<label for="status">Is</label>
<div class="searchFilter">
<select class="selectpicker" title="" data-size="false" multiple
data-live-search="true">
<option value="all">All</option>
<option value="published">Published</option>
<option value="draft">Draft</option>
<option value="in-review">In Review</option>
<option value="deleted">Deleted</option>
</select>
</div>
</div>
<div class="filter-option">
<input type="radio" id="is_not" name="status"/>
<label for="is_not">Is not</label>
<div class="searchFilter">
<select class="selectpicker" title="" data-size="false" multiple data-
live-search="true">
<option value="all">All</option>
<option value="published">Published</option>
<option value="draft">Draft</option>
<option value="in-review">In Review</option>
<option value="deleted">Deleted</option>
</select>
</div>
</div>
<div class="filter-option">
<input type="radio" id="contain" name="author"/>
<label for="contain">Contain</label>
<div class="searchFilter">
<input type="text" class="simpleSearch">
</div>
</div>
</form>
You give the select element an id, then use document.getElementById(id).value.
This should return the value of the selected option, which you can then use any way you want.
Using .text instead gives you the text shown to the user in the list (in this example they are the same).

How to set via selected options changes in popup menu?

I have these options:
<form>
<select id="poSelect" >
<option selected disabled>Choose here</option>
<option id="buyeroption" value="100101">I am a Buyer</option>
<option id="garageoption" value="100102">I am a Garage</option>
</select>
<label>Full Name</label>
<input type="text" />
<label>Email Address</label>
<input type="email" />
<label>Password</label>
<input type="password" />
<label id="industrylabel" >Select Your Brand</label>
<select id="industryoption">
<option selected disabled>Select</option>
<option value="Renault">Renault</option>
<option value="Pegaut">Pegaut</option>
<option value="Citroen">Citroen</option>
</select>
<div class="form-check-label">
<input id="send_updates" type="checkbox" />
<label for="send_updates">Send me occasional email updates</label>
</div>
So what I need is when user select I am a Buyer label "Select your Brand" and industry option select to be hidden but when I click I am garage to appear.
<form>
<select id="mySelect">
<option id="apple">Apple</option>
<option id="orange">Orange</option>
<option id="pineapple">Pineapple</option>
<option id="banana">Banana</option>
</select>
</form>
<p></p>
<button onclick="myFunction()">textbox1</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("mySelect").options.namedItem("banana").text;
document.getElementById("demo").innerHTML = x;
}
</script>
Maybe you want something like that if you want to change any thing please check this link:-http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_select_options6

Chaining an input option after a select?

I'm wondering how I can chain an input box after chaining a selection in my form.
I'm using http://www.appelsiini.net/projects/chained to chain my selects and it works. However, I need to adjust this to also allow for the chaining of an input. In the below example it would be someone would choose an option such has an item has Strength on it then the select menu of value options then input the value. I'm trying to also incorporate into this where after those 3 options of item, controller, value are inputed the user has the option to filter more so another box appear with the same options of strength, agility, etc. http://jsfiddle.net/isherwood/XMx4Q/ is an example of work I used to incorporate this into my own work.
<form id="myform" name="myform" method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">
<div>
<label for="searchterm">Name:</label>
<input type="text" name="searchterm">
</div>
<div>
<div class="chainedSelectFilter">
<select name="specificFilter" class="attribute">
<option value="" selected>Select a Filter</option>
<option value="strength">Has Strength</option>
<option value="agility">Has Agility</option>
<option value="spirit">Has Spirit</option>
<option value="stamina">Has Stamina</option>
</select>
<select name="specificFilter" class="valueController">
<option value=">" selected>></option>
<option value=">=">>=</option>
<option value="=">=</option>
<option value="<="><=</option>
<option value="<"><</option>
</select>
</div>
</div>
</div>
<div>
<label for="submit"></label>
<input type="submit" name="submit" value="Filter">
</div>
Code reference below shows how to accomplish this. Here is jsFiddle that shows it's working.
HTML
<form id="myform">
<div class="container">
<select>
<option value=""></option>
<option value="one">one</option>
<option value="two">two</option>
</select>
<input type="text" class="chain" value="" placeholder="Type here"/>
</div>
<div class="container">
<select>
<option value=""></option>
<option value="one">one</option>
<option value="two">two</option>
</select>
<input type="text" class="chain" value="" placeholder="type here"/>
</div>
<div class="container">
<select>
<option value=""></option>
<option value="one">one</option>
<option value="two">two</option>
</select>
<input type="text" class="chain" value=""/>
</div>
</form>
JS
$('select').change(function () {
$(this).next('input').fadeIn();
});
$('body').on('keyup','input.chain',function () {
$(this).parent().next('div').fadeIn();
});

Categories

Resources