This question already has answers here:
Stop form refreshing page on submit
(20 answers)
Closed 2 years ago.
I'm trying to get information from a form on HTML using Javascript, convert it to a JSON string and then send it to a PHP server to post, however, I'm running into the issue of receiving the data.
When the return value in the function addEmployee() is false, the PHP can grab the information but does not update the page. Whereas if the return value is set to true, it would update the page, but is unable to get the data from client, I need it for it to both so I am confused. I also tried implementing AJAX code, but it didn't seem to work.
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Assignment 7</title>
<link rel="stylesheet" href="style.css" type=text/css>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<form id="theForm" action="process.php" method="post">
<fieldset>
<legend>Add an Employee</legend>
<label for="firstName">First Name</label>
<br>
<input id="firstName" name="firstname" type="text">
<br>
<label for="lastName">Last Name</label>
<br>
<input id="lastName" name="lastname" type="text">
<br>
<label for="department">Department</label>
<br>
<select id="department" name="department" id="department">
<option value="Engineering">Engineering</option>
</select>
<br><br>
<input id="submit" type="submit">
</fieldset>
</form>
</body>
</html>
JavaScript Code:
var employees = [];
function generateID() {
return Math.random().toString().slice(2, 10);
}
function addEmployee() {
'use strict';
var fname = document.getElementById("firstName").value;
var lname = document.getElementById("lastName").value;
var dep = document.getElementById("department").value;
var id = generateID();
for(var i=0; i<employees.length-1; i++){
if(employees[i].id === id) {
id = generateID();
i = 0;
}
}
var employee = {
id:id,
fname:fname,
lname:lname,
dep:dep,
count:employees.length+1
};
employees.push(employee);
var JSONstring = JSON.stringify(employee);
const xhr = new XMLHttpRequest();
xhr.open("POST", "process.php");
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(JSONstring);
return true;
}
function init() {
'use strict';
document.getElementById("theForm").onsubmit = addEmployee;
}
window.addEventListener("load", init);
PHP Code:
<!DOCTYPE html>
<html>
<head>
<title>PHP</title>
</head>
<body>
<?php
$request = file_get_contents("php://input");
$arr = json_decode($request, true);
$browser = get_browser(null, true);
echo nl2br("Employee Added \r\n");
echo nl2br("Name: " . $arr["lname"] . ", " . $arr["fname"] ."\r\n");
echo nl2br("Department: " . $arr["dep"] ."\r\n");
echo nl2br("Employee ID: " . $arr["id"] ."\r\n");
echo nl2br("Hire Date: " . date("D M j Y") ."\r\n");
echo nl2br("Total Employees: " . $arr["count"] ."\r\n");
echo nl2br($browser["browser"] ."\r\n");
?>
</body>
</html>
I understand that I can grab the information directly from PHP but sending a JSON to the server is one of my assignment's requirements so I do not have a choice. Please help me.
A couple things you are doing wrong here. You are sending a url-encoded POST request AND a XHR request when you click submit. The url-encoded POST is coming from action="process.php" in the input tag. Since the form post also causes a page reload the XHR gets terminated prematurely. You should remove that action and also add event.preventDefault() to your addEmployee call.
Open the network panel in the dev tools of your browser and you will see both requests.
Related
So im learning about jquery and ajax. Originally i did an old school php page, where when i submit the form, the data gets stored in a database, and then the webpage loads a new page and tells me i've successfully added a student... I'm not trying to implement ajax and jquery to my code, but i my js script isn't working. I'm trying to call an Alert() just to test if jquery is working, but no alert popup appears when i click the submit button.
This is what i have so far:
addStudent2.php code:
<!DOCTYPE html>
<html>
<head>
<title>Adding Student With AJAX</title>
</head>
<body>
<form action = "userInfo.php" id="myForm" method="post">
<p>Name:
<input type="text" name="name" value=""/>
</p>
<p>Age:
<input type="text" name="age" value=""/>
</p>
<input type="submit" id="submit" value="Add"/>
<div id="result"></div>
<script src="http://code.jquery.com/jquery-3.2.0.min.js" type = "text/javascript"></script>
<script src="my_script.js" type = "text/javascript"></script>
</form>
</body>
</html>
userInfo.php code:
<?php
include('connection.php');
$name = $_POST['name'];
$age = $_POST['age'];
$query = "INSERT INTO student2 (first_name, age) VALUES(?, ?)";
$var = array($name,$age);
$response = sqlsrv_query($conn, $query, $var);
if($response == true){
echo "Student has been added";
}
else{
echo nl2br("Insertion failed\n");
die( print_r( sqlsrv_errors(), true));
}
?>
my_script.js code:
$('input#submit').on('click', function(){
alart(1);
});
i know my javascript or jquery library isn't working, because i'm not getting an alert popup when i click on the submit button.
Could someone please help?
The problem was the js script was not updating on the browser, i had to force refresh the page by pressing "Ctrl + F5" here.
Also I changed input#submit to #submit:
$('#submit').on('click', function(){
alert(1);
});
...and of course changed "alart(1)" to "alert(1)" lol.
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 .
need your advice, I have a form with some many fields, i use it to post to database, it's simply if i post it one by one. But it's so heavy if we have thousands data to post. i wanna post it cumulatively.
For now i use javascript, i add it to an array for temporary storage then show it with table under form. i want to use this array then post it into array variable of PHP. Then i can post to database. But i don't know how to do it if it on the same page. Because javascript is client side, and PHP is server side.
Is there any idea?
EDITED :
this my code, I have not made it in the table:
<!DOCTYPE html>
<html>
<body>
<label>Fruit Name</label> :<br>
<input type="text" id="text1"/><br>
<label>Nominal</label> :<br>
<input type="text" id="text2"/><br><br>
<button onclick="myFunction()">Add</button><button onclick="tableCreate()">Add</button>
<p id="demo"></p>
<?php $a = array(); ?>
<script>
var products = [];
function myFunction() {
var text1 = document.getElementById("text1").value;
var text2 = document.getElementById("text2").value;
var temp = text1 + "-" + text2;
products.push(temp);
document.getElementById("demo").innerHTML = products;
}
</script>
<hr>
<form action="" method="post">
<button type="submit" name="test" value="Test">Save</button>
</form>
<?php
if(isset($_POST['test'])){
// get array products from javascript, isn't possible?
}
?>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
You can make use of php for submitting a form and inserting the record to database.Write php script on the same page which will be executed on form post.
Save the following code snippet to a php file name as currentPhpFileName.php and execute it over localhost.
<!DOCTYPE html>
<html>
<body>
<form action="currentPhpFileName.php" method="post">
<input type="text" name="fieldName1" value="testValue1" />
<input type="text" name="fieldName2" value="testValue2" />
<button type="submit" name="test" value="Test">Save</button>
</form>
<?php
if($_SERVER['REQUEST_METHOD'] === 'POST')
{
print_r($_POST['fieldName1']);
print_r($_POST['fieldName2']);
foreach($_POST as $value)
{
print_r($value);
//database connection
//logic to insert records into database
}
}
?>
Hi i am trying to save value and alert them using ajax which i am insert using php in my sql table but my alert is not working
Here is my code
demo.php
<html>
<head>
<script>
function my(){
var name = document.getElementById("name").value;
var last_name = document.getElementById("last_name").value;
document.getElementsById('div1').style.backgroundColor = green;
var dataString = 'name='+name+'&last_name='+last_name;
$.ajax({
type:'POST',
data:dataString,
url:'demo.php',
success:function(data) {
alert(data);
}
});
} </script>
</head>
<body>
<form action="" method="post">
<input type="text" name="name" id="name" value="" />
<input type="text" name="last_name" id="last_name" value="" />
<input type="submit" name="Update" id="update" value="Update" onclick="my();" />
</form>
<div id="div1" style="width:300px;height: 50px;background-color: yellow;" >
</div>
</body>
</html>
<?php
include('conn.php');
if (isset($_POST['Update'])) {
$name = $_POST['name'];
$last_name = $_POST['last_name'];
echo $name;
$insert = "insert into ajaxsave values('$name','$last_name')";// Do Your Insert Query
if(mysql_query($insert)) {
echo "Success";
} else {
echo "Cannot Insert";
}
}?>
demo.html
<html>
<head>
</head>
<body>
<div id="div2" style="width:300px;height: 50px;background-color: yellow;" >
</div>
</body>
</html>
here i want when i submit form them div color should change which is in demo.html
where i am wrong in this code
and how can i achieve my goal
Any help will be appreciated
changes you need to make:
add jquery as a dependency as you are using $.ajax utility function which is provided by Jquery.
As you are using Jquery, you could use its selectors for getting values of elements and binding functions to dom elements. I have commented it in the source code.
You are using a form with a submit button and executing the ajax call on click of it. But you need to prevent the page from submitting the form by preventing the default behavior of the submit button. Refer event.preventDefault();
Move the php ajax response part to the top and call exit() once your response is complete. Else your ajax response will include the whole page html source also.
.
<?php
include('conn.php');
if (isset($_POST['Update'])) {
$name = $_POST['name'];
$last_name = $_POST['last_name'];
$insert = "insert into ajaxsave values('$name','$last_name')";// Do Your Insert Query
if(mysql_query($insert)) {
echo "Success";
} else {
echo "Cannot Insert";
}
//Call exit as your ajax response ends here. You dont need the html source along with it.
exit();
}
?>
<html>
<head>
</head>
<body>
<form action="" method="post">
<input type="text" name="name" id="name" value="" />
<input type="text" name="last_name" id="last_name" value="" />
<input type="submit" name="Update" id="update" value="Update" />
</form>
<div id="div1" style="width:300px;height: 50px;background-color: yellow;" >
</div>
<!-- include jquery dependeny before your js code block -->
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$("#update").on("click",function(event) {
//Prevent Default submit button behavour. Prevent the form from submission.
event.preventDefault();
// using Jquery selectors for better readability of code.
var name = $("#name").val();
var last_name = $("#last_name").val();
$("#last_name").css("background-color","green");
$.ajax({
type:'POST',
data:{name:name,last_name:last_name,Update:true},
url:'demo.php',
success:function(data) {
alert(data);
}
});
});
</script>
</body>
</html>
You send two parameters in "dataString" variable, and then in php check undefined variable "Update"
So, just replace string
if (isset($_POST['Update'])) {
to
if (isset($_POST['name']) && isset($_POST['name'])) {
And add this line to tag
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
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>