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 want to write a function that continuously renders the data from a form. I am creating a form that has a price and sales tax and it outputs total price. Upon editing information I want my function to automatically update the total price without clicking a button. For example if something cost $10 with a 5% tax the price will be $10.50. If I change the price to $5 on the form I would want the total price to automatically update. I'm looking for some guidance to approaching this.
You can do it with onchange Event
I wrote this basic example: http://jsfiddle.net/uja7bxmm/
Html:
<form>
Price: <input type="text" id="price" onchange= "calculate()"/>
Tax: <input type="text" id="tax" onchange= "calculate()"/>
</form>
Total: <span id="total"/>
Javascript:
function calculate() {
var price =parseInt(document.getElementById("price").value,10);
var tax= parseInt(document.getElementById("tax").value,10);
if (!isNaN(price) && !isNaN(tax)) {
document.getElementById("total").innerHTML = (100+tax)*price/100;
}
}
Related
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 2 years ago.
Improve this question
I made a website for a restaurant, the checkout page has 2 option, pay by cash and pay by card. Now if the user chooses to pay by card, then there will be no more input required. If the user chooses to pay by cash, then I need to let them enter their name. Is there any method I can show the input bar when the user chooses to pay by cash? I'm using python flask
You can use JS to do it, since it is supported on nearly all browsers.
function validate(){
var cashpay = document.getElementById("cash-pay");
var cardpay = document.getElementById("card-pay");
var name = document.getElementById("name");
if(cashpay.checked==true){
name.style.display='block';
}else{
name.style.display='none';
}
}
.hidden{
display:none;
}
<h1>What would you like to pay by?</h1>
<form>
<input type="radio" name="pay-method" id="cash-pay" oninput="validate()"><label for="cash-pay">Cash</label><input type="radio" name="pay-method" id="card-pay" oninput="validate()"><label for="card-pay">Card</label>
<input type="text" name="name" id="name" class="hidden" placeholder="Please enter your name:">
</form>
We can use the oninput attribute in the input types to make sure that our JS function validate() is run every time the user modifies their choice. We can use the .checked DOM element to check whether the input is checked. If it is, we can use .style.display='block' to display the input.
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 4 years ago.
Improve this question
Photo of the website
I have a school project and I need to make a website where I can add more balance to my account. But I can't figure it out.
I would like to make an HTML number input and then that input needs to add up with my existing balance. But I can't make it work
This is the code I have:
<fieldset>
<legend>Opwaarderen</legend>
<input type="number" id="opwaarderen">
<input type="submit" onclick="opwaarderen()">
</fieldset
But how can I make the Javascript function? So that the input will add up to my already existing balance.
This will help
var currentCredit=0;
$("#a").click(()=>
{
alert(currentCredit+=Number($("#opwaarderen").val()));
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset>
<legend>Opwaarderen</legend>
<input type="number" id="opwaarderen">
<input type="submit" id="a">
</fieldset>
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 have a simple form including number input. Now, I want to dynamically add the total price, whenever someone changes the number. Could someone direct me on what to do please? I want it do be done without pressing submit.
<form>
<p class='ticket'>VIP ticket ($200):</p><input type="number" name="vip" min="0" max="20">
</form>
<p>Total price: </p>
Changing your html a little:
<p class='ticket'>VIP ticket ($200):</p><input type="number" name="vip" id="vip" min="0" max="20" />
<p>Total price: $<span id="total">0</span></p>
I've used a <span id="total"></span> to change the total value easily, and added id="vip" to your number input.
var ticketValue = 200;
$("#vip").on("change", function() {
$("#total").html($(this).val() * ticketValue);
});
Fiddle
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I have created a php file where I need to calculate total amount by entering a value in a text field.
My form code is like this:
<input id='1' name='1' type='text' size='10' value='$visitors' />
<input type='submit' name='submit' class='submit_button' value='Buy Visitors' />
Now what I want is, user will enter some value in text field lets say 15 so it should calculate with price like this
15 x 0.60 = 9
and answer should show after text field.
Please help Me.
Please try this.
<input type="text" name="abc" id="abc" onkeyup="calc()" />
<div id="answer">
</div>
<script>
function calc()
{
var vl = document.getElementById('abc').value ;
document.getElementById('answer').innerHTML = (Number(vl)*0.60);
}
</script>
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 8 years ago.
Improve this question
I want the text i type in
<input type="text" name="text1">
will automatically be updated in
<input type="text" name="text2">
by using JavaScript.
Anyone know how to solve it?
Thanks in advance
You can use the onkeyup event and populate the second <input> with the text of the first one, like this:
var inp1 = document.getElementsByName('text1')[0],
inp2 = document.getElementsByName('text2')[0];
inp1.addEventListener('keyup', function(e) {
inp2.value = this.value;
});
<p>Input 1: <input type="text" name="text1" placeholder="write something here..."></p>
<p>Input 2: <input type="text" name="text2" placeholder="ant it will show up here..."></p>
Test it using the "Run code snippet" button.