Do some calculation in javascript onkeypress - javascript

I have a HTML TextBox on my web page that show number of current question (A small web page to answer some question), I want to make shortcut to a question that users want by type number of question in TextBox.
I use this code below but this not work correctly.
For example all questions are 8 and when I enter 15 in TextBox and press Enter, if clause don't work and Question variable set with 15.
I use alert function to trace it and I understand that if clause don't work correctly. Can somebody check it and guide me?
This is all of my code:
<?php
$All = 8;
$URL = "http://localhost/Test.php";
if(isset($_GET["edtQuestionNo"])){
$QuestionNo = $_GET["edtQuestionNo"];
}else{
$QuestionNo = 1;
}
?>
<html>
<head>
<title>Test Page</title>
<script type="text/javascript">
function KeyPress(e, URL, All){
if(e.keyCode === 13){
var Question = document.getElementsByName("edtQuestionNo")[0].value;
if(Question > All){
Question = All;
alert(All + " " + Question + " yes");
}
else{
alert(All + " " + Question + " no");
}
window.open(URL + "?edtQuestionNo=" + Question,"_self");
}
}
</script>
</head>
<body>
<form action="Test.php" method="get" name="FRMQuestion">
<label>Enter question number : </label>
<input type="text" name="edtQuestionNo" id="QuestionNo" value="<?php echo $QuestionNo; ?>"
onkeypress="KeyPress(event,'<?php echo $URL; ?>','<?php echo $All; ?>')">
<br>
<label>Question number is : <?php echo $QuestionNo; ?></label>
</form>
</body>
</html>

I solve it
1. I have to use parseInt function for comparing All and Question value. because they are in different type.
2. I put Question value (after computing) in HTML TextBox again and then open URL.
My code is:
<?php
$All = 8;
$URL = "http://localhost/Test.php";
if(isset($_GET["edtQuestionNo"])){
$QuestionNo = $_GET["edtQuestionNo"];
}else{
$QuestionNo = 1;
}
?>
<html>
<head>
<title>Test Page</title>
<script type="text/javascript">
function KeyPress(e, URL, All){
if(e.keyCode === 13){
var Question = document.getElementsByName("edtQuestionNo")[0].value;
if(parseInt(Question) > parseInt(All)){
Question = All;
}
document.getElementsByName("edtQuestionNo")[0].value = Question;
window.open(URL + "?edtQuestionNo=" + Question,"_self");
}
}
</script>
</head>
<body>
<form action="Test.php" method="get" name="FRMQuestion">
<label>Enter question number : </label>
<input type="text" name="edtQuestionNo" id="QuestionNo" value="<?php echo $QuestionNo; ?>"
onkeypress="KeyPress(event,'<?php echo $URL; ?>','<?php echo $All; ?>')">
<br>
<label>Question number is : <?php echo $QuestionNo; ?></label>
</form>
</body>
</html>

Related

Embedded JavaScript in PHP can not manipulate DOM in HTML

I have a PHP to verify the HTML form (post method). If the value doesn't match, the error message should be added at the HTML page. I test the embedded JS script in console, it works. But it doesn't work in PHP. How can I fix it? Thank you
Here is my code
<!DOCTYPE html>
<body>
<form action="http://localhost/submitTest.php" method="post">
Name: <input type="text" name="name"><br>
E-mail: <input type="text" name="email"><br>
<div id="submitField">
<input type="submit">
</div>
</form>
</body>
</html>
<?php
if ($_GET["name"] == 1 && $_GET["email"] == 2) {
header('Location: http://localhost/table.html');
} else {
$url = 'http://localhost/submitTest.html';
echo "<meta http-equiv='Refresh' content='0;URL=$url'>";
echo "
<script>
var messageP = document.createElement('span');
messageP.style.color = 'red';
var parent = document.getElementById('submitField');
parent.appendChild(messageP);
messageP.innerHTML = 'not match';
</script>";
}
?>
I want to do something like thiserror message

How to send both php and javascript variables as input field value?

