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
Related
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 3 years ago.
Improve this question
My html like this :
<input type="number" />
I had validation number, so user only input number. I want the first digit to be non-zero
How can I do it?
You can use text input with a pattern attribute:
<form action="/action_page.php">
Phone Number: <input type="text" name="phone_number" pattern="[1-9][0-9]+" title="Phone number without a leading zero" required="required">
<input type="submit">
</form>
and to use with number you can use this:
<input type="number" oninput="this.value = this.value.replace(/^0/g, '');" >
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 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;
}
}
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.