I have a problem with a html5 output. Using autosum, when I remove a number, the output shows not a number in the textbox NaN.
How do I remove it?
<form method="POST" oninput="result.value=parseInt(value1.value)+parseInt(value2.value)">
<input type="number" id="value1" value="0"> +
<input type="number" id="value2" value="0"> =
<output name="result" for="value1 value2"></output>
</form>
I've had a play on JSfiddle, is this what you're after? If the value for parseInt is not an int then it uses 0.
<form method="POST" oninput="result.value=(parseInt(value1.value) || 0)+(parseInt(value2.value) || 0)">
<input type="number" id="value1" value="0"> +
<input type="number" id="value2" value="0"> =
<output name="result" for="value1 value2"></output>
</form>
https://jsfiddle.net/5acLpxqs/
Use this it fixes the issue
<form method="POST" oninput="result.value=parseInt(value1.value?value1.value:0)+parseInt(value2.value?value2.value:0)">
<input type="number" id="value1" value="0"> +
<input type="number" id="value2" value="0"> =
<output name="result" for="value1 value2"></output>
</form>
Related
How to go about calculating the sum of two fields on change?
My HTML
<div class="field">
<label for="field1">F1:</label>
<input type="number" name="field1" min="0" placeholder="0" Title="Only positive numbers" required></div>
<div class="field">
<label for="field2">Field2:</label>
<input type="number" name="field2" disabled>
</div>
And i got this but unsure on how this works/how to get it to work..
<script> $(".input").on("change", function(){
var ret = Number($(".field1").val()) + Number($(".field2").val());
$("#field3").val(ret);
Is there an easier way to do this?
Your way is fine, But I prefer using on input event handler, as it's faster in updating the total number.
Also if you like to expand the sum process to handle many textbox(s) you can do the following
$(document).ready(function(){
$(".parameter").on("input",function() {
var total=0;
$(".parameter").each(function(){
if(!isNaN(parseInt($(this).val())))
{
total+=parseInt($(this).val());
}
});
$(".total").val(total);
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="field">
<label for="field1">F1:</label>
<input type="number" class="parameter" name="field1" min="0" placeholder="0" Title="Only positive numbers" required></div>
<div class="field">
<label for="field2">F2:</label>
<input type="number" class="parameter" name="field2" min="0" placeholder="0" Title="Only positive numbers" required>
</div>
<div class="field">
<label for="field2">F3:</label>
<input type="number" class="parameter" name="field3" min="0" placeholder="0" Title="Only positive numbers" required>
</div>
<div class="field">
<label for="field2">Total:</label>
<input type="number" class="total" name="total" min="0" placeholder="0" Title="Only positive numbers" required>
</div>
By using this way you can include as many as number fields in the sum, and all what you need to do is to add class="parameter" to this new number field.
You can set the same class to the two inputs and then on the class change you can get the values of those inputs by their ids (which you can also set), and simply add them.
Something like:
<input id="input1" class="myclass"/>
<input id="input2" class="myclass"/>
And then on the javascript side:
$(".myclass").on("change", function(){
var value1 = document.getElementById('input1').value;
var value2 = document.getElementById('input2').value;
var sum = parseInt(value1) + parseInt(value2);
});
Any change in input will trigger the .on()'s callback function. Inside get the value of field1and field2 and parse it into int as they will be a string. Add them both and insert into field3
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field">
<label for="field1">F1:</label>
<input type="number" id="field1" min="0" placeholder="0" Title="Only positive numbers" required/>
</div>
<div class="field">
<label for="field2">Field2:</label>
<input type="number" id="field2"/>
</div>
<input type="number" disabled id="field3"></input>
<script>
$("input").on("change", function() {
var ret = parseInt($("#field1").val()) + parseInt($("#field2").val() || '0')
$("#field3").val(ret);
})
</script>
Qty1 : <input onblur="findTotal()" type="text" name="qty" id="qty2"/><br>
Qty2 : <input onblur="findTotal()" type="text" name="qty" id="qty2"/><br>
Qty3 : <input onblur="findTotal()" type="text" name="qty" id="qty3"/><br>
Qty4 : <input onblur="findTotal()" type="text" name="qty" id="qty4"/><br>
Qty5 : <input onblur="findTotal()" type="text" name="qty" id="qty5"/><br>
Qty6 : <input onblur="findTotal()" type="text" name="qty" id="qty6"/><br>
Qty7 : <input onblur="findTotal()" type="text" name="qty" id="qty7"/><br>
Qty8 : <input onblur="findTotal()" type="text" name="qty" id="qty8"/><br>
<br><br>
Total : <input type="text" name="total" id="total"/>
<script type="text/javascript">
function findTotal(){
var arr = document.getElementsByName('qty');
var tot=0;
for(var i=0;i<arr.length;i++){
if(parseInt(arr[i].value))
tot += parseInt(arr[i].value);
}
document.getElementById('total').value = tot;
}
</script>
link:-How get total sum from input box values using Javascript?
or
link:-http://www.javascript-coder.com/javascript-form/javascript-calculator-script.phtml
Convert String to Number using + operator so +"0" === 0 and +"1" + +"2" === 3
$(".input").on("keyup change click", function() {
var ret = +$("[name=field1]").val() + +$("[name=field2]").val();
$("[name=field3]").val(ret);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field">
<label for="field1">Field1:</label>
<input class='input' type="number" name="field1" value='0' min="0" placeholder="0" Title="Only positive numbers" required>
</div>
<div class="field">
<label for="field2">Field2:</label>
<input class='input' type="number" name="field2" value='0' min="0" placeholder="0">
</div>
<div class="field">
<label for="field3">Result:</label>
<input type="number" name="field3" disabled>
</div>
Can anyone explain why i can not use oninput inside a table and how i can get it to work?
For example this works:
<form onsubmit="return false" oninput="o.value = parseInt(a.value) + parseInt(b.value)">
<input name="a" type="number" step="any"> +
<input name="b" type="number" step="any"> =
<output name="o"></output>
</form>
And this does not:
<table>
<form onsubmit="return false" oninput="o.value = parseInt(a.value) + parseInt(b.value)">
<input name="a" type="number" step="any"> +
<input name="b" type="number" step="any"> =
<output name="o"></output>
</form>
</table>
<form onsubmit="return false" oninput="o.value = parseInt(a.value) + parseInt(b.value)">
<table>
<input name="a" type="number" step="any"> +
<input name="b" type="number" step="any"> =
<output name="o"></output>
</table>
</form>
I have a form that I want to submit to paypal. When I submit the form I don't get to the overview for the submitted product but I end up on the default page for paypal.
I started with http://sandbox.paypal.com but I tried the non-sandbox site too.
<form action="http://sandbox.paypal.com/cgi-bin/webscr" id="paypal_form" method="post" name="paypal_form">
<input name="cmd" type="text" value="_xclick">
<input name="business" type="text" value="some#email.com">
<input name="lc" type="text" value="CH">
<input name="item_name" type="text">
<input name="item_number" type="text">
<input name="amount" type="text">
<input name="currency_code" type="text" value="CHF">
<input name="no_note" type="text" value="1">
<input type="text" name="return" value="http://google.com">
<input name="address_override" type="text" value="1">
<input name="country" type="text" value="CH">
<input name="first_name" type="text">
<input name="last_name" type="text">
<input name="address1" type="text">
<input name="zip" type="text">
<input name="city" type="text">
<input name="email" type="text">
</form>
Since I don't get an error at all, I have no idea what is going wrong. I had cases when Paypal told me that I have to provide a city or something like that but now I just get forwarded.
Note: The Charles Proxy tells me that the form was submitted with these values:
The issue is with the action address in your form. You are posting to "http://sandbox.paypal.com/cgi-bin/webscr". Try using "https://www.sandbox.paypal.com/cgi-bin/webscr" instead.
What do I have to change if only numbers from 0 to 99 should be allowed?
<input type="text" style="text-align:center" NAME="name" pattern="[0-99]" size="1" maxlength="2">
Now only numbers from 0 to 9 can be entered.
You will want to use min and max and also set it as a type of number.
E.g
<input type="text" style="text-align:center" type="number" NAME="name" min="0" max="99" size="1" maxlength="2">
Read more about it here.
<input type="text" style="text-align:center" type="number" NAME="name" min="0" max="99" size="1" maxlength="2">
The regular expression for matching numbers 0 to 99 is "[0-9]?[0-9]"
Demo
With regex:
<form action="demo.php">
<input type="text" name="xxxxx" pattern="^([0-9][0-9]?|)$">
<input type="submit">
</form>
I'm trying to post two different sets of mixed values. Each form will share some user submitted text like name and email.
<form method="post" action="url1">
<input type="hidden" name="donate" value="food">
<input type="hidden" name="days" value="30">
<input type="text" name="cans" value="5">
<input type="text" name="full_name" value="">
<input type="text" name="email" value="">
<input type="submit" name="submit" value="join1"/>
</form>
<form method="post" action="url1">
<input type="hidden" name="donate" value="shoes">
<input type="text" name="pairs" value="">
<input type="text" name="style" value="">
<input type="text" name="full_name" value="">
<input type="text" name="email" value="">
<input type="submit" name="submit" value="join2"/>
</form>
<possible dropdown>
It would be ideal to have Dropdown select between the two forms and submit.
Well, using only html you will get a problem as a submit button only submit its own form.
It's also not valid to have forms in other forms.
However, is a trick to accomplish your goal using javascript!
With a little function you can e.g. hide all other forms than one:
function showform(index){
var forms = document.forms;
for(var i=0;i<forms.length;i++)
forms[i].style.display=(i==index?"block":"none");
}
Then you only need to add the onchange-event on your dropdown-list and hide one of the forms by default.
This would result in something like this:
<html>
<head>
<style language="css" type="text/css">
form input{display:block;width:100px;}
</style>
<script language="javascript" type="text/javascript">
function showform(index){
var forms = document.forms;
for(var i=0;i<forms.length;i++)
forms[i].style.display=(i==index?"block":"none");
}
</script>
</head>
<body>
<select onchange='showform(this.selectedIndex);'>
<option>form1</option>
<option>form2</option>
</select>
<form method="post" action="url1">
<input type="hidden" name="donate" value="food"/>
<input type="hidden" name="days" value="30"/>
<input type="text" name="cans" value="5"/>
<input type="text" name="full_name" value=""/>
<input type="text" name="email" value=""/>
<input type="submit" name="submit" value="join1"/>
</form>
<form id='form2' style='display:none' method="post" action="url2">
<input type="hidden" name="donate" value="shoes"/>
<input type="text" name="pairs" value="2"/>
<input type="text" name="style" value=""/>
<input type="text" name="full_name" value=""/>
<input type="text" name="email" value=""/>
<input type="submit" name="submit" value="join2"/>
</form>
</body></html>
If you don't like javascript, you would need to do that in php by using an additional form for the select-element and insert only the wanted form (or hide the others).
I already see some design issues with the way you have planned your multi-form setup, there are much better techniques to handle this - but I will try to help you using your own technique.
By using your own example, this should work for you:
<form id="join1" method="post" action="url1">
<input type="hidden" name="donate" value="food">
<input type="hidden" name="days" value="30">
<input type="text" name="cans" value="5">
<input type="text" name="full_name" value="">
<input type="text" name="email" value="">
</form>
<form id="join2" method="post" action="url1">
<input type="hidden" name="donate" value="shoes">
<input type="text" name="pairs" value="">
<input type="text" name="style" value="">
<input type="text" name="full_name" value="">
<input type="text" name="email" value="">
</form>
<select id="formList">
<option value="">Select form..</option>
<option value="join1">Join1</option>
<option value="join2">Join2</option>
</select>
<button id="submitBtn">Submit</button>
And this is the javascript for making it happen (using jQuery):
$('#submitBtn').on('click',function(){
var selectedForm = $('#formList').val();
if(selectedForm){
$('#'+ selectedForm).submit();
}
});
the example is also available as a jsfiddle:
https://jsfiddle.net/k1jf4b4L/
Hope it helps a bit