I am sending multiple values from the input field with the same name.
It works fine when I just send the custom1 and var 2 but I want to add a javascript variable var3 as well but assigning the value by using document.getElemendById overwrites the input field completely and custom1 and var2 are lost. So how to add a javascript variable var3 at the end so it gets printed under the array index $pieces[2]; in the v.php file.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<?php $var2 = "custom2" ?>
<form action="v.php" method="POST" >
<input id="jsvar" type="text" name="custom" value="custom1,<?php echo $var2; ?>">
<input type="submit" name="" value="send">
</form>
<script type="text/javascript">
var var3 = "custom3";
document.getElementById("jsvar").value = var3;
</script>
</body>
</html>
v.php
<?php
$custom = $_POST['custom'];
$pattern = ",";
$pieces = explode($pattern,$custom, 3);
print_r($pieces);
$custom1 = $pieces[0];
$custom2 = $pieces[1];
echo '<br>';
echo $custom1.'<br>';
echo $custom2.'<br>';
echo $pieces[2];
?>
You could append the data rather than replace it with the new data.
var var3 = "custom3";
document.getElementById("jsvar").value += ","+var3;
Try this below . It's working fine. Review below screen Link
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<?php $var2 = "custom2" ?>
<form action="v.php" method="POST" >
<input id="jsvar" type="text" name="custom" value="custom1,<?php echo $var2; ?>">
<input type="submit" name="" value="send">
</form>
<script type="text/javascript">
var pre_value=document.getElementById("jsvar").value;
var var3 = "custom3";
var new_value = pre_value +','+var3;
document.getElementById("jsvar").value = new_value;
</script>
</body>
</html>

