How to compare two input values when type is number and need get the value from a string? and why type=number can't parse values from php strings?
Error: The specified value "'.$total2.'" cannot be parsed, or is
out of range.
I found this code at this amazing answer: Enable submit button if value greater or equal to the specified value
But in this example the input get value from input.
For something reason the type=number can't handle correctly when an value stored as string is specified.
There is the code ready to copy and paste:
<?php
$total2 = "50";
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
let $form = $('form');
let $total1 = $('#total1');
let $total2 = $('#total2');
let $submitButton = $(':submit');
$form.on('submit', function(event) {
let val1 = Number($total1.val());
let val2 = Number($total2.val());
if (val1 < val2) { // If condition is NOT met.
event.preventDefault(); // Default submit from happening.
return false; // Stop function.
}
});
$form.on('input', function(event) {
let val1 = Number($total1.val());
let val2 = Number($total2.val());
console.log(val1, val2)
let isDisabled = val1 < val2; // Will return true or false.
$submitButton.prop('disabled', isDisabled);
});
});
</script>
<form method="post" action="order.php">
<label for="total1">First Number</label>
<input type="number" id="total1" value="0" />
<br>
<label for="total2">Second Number</label>
<input type="number" id="total2" value="'.$total2.'" hidden />
<br>
<input type="submit" value="submit" disabled title="Not Relevant">
</form>
<?php echo $total2;?>
</body>
</html>
I can print string $total2 echo successfully.
How to bypass this?
Any hint is welcome
Thanks
PHP opening/closing tags are missing from the HTML input.
<input type="number" id="total2" value="'.$total2.'" hidden />
// should be
<input type="number" id="total2" value="<?php echo $total2; ?>" hidden />
If you don't use the opening/closing tags, PHP won't know that it should treat the $total2 code as PHP code.
Related
I have a simplified HTML form that I would like to multiply entered amount by 100 and send it with GET method to any endpoint.
Here is my form:
<body>
<form method="get" action="https://endpoint/purchase.php">
<input type="text" name="description" value="description">
<input type="text" name="amount">
<input type="submit" value="pay">
</form>
</body>
And my Js
var $output = $("#output-value");
$("#input-value").keyup(function() {
var value = parseFloat($(this).val());
$output.val(amount*100);
});
I'm stuck here, as I don't know how to connect them to send a proper value where I want?
Thank You. That helps a lot, I have another problem, where, in which the URL passed in GET is shortened / cut out?
So below is an original URL
https://sklep.przelewy24.pl/zakup.php?z24_id_sprzedawcy=88696&z24_kwota=10000&z24_currency=pln&z24_nazwa=test&z24_opis=test&z24_return_url=http%3A%2F%2Fwww.przelewy24.pl&z24_language=pl&k24_kraj=PL&z24_crc=ca056736&
I would like to be able to dynamiclly trnasfer z24_kwota (/z24_amount) so my form can transfer the amount as I want.
After tweaking the code above to my needs:
<html>
<head>
<meta charset="utf-8">
<title>Formularz uproszczony</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<form id="testForm" method="get" action="https://sklep.przelewy24.pl/zakup.php?z24_id_sprzedawcy=88696&z24_currency=pln&z24_nazwa=test&z24_opis=test&z24_return_url=http%3A%2F%2Fwww.przelewy24.pl&z24_language=pl&k24_kraj=PL&z24_crc=ca056736&">
<input type="text" name="z24_kwota" value="Kwota">
<input type="submit" value="zapłać ">
<script>
$("#testForm").on('submit', function() {
var amount = $("#testForm input[name='z24_kwota']")
var value = parseFloat(amount.val());
value = value * 100 || 0; // set zero for non number
if (prompt("Kwota przekazywana do Przelewy24 to: ", value)) {
amount.val(value);
return true
}
else {
console.log('submission aborted, value not multiplied')
return false;
}
});</script>
</form>
</body>
</html>
I see that only first part is in the browser adress bar:
'''https://sklep.przelewy24.pl/zakup.php?z24_kwota=2000'''
Can someone tell me why that is, and how to fix it ?
This is common problem, please see browser console (F12) and check for error, you don't have element with ID #input-value, #output-value and variable amount
if you want to change input name amount before submit use submit event
$("#testForm").on('submit', function() {
var amount = $("#testForm input[name='amount']")
var value = parseFloat(amount.val());
value = value * 100 || 0; // set zero for non number
if (prompt("amount value now: ", value)) {
amount.val(value);
return true
}
else {
console.log('submission aborted, value not multiplied')
return false;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="testForm" method="get" action="https://endpoint/purchase.php">
<input type="text" name="description" value="description">
<input type="text" name="amount">
<input type="submit" value="zapłać z przelewy24.pl">
</form>
I'm trying to make sure the input in a particular field is just an 11 digit number, however my if condition does not seem to be working:
Javascript:
<script>
function check() {
var x = document.forms["myform"]["mobile"].value;
if (!/^\d{11}$/.test(x)) {
myform.action="gender.html";
else {
myform.action="mobilerror.html"
}
}
</script>
And the HTML is:
<form id="myform" onsubmit="check();" >
<input class="input" type="text" name="mobile" required="required"
oninvalid="this.setCustomValidity('Number is empty')" oninput="setCustomValidity('')" />
</form>
Please help!
You can try maxlength and type attribute of input field:
<input class="input" type="text" name="mobile" maxlength="11" type="number" required="required"/>
If it satisfy your case then you don't need to call javascript function.
Your regular expression is working just fine. I think the error lies in the "if" condition. Try changing
if (!/^\d{11}$/.test(x)) {
myform.action="gender.html";
else {
myform.action="mobilerror.html"
}
to this
if (/^\d{11}$/.test(x)) {
myform.action="gender.html";
else {
myform.action="mobilerror.html"
}
As you can see I just took off the negation in the expression.
Note: Assuming that the "mobilerror.html" is shown when the user didn't type the 11 digit as expected.
Try this
function check() {
var x = document.forms["myform"]["mobile"].value;
var pattern = new RegExp("^1?([1-9])(\\d{10})");
if (pattern.test(x)) {
myform.action="gender.html";
} else {
myform.action="mobilerror.html"
}
}
^1?([1-9]) checks if the first number is not zero, so that the input value is numerically a 11-digit number. If you don't want it you can remove it.
This help you :
use type 'number':
<input type="number" id="number" class="input">
and test number digits is 11 or not with :
var patt = /.{11}/;
Example :
<html>
<head>
<style>
</style>
</head>
<body>
<form id="myform" onsubmit="check()" >
<input id="number" class="input" type="number">
<button type="submit">Submit</button>
</form>
<script>
var patt = /.{11}/;
function check(){
var num = document.getElementById("number").value;
var frm = document.getElementById("myform");
if(patt.test(num))
frm.action ="mobilerror.html"
else
frm.action = "gender.html";
}
</script>
</body>
</html>
In Sample.php I have
<html>
<head>
<title>Test</title>
</head>
<script language="javascript">
var count = 1;
function addRow(divId) {
var parentDiv = document.getElementById(divId);
var eleDiv = document.createElement("div");
eleDiv.setAttribute("name", "olddiv");
eleDiv.setAttribute("id", "olddiv");
var eleText = document.createElement("input");
eleText.setAttribute("type", "text");
eleText.setAttribute("name", 'textbox' + count);
eleText.setAttribute("id", "textbox" + count);
var eleBtn = document.createElement("input");
eleBtn.setAttribute("type", "button");
eleBtn.setAttribute("value", "delete");
eleBtn.setAttribute("name", "button");
eleBtn.setAttribute("id", "button");
eleBtn.setAttribute("onclick", "deleteRow('button')");
parentDiv.appendChild(eleDiv);
eleDiv.appendChild(eleText);
eleDiv.appendChild(eleBtn);
var golu=count.toString();
document.getElementById("h").value= golu;
count++;
}
function deleteRow(tableID) {
var div = document.getElementById('olddiv');
if (div) {
div.parentNode.removeChild(div);
}
var golu=count.toString();
document.getElementById("h").value= golu;
}
var golu=count.toString();
document.getElementById("h").value= golu;
</script>
<body>
<form action="Page.php" method="post">
<input type="button" value="Add Row" onclick="addRow('dataTable')" />
<div id="dataTable"><INPUT type="text" name="textbox0" id="textbox0"/></div>
<input type"hidden" id="h" name="h" value="0"/>
<button type="submit" name="submit" id="submit">Submit</button>
</form>
</body>
</html>
In Page.php I have
<?php
include_once('db.php');
$x=$_POST["h"];
$y=intval($x);
$z=0;
while($z<=$y){
$var[z]=$_POST['textbox'][$z];
echo "$var[$z]";
$sql="INSERT into Data values('".$var[z]."');";
$query = mysql_query($sql);
}
?>
My problems:
My aim is to receive all the value of textbox0, textbox1,..etc. by using loop in page.php.
But I am not able to get the desired result. Actually after submitting, Pape.php appears empty. After receiving all, I also want them to store in MySQL Database.
Whenever I delete a textbox the sequence of the textboxes' id doesn't change.
Please tell me what to do.
You can do this following way.
Whenever you create textbox using JavaScript or jQuery, the maintain the count of the text box, suppose you have two textbox by default on the HTML, so store that count into the hidden field like you did that:
<input type"hidden" id="h" name="h" value="0"/>
Then try this, you are reading the value in wrong way:
Instead of using $var[z]=$_POST['textbox'][$z]; use $var[z]=$_POST['textbox'.$z];.
I think instead of editing each textbox id value, just remove it from HTML and check into the PHP code:
<?php
include_once('db.php');
$x=$_POST["h"];
$y=intval($x);
$z=0;
while($z<=$y){
if(isset($_POST['textbox'.$z]) && !empty($_POST['textbox'.$z])){
$var[z]=$_POST['textbox'.$z];
echo "$var[$z]";
$sql="INSERT into the Data values('".$var[z]."');";
$query=mysql_query($sql);
}
}
?>
Another way, to solve both of your problems :)
test.html:
<html>
<title>TEST</title>
<body>
<form action="test.php" method="post">
<input type="text" name="demo[]" value=""/>
<input type="text" name="demo[]" value=""/>
<input type="text" name="demo[]" value=""/>
<input type="text" name="demo[]" value=""/>
<input type="text" name="demo[]" value=""/>
<input type="submit">
</form>
</body>
</html>
test.php:
print_r($_POST);
exit;
output:
Array ( [demo] => Array ( [0] => zxc [1] => zxc [2] => ewe [3] => ecc [4] => zzx ) )
I'm trying to make a form where you input a number to a textbox and based upon that a text response is put in a textbox.
This is an example of what I have been trying to make work:
<html>
<head>
<script type="text/javascript">
function calculate()
{
var ph = document.test.ph.value;
if (ph > 7.45) {
var str = "Alkalosis";
}
else if (ph < 7.35) {
var str = "Acidosis";
}
else {
var str = "Normal";
}
document.test.acidalk.value = str;
}
</script>
</head>
<body>
<form name="test">
pH<input type="textbox" name="ph"><br>
<input type="submit" value="Calculate"><br>
<input type="textbox" id="acidalk" >
</form>
</body>
</html>
The idea of what I'm trying to achieve is if a number higher than 7.45 is put in the first text box, the button clicked, then the word "Alkalosis" is put in the second text box, but if the number is less than 7.35, the word is "Acidosis" instead.
Any help would be greatly appreciated
Well, you're most of the way there. Instead of having the button be a submit button, try
<input type="button" onclick="calculate();" value="Calculate" />
Base of your code This will be a way to do it:
<html>
<head>
<script type="text/javascript">
function calculate(){
var ph = document.getElementById('ph').value;
if(ph > 7.45){
var str="Alkalosis";
}else if(ph < 7.35){
var str="Acidosis";
} else{
var str="Normal";
}
document.getElementById('acidalk').value =str;
}
</script>
</head>
<body>
pH<input type="textbox" name="ph"><br>
<button onclick="calculate()">Calculate</button>
<input type="textbox" id="acidalk" >
</body>
</html>
hope helps!
You have the form, you have the function, you just need a way to tie them together. Do it by assigning calculate() as an event handler for the form's submit event. Make sure to return false else the form will be submitted and the result of calculate() will not be seen.
<form name="test" onsubmit="calculate(); return false">
jsfiddle.net/UhJG2
Binding to the form's submit event rather than button's click event has the added benefit of calling the function when enter is pressed. It also ensures the form is not ever accidentally submitted.
With jQuery:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>pH
<input type="textbox" name="ph" id="ph">
<br>
<button id="calculate">Calculate Acid Level</button>
<br />
<input type="textbox" id="acidalk" value="" />
</body>
<script type="text/javascript">
$("#calculate").click(function () {
var ph = $("#ph").val();
if (ph > 7.45) str = "Alkalosis";
else if (ph < 7.35) var str = "Acidosis";
else var str = "Normal";
$("#acidalk").val(str);
});
</script>
</html>
my HTML code:
<form action="Generator.klx" method="post" onsubmit="genarate('hiddenField')">
<input type="hidden" id="hiddenField" name="hidden" value=""/>
<input type="submit" name="submit"/>
</form>
my JavaScript:
function genarate(hiddenField){
var field = document.getElementById(hiddenField);
field.value = "new Value";
}
But it just didnot work :(. Can anybody tell me where I was wrong?
Thank you
Your code as quoted should be working, and does in my tests with a variety of browsers. (I've tried it locally, with a POSTed form, but you can also try it here: http://jsbin.com/ehoro4/1 I've changed the method to GET so you can see the result in the URL.)
My guess is that you have something else on the page with the name or id "hiddenField", other than just the hidden field you've quoted. If you change the name of the field to "fluglehorn" or something else that's (um) unlikely to be elsewhere on your page, it may well work. That's because the namespace used by getElementById is (sadly) quite crowded.
Alternately, are you sure that genarate is appearing at global scope? (E.g., it's outside of all other functions.) Because your onsubmit attribute requires that genarate be global. So this works:
<form action="#" method="get" onsubmit="genarate('hiddenField')">
<input type="hidden" id="hiddenField" name="hidden" value=""/>
<input type="submit" name="submit"/>
</form>
<script>
function genarate(hiddenField){
var field = document.getElementById(hiddenField);
field.value = "new Value";
}
</script>
but for example this would not:
<form action="#" method="get" onsubmit="genarate('hiddenField')">
<input type="hidden" id="hiddenField" name="hidden" value=""/>
<input type="submit" name="submit"/>
</form>
<script>
(function() { // Begin scoping function to avoid global symbols (not uncommon)
function genarate(hiddenField){
var field = document.getElementById(hiddenField);
field.value = "new Value";
}
})();
</script>
Also recommend using a debugger (there's no excuse for not using client-side debuggers here in 2011) to set a breakpoint on the genarate function and walk through, to see what's going wrong.
crud.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="JavaScript.js"></script>
</head>
<body>
<input type="text" name="name" id="name" onfocus="opConfig.reloadPrice()">
<button type="button" onclick="myFun()">submit</button>
<button type="button" onclick="update()">update</button>
<br><br>
<p id="table"></p>
</body>
</html>
JavaScript.js
var arr = [];
var index;
function myFun()
{
var name = document.getElementById('name').value;
arr.push(name);
table();
}
function table(){
var text = "<table border=1><tr><th>username</th><th>action</th></tr>"
for (var i = 0; i < arr.length; i++) {
text+="<tr><td>"+arr[i]+"</td><td><button
onclick=myDELE("+i+");>delete</button><button
onclick=myEdit("+i+");>edit</button></td></tr>"
}
text+="</table>";
console.log(text);
document.getElementById('table').innerHTML = text;
tablehidden();
}
function myDELE(i)
{
var name = arr.splice(i,1);
// name.splice(i,1);
console.log(name);
table();
tablehidden();
}
function tablehidden(){
if (!arr.length) { document.getElementById('table').hidden=true; }
else{document.getElementById('table').hidden=false;}
}
function myEdit(i)
{
text = document.getElementById('name').value = arr[i];
index = i;
}
function update(){
arr[index]=document.getElementById('name').value ;
table();
tablehidden();
}