Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I'm looking to create an online quote based on two variables.
The user needs to enter a postcode, and then select an item from a dropdown (1, 2 or 3). Each drop down has a different cost (£10.00, £20.00 and £30.00).
The user must enter their postcode, select 1/2/3 and then press "Get Quote".
If their postcode does not start with a B followed by a number, then text must appear informing that we do not deliver to this area. If the postcode is within B1-B99 then text must appear saying the cost is £10/£20/£30 dependent on which dropdown item they have selected.
I have managed to get the drop down and price alert to work but I am unsure how you integrate the postcode function above this (also I don't want an alert I want the cost to appear underneath the button).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div id="quote" style="padding:5%;">
Gain an online quotation for your skip!</center>
<form name="priceCalc" action="">
<input class="form-control input-box" id="postcode1" type="text" name="postcode" placeholder="">
<select name="Product">
<option value="Please Select">Please Select</option>
<option value="10">1</option>
<option value="20" >2</option>
<option value="30">3</option>
</select>
<input type="button" value="Get Quote" onclick="price();"><br>
</form>
<script>
function price() {
var Amt = document.priceCalc.Product;
var price = Amt.value;
alert(price);
}
</script>
</body>
</html>
Any help would be greatly appreciated, I am no Javascript expert but this one is bugging me! Thanks
You can use a regular expression to check the postcode.
/[B][1-9]-[B][0-99]/
Something like this:
<div id="quote" style="padding:5%;">
Gain an online quotation for your skip!
<form name="priceCalc" action="">
<input class="form-control input-box" id="postcode1" type="text" name="postcode" placeholder="">
<select name="Product">
<option value="Please Select">Please Select</option>
<option value="10">1</option>
<option value="20">2</option>
<option value="30">3</option>
</select>
<input type="button" value="Get Quote" onclick="price()" /><span id="priceOut"></span>
<br/>
</form>
</div>
<script>
function price() {
var postcode = document.priceCalc.postcode;
var Amt = document.priceCalc.Product;
var price = Amt.value;
var regex = /[B][1-9]-[B][0-99]/;
if (!isNaN(price)) {
if (postcode.value.match(regex) !== null) {
document.getElementById('priceOut').innerHTML = "£" + price;
} else {
document.getElementById('priceOut').innerHTML = "We do not deliver to this area.";
}
} else {
document.getElementById('priceOut').innerHTML = price;
}
}
</script>
Your question is not precise enough, but here is what I've understood, you can use this code :
<div id="quote" style="padding:5%;">
Gain an online quotation for your skip!
<form name="priceCalc" action="">
<input class="form-control input-box" id="postcode1" type="text" name="postcode" placeholder="">
<select name="Product">
<option value="Please Select">Please Select</option>
<option value="10">1</option>
<option value="20" >2</option>
<option value="30">3</option>
</select>
<input type="button" value="Get Quote" onclick="price()" /><span id="priceOut"></span><br/>
</form>
</div>
<script>
function price() {
var Amt = document.priceCalc.Product;
var price = Amt.value;
document.getElementById('priceOut').innerHTML = price;
}
</script>
The price will be displayed next to the button (what does underneath means exactly?)
You can move the #priceOut div to place the price wherever you want.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
I created this simple form with a text box, check box, select option list and a Submit button using html. By default submit button is disable. After user fills all the text box and select a option from the select box and check the check box, submit button must be enable. How can I do with java script. Thank you.
Here is my code,
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form>
<input type="text" id="u-name" name="username" placeholder="Username" /><br/><br>
<input type="text" id="u-age" name="age" placeholder="Age" /><br/><br>
<select id="u-type">
<option>Choose</option>
<option>Type 1</option>
<option>Type 2</option>
<option>Type 3</option>
</select> <br> <br>
<label class='checkbox-inline'>
<input type='checkbox' name='c-box' id='c-box'>Check Me
</label>
<br>
<input type="submit" id="Save" value="Save" disabled />
</form>
</body>
</html>
You'd have to track the state of each of the inputs. When all the inputs are filled out with valid data, the submit button will be enabled.
Like this:
const submitBtn = document.getElementById('Save')
const uName = document.getElementById('u-name')
const uAge = document.getElementById('u-age')
const uType = document.getElementById('u-type')
const cBox = document.getElementById('c-box')
// run this function whenever the values of any of the above 4 inputs change.
// this is to check if the input for all 4 is valid. if so, enable submitBtn.
// otherwise, disable it.
const checkEnableButton = () => {
submitBtn.disabled = !(
uName.value &&
uAge.value &&
cBox.checked &&
uType.value !== 'Choose'
)
}
uName.addEventListener('change', checkEnableButton)
uAge.addEventListener('change', checkEnableButton)
uType.addEventListener('change', checkEnableButton)
cBox.addEventListener('change', checkEnableButton)
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form>
<input type="text" id="u-name" name="username" placeholder="Username" />
<br><br>
<input type="text" id="u-age" name="age" placeholder="Age" /><br/><br>
<select id="u-type">
<option>Choose</option>
<option>Type 1</option>
<option>Type 2</option>
<option>Type 3</option>
</select>
<br><br>
<label class='checkbox-inline'>
<input type='checkbox' name='c-box' id='c-box'>Check Me
</label>
<br>
<input type="submit" id="Save" value="Save" disabled />
</form>
</body>
</html>
I'm working on the fv calculator. However, I don't know why my JavaScript code doesn't display the answer of future value after I click the calculate button.
How could I solve this problem?
I will be appreciated if someone could offer me help, thanks.
Below is my HTML and JavaScript code.
<html>
<head>
<title>401K Future Value Calculator</title>
<script type="text/javascript" src="mpg.js"></script>
</head>
<body>
<h2>401K Future Value Calculator</h2>
<form id="calculationForm" >
<label for="periodicPayment">Yearly Investment($): </label>
<select id="yearlyInvest" name="Investment”">
<option value="1000: ">1000</option>
<option value="2000: ">2000</option>
<option value="3000: ">3000</option>
<option value="4000: ">4000</option>
<option value="5000: ">5000</option>
<option value="6000: ">6000</option>
<option value="7000: ">7000</option>
<option value="8000: ">8000</option>
<option value="9000: ">9000</option>
<option value="10000: ">10000</option>
</select><br><br>
<label for="annunalInterest">Annual Interest Rate(%) </label>
<input type="text" id="annunalInterestRate"><br><br>
<label for="years">Number of Years(#) </label>
<input type="text" id="numOfYears"><br><br>
<label for="future">Future Value($) </label>
<p id="futureValue">
</p>
<input type="button" id="calculate" value="Calculate">
<input type="button" onclick="clearButton()" id="clear" value="Clear">
</form>
</body>
</html>
function processForm() {
var r, n, p;
r = parseFloat(document.getElementById("annunalInterestRate").value);
n = parseInt(document.getElementById("numOfYears").value);
p = document.getElementById("yearlyInvest").value;
if (isNaN(r)) {
alert("Pleas enter a valid number.");
} else if (isNaN(n)) {
alert("Pleas enter a valid number.");
} else {
var fv = P * ((Math.pow((1 + r), n) - 1) / r);
}
document.getElementById("calculate").value;
document.getElementById("futureValue").innerHTML = fv.toFixed(2);
};
window.onload = function() {
document.getElementById("calculate").onclick = processForm;
};
function clearButton() {
document.getElementById("calculationForm").reset();
}
The way you've written your <option> nodes in the <select> contain an unnecessary : in the value= param. This is causing p to compute as NaN. Instead, rewrite as:
<select id="yearlyInvest" name="Investment”">
<option value="1000">1000</option>
<option value="2000">2000</option>
...
</select>
I am trying to create what I hope is a somewhat simple donation form. There are two options to choose from:
A drop down with a text field to enter an amount
A text field to write in an other designation along with a text field to enter an amount
I've been looking through a lot of different examples of code, but I'm not entirely sure how to search the technical name for what I need. I need to have an alert appear when nothing is entered as well as an alert when only one part of 1 or one part of 2 is entered. I know this is something I need JS for, but have zero experience with it.
I found several pages that were a little helpful with validation and alert messages for multiple fields, but I think I need to have an either/or type of alert (if that makes sense). EITHER you choose from the drop down and enter an amount OR you enter something in the "Other" text field and enter an amount.
You can see my code below. I included some JS I found and tried to modify that seemed to be closest to what I'm looking for, but with my limited knowledge of the language I know it's not correct (try not to judge me). I can get an alert message that works sometimes and not for everyone. And sometimes the alert still appears when it's filled out correctly.
I feel like my brain is fried at this point, so any help you can provide is greatly appreciated. Javascript is definitely going to the top of my "Must Learn" list after this. Thank you!
<script>
function validateForm() {
var x = document.forms["form1"]["FUND1"].value;
var x = document.forms["form1"]["FUND2"].value;
var x = document.forms["form1"]["GIFT_AMOUNT1"].value;
var x = document.forms["form1"]["GIFT_AMOUNT2"].value;
if (form1.FUND1.value == '' && form1.FUND2.value == '') {
alert("Please select a donation designation and an amount.");
return false;
}
if (form1.GIFT_AMOUNT1.value == '' && form1.GIFT_AMOUNT1.value == '') {
alert("Please select a donation designation and an amount.");
return false;
}
}
</script>
<form name="form1" method="POST" action="input.php" id="form1" onsubmit="return validateForm()" >
<div class="giving_dropdown body_copy">
<h3>Giving Opportunities</h3>
<select name="FUND1" class="drop_down" >
<option value="" selected class="body_copy"></option>
<option value="Option1" class="body_copy">Option1</option>
<option value="Option2" class="body_copy">Option2</option>
<option value="Option3" class="body_copy">Option3</option>
<option value="Option4" class="body_copy">Option4</option>
<option value="Option5" class="body_copy">Option5</option>
<option value="Option6" class="body_copy">Option6</option>
<option value="Option7" class="body_copy">Option7</option>
<option value="Option8" class="body_copy">Option8</option>
<option value="Option9" class="body_copy">Option9</option>
<option value="Option10" class="body_copy">Option10</option>
<option value="Option11" class="body_copy">Option11</option>
</select>
<input class="inputotherfund" name="GIFT_AMOUNT1" type="text" size="10" id="GIFT_AMOUNT1" value="0.00"/>
</div>
<div class="other_designation">
<h3>Other</h3>
<input name="FUND2" type="text" size="50" id="FUND2" class="inputotherfund" placeholder="Indicate where to direct donation"/>
<input class="inputotherfund" name="GIFT_AMOUNT2" type="text" size="10" id="GIFT_AMOUNT2" value="0.00"/>
</div>
<div style="clear:both; float:left;">
<p><input type="submit" value="Continue" class="continue_button" onclick="validateAndSend()"></p>
</div>
What you are doing is ok.
To improve what you are doing you can try this:
I'm paring FUND and GIFT_AMOUNT because I guess is what you are trying to do, now the alert will show when both 1s or 2s are empty.
function validateForm() {
var form1 = document.forms['form1']
if (form1.FUND1.value === '' || form1.GIFT_AMOUNT1.value === '') {
alert("please select a donation designation and an amount 1.");
return false;
}
if (form1.FUND2.value === '' || form1.GIFT_AMOUNT2.value === '') {
alert("please select a donation designation and an amount 2.");
return false;
}
return true;
}
In your form you need to initialize your GIFT_AMOUNT inputs with value="" otherwise if you compare '0.00' with '' always will be false.
<form name="form1" method="POST" action="input.php" id="form1" onsubmit="return validateForm()" >
<div class="giving_dropdown body_copy">
<h3>Giving Opportunities</h3>
<select name="FUND1" class="drop_down" >
<option value="" selected class="body_copy"></option>
<option value="Option1" class="body_copy">Option1</option>
<option value="Option2" class="body_copy">Option2</option>
<option value="Option3" class="body_copy">Option3</option>
<option value="Option4" class="body_copy">Option4</option>
<option value="Option5" class="body_copy">Option5</option>
<option value="Option6" class="body_copy">Option6</option>
<option value="Option7" class="body_copy">Option7</option>
<option value="Option8" class="body_copy">Option8</option>
<option value="Option9" class="body_copy">Option9</option>
<option value="Option10" class="body_copy">Option10</option>
<option value="Option11" class="body_copy">Option11</option>
</select>
<input class="inputotherfund" name="GIFT_AMOUNT1" type="text" size="10" id="GIFT_AMOUNT1" value="" />
</div>
<div class="other_designation">
<h3>Other</h3>
<input name="FUND2" type="text" size="50" id="FUND2" class="inputotherfund" placeholder="Indicate where to direct donation" />
<input class="inputotherfund" name="GIFT_AMOUNT2" type="text" size="10" id="GIFT_AMOUNT2" value="" />
</div>
<div style="clear:both; float:left;">
<p>
<input type="submit" value="Continue" class="continue_button" />
</p>
</div>
</form>
There is no need to call a function in your onclick property because you are calling the submit function already to improve this behavior you can do something like this:
function submitForm() {
if (validateForm()) {
// do some stuff
}
}
and change the onsubmit property from your form
<form ... onsubmit="submitForm()">
If you are starting with javascript will be a good idea to learn how to use the console in order to debug your scripts. This article is a good point to start and as a last tip check this out.
I am very new to HTML and JavaScript...
I need your help to construct a website URL based on TextBox inputs in HTML/JavaScript?
I am looking for a HTML/JavaScript code to allow user to
1) Select an Option from Dropdown list
2) Enter a number
using which a URL should be generated
For example:
Drop down list has #Years to select and user select year 2014
and in text box user gives input a number as 1234
Below is the peace of code I have, but not able to get the desired result :(
<select name="SelectYear">
<option value="13" ID="13">2013</option>
<option value="12" ID="12">2012</option>
</select>
<select name="SelectMonth">
<option value="J" ID="J">June</option>
<option value="D" ID="D">December</option>
</select>
<input type="text" name="EnterRollNum" ID="EnterRollNum">
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
<script>
function myFunction() {
var iYear = $("select#SelectYear").val()
var iMonth = $("select#SelectMonth").val()
var iRollNum = $("select#EnterRollNum").val()
document.getElementById("demo").innerHTML = Link
}
</script>
Any help is much appreciated.
<form id="myForm" action="some.php" method="GET">
<select name="SelectYear">
<option value="13" ID="13">2013</option>
<option value="12" ID="12">2012</option>
</select>
<select name="SelectMonth">
<option value="J" ID="J">June</option>
<option value="D" ID="D">December</option>
</select>
<input type="text" name="EnterRollNum" ID="EnterRollNum" />
<input type="submit" value="submit" />
</form>
<p id="demo"></p>
<script>
$('#myForm').submit(function(e){
e.preventDefault();
var url = $(this).attr('action')+'?'+$('#myForm').serialize();
$('#demo').html(' Link ');
});
</script>
You can see the working fiddle - http://jsfiddle.net/grvngr/fak1s583/
Hope this helps!
I have a query i hope you can help with, i have searched but cant find an answer to my exact question.
I have a drop down (select) menu that depending on selection needs to show 2 extra fields
Every other question I have seen depends on different selections showing different fields.
<select id="idhere" name="namehere" title="Mortgage Type">
<option value="First Time Buyer">First Time Buyer</option>
<option value="Moving Home">Moving Home</option>
<option value="Remortgage">Remortgage</option>
<option value="Buy To Let Purchase">Buy To Let Purchase</option>
<option value="Buy To Let Remortgage">Buy To Let Remortgage</option>
</select>
The following need to show 2 extra form fields (held within a div below)
First Time Buyer
Moving Home
Buy To Let Purchase
These both do not need to show the extra fields
Remortgage
Buy To Let Remortgage
Finally The Extra Fields are:
<p>Have You Found A Property</p>
<input id="foundpropery" type="checkbox" value="0" />
<br />
<br />
<p>Have You Made An Offer</p>
<input id="foundproperty" type="checkbox" value="0" />
Using javascript? How do i show the extra fields depending on selection
In advance thanks for any help!
I think this can be a starting point for what you're trying to do, you use the div's "display" property to show/hide it depending on what's selected in the dropdown:
<html>
<head>
<script type="text/javascript">
function toggle() {
var e = document.getElementById("selectList");
var strMortgageType = e.options[e.selectedIndex].value;
var divToHide1 = document.getElementById("foundproperty");
var divToHide2 = document.getElementById("madeoffer");
if(strMortgageType == "Remortgage" || strMortgageType == "BuyToLetRemortgage")
{
divToHide1.style.display = "none";
divToHide2.style.display = "none";
}
else
{
divToHide1.style.display = "block";
divToHide2.style.display = "block";
}
}
</script>
</head>
<body>
<select id="selectList" name="namehere" title="Mortgage Type" onchange="toggle()">
<option value="FirstTimeBuyer">First Time Buyer</option>
<option value="MovingHome">Moving Home</option>
<option value="Remortgage">Remortgage</option>
<option value="BuyToLetPurchase">Buy To Let Purchase</option>
<option value="BuyToLetRemortgage">Buy To Let Remortgage</option>
</select>
<div id="foundproperty">
<p>Have You Found A Property</p>
<input id="foundpropery" type="checkbox" value="0" />
<br />
<br />
</div>
<div id="madeoffer">
<p>Have You Made An Offer</p>
<input id="madeofferInput" type="checkbox" value="0" />
</div>
</body>
</html>
If you're using jquery, this post may be helpful:
Jquery : If select has option 1 show div