function is executed without being called [closed]

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 7 years ago.
Improve this question
My code is supposed to store the info that the user inserts and store it in a Database.
This function should be called on a button click, but the problem is that the function runs when the page loads and when I press the button.
here is my code
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<?php
function write_command($name,$address,$telephone,$cart){
$servername = 'localhost';
$server_username = 'root';
$server_password = '';
$DB_name = 'OnlineGarcon';
$DB_connect = mysqli_connect($servername,$server_username,$server_password,$DB_name);
if ($DB_connect -> connect_error){
echo 'unable to connect to due to server error!';
}else{
$_write_command = "INSERT INTO `orders`(`name`, `address`, `telephone`, `cart`) VALUES ('$name','$address','$telephone','$cart')";
if ($DB_connect->query($_write_command) == TRUE) {
echo "Order was placed,Thanks!\nyour order was:$cart";
} else {
echo "Server error!";
}
}
}
?>
<center>
<form method="POST">
<input name="name" class="field" placeholder="Full name"></input>
<br>
<br>
<input name="address" class="field" placeholder="Address"></input>
</br>
</br>
<input name="telephone" class="field" placeholder="Telephone/Mobile number"></input>
<br>
<br>
<br>
<br>
<button id="submit">Submit order</button>
</br>
</br>
</br>
</br>
</form>
<script>
$("#submit").click(function(){
alert('<?php
$name = $_POST['name'];
$address = $_POST['address'];
$telephone = $_POST['telephone'];
$cart = $_GET['cart'];
write_command($name,$address,$telephone,$cart);
?>');
});
</script>
</body>
</html>
Using an jQuery Ajax call you you can do this quite simply.
form.php
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<input name="name" id="name" placeholder="Full name">
<input name="address" name="address" placeholder="Address">
<input name="telephone" id="telephone" placeholder="Telephone/Mobile number">
<button id="submit">Submit order</button>
<script type="text/javascript">
$('#submit').click( function() {
$.ajax({
url: "functions.php",
type: "POST",
data: {
name: $('#name').val();
address: $('#address').val();
telephone: $('#telephone').val();
cart: <?php echo $_GET['cart']; ?>
}
});
});
</script>
</body>
</html>
functions.php
<?php
function write_command($name, $address, $telephone, $cart) {
$servername = 'localhost';
$server_username = 'root';
$server_password = '';
$DB_name = 'OnlineGarcon';
$DB_connect = mysqli_connect($servername,$server_username,$server_password,$DB_name);
if( $DB_connect->connect_error ){
echo 'unable to connect to due to server error!';
} else {
$_write_command = "INSERT INTO `orders`(`name`, `address`, `telephone`, `cart`) VALUES ('$name','$address','$telephone','$cart')";
if ($DB_connect->query($_write_command) == TRUE) {
echo "Order was placed,Thanks!\nyour order was:$cart";
} else {
echo "Server error!";
}
}
}
write_command( $_POST['name'], $_POST['address'], $_POST['telephone'], $_POST['cart'] );
This will happen , what you need to do is
Method 1: <form method="POST" onsubmit="callFuntion()">
Method 2:
<form action="demo_form.php" method="post">
put all your php code in file demo_form.php and when the submit is clicked it will go that file , which will help you to call the
function once not twice .

Values to PHP function parameters from Button click Javascript function

Friends,
I'm a newbie to PHP.
I've had a problem to deal with that I couldn't understand, so I posted it in this thread.
I've dynamically created 2 textboxes and a button.
Question ID text field
Question text field
Change Button
for the change button I need to write a 'onclick' javascript to pass Question ID
and Question value to a PHP function (set_id) written inside the Same file. In fact that’s why i
Called Form action $_SERVER[“PHP_SELF”].
Here’s my code.
<html>
<head>
<script>
function getvalue(value)
{
var qid_value = 'qid_'+value.substring(4);
alert('QID = '+ document.getElementById(qid_value).value + ' QUESTION = ' + document.getElementById(value.substring(4)).value);
/*
I created this javascript alert to test the id s of textboxes and their values
*/
}
</script>
</head>
<body>
<form action="<?php echo $_SERVER["PHP_SELF"]; ?>" method="post">
<!-- These fields are dynamically created -->
<input type="text" id="'.$var_id.'" name="'.$var_id.'" value="'.$row['qid'].'" readonly size="2 px"/>
<input type="text" id="'.$var_question.'" name="'.$var_question.'" value="'.$row['question'].'" style="size:auto"/>
<input type="button" id="'.$var_question.'" name="'.$var_question.'" value="Change" onclick="getvalue(this.name)"/>
<!-- These fields are dynamically created -->
</form>
</body>
</html>
<?php
$msg= "";
function display($qid,$question)
{
require('uni_db_conn.php'); // this is my db connection
$qid = $_POST[$qid];
$question= $_POST[$question];
$query = "UPDATE question SET question='.$question.' WHERE qid='.$qid.'";
$result = mysql_query($query);
if(!$result)
{
$msg= 'Cant Insert Values to the Table !'.mysql_error();
}
else
{
$msg = 'Successfully Added to the Table !';
}
echo '<label>'.$msg.'</label>';
}
function set_id($qid,$question)
{
if(isset($_POST[$question]))
{
display($qid,$question);
}
}
?>
Thank You ! Sorry If there was any mistake.
Try this code
<?php
if(isset($_POST['submit'])){
$QID = $_POST["qid"];
$QUE = $_POST["question"];
echo $QID;
echo $QUE;
}
?>
<html>
<head>
<script language="javascript">
function getvalue()
{
var valid= true;
var id = document.getElementById("ID").value;
var ques = document.getElementById("ques").value;
return valid;
}
</script>
</head>
<body>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" onSubmit=" return getvalue()" >
<input type="text" id="ID" name="qid"/>
<input type="text" id="ques" name="question"/>
<input type="submit" name="submit" value="Change"/>
</form>
</body>
</html>

onBlur and onSubmit interference

Here is my complete script... You can just create test.php and throw it in.
It looks like this:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="javascript" type="text/javascript" src="<?php echo '' . $site_url . '' ?>includes/libary.js"></script>
<script type="text/javascript">
function saveScrollPositions(theForm) {
if(theForm) {
var scrolly = typeof window.pageYOffset != 'undefined' ? window.pageYOffset : document.documentElement.scrollTop;
var scrollx = typeof window.pageXOffset != 'undefined' ? window.pageXOffset : document.documentElement.scrollLeft;
theForm.scrollx.value = scrollx;
theForm.scrolly.value = scrolly;
}
}
</script>
</head>
<body>
<div style="padding: 200px 0 200px 0;">
<?php
$notes = $_POST['internal_notes'];
$bonid = $_POST['reciept_id'];
echo '<form name="notes" method="post" action="test.php" onsubmit="return saveScrollPositions(this);">';
echo '<input type="hidden" name="scrollx" id="scrollx" value="0" />';
echo '<input type="hidden" name="scrolly" id="scrolly" value="0" />';
echo '<input type="hidden" name="reciept_id" value="' . $_POST['reciept_id'] . '">';
echo '<textarea name="internal_notes">';
if ($_POST['internal_notes'] == '') {
echo 'No internal notes.';
} else {
echo $_POST['internal_notes'];
}
echo '</textarea>';
echo '<input type="submit" name="submit" value="Save">';
echo '</form>';
$scrollx = 0;
$scrolly = 0;
if(!empty($_REQUEST['scrollx'])) {
$scrollx = $_REQUEST['scrollx'];
}
if(!empty($_REQUEST['scrolly'])) {
$scrolly = $_REQUEST['scrolly'];
}
?>
</div>
<script type="text/javascript">
window.scrollTo(<?php echo "$scrollx" ?>, <?php echo "$scrolly" ?>);
</script>
This works fine. When i press Save, it posts and the page returns to the scroll position.
However i want to remove the submit-button, and insetad use onblur="submit();" on the "internal_notes" field.
However... This does not work. How do I combine the submit and the "saveScrollPositions()" function?
If your js functions are ok, I really would like to see submit(), try this:
1) add to your form an ID, i.e: id='notes'
2) change de onblur by this code:
onblur="saveScrollPositions(document.getElementById('notes')); submit();"
here you can see a functional example

Categories