This question already has answers here:
How to submit a form with JavaScript by clicking a link?
(9 answers)
Closed 2 years ago.
i have a db records echoed out and formatted in a table with a delete link(icon) on each table row, indexed with a while loop as the data gets fetched from db.
On clicking the delete icon, i expect the particular indexed row to get deleted from db and also from the table .
Here are my codes:
<script>
function submitForm(){
document.getElementById("myform").submit()
}</script>
</head>
<body>
<table>
<tbody>
<?php
$rowIndex = 0;
while($row = mysqli_fetch_row($result){
$user = $row[0];
$address=$row[1];
$phone = $row[2];
echo '<tr>
<td>'.$user.'</td>
<td>'.$address.'</td>
<td>'.$phone.'</td>
<td>Delete(icon)
</tr>'
$rowIndex+=1;
}
?>
</tbody>
</table>
<form method ="post" id ="myform" action ="test.php" >
<input type="hidden" name="del">
</form>
on clicking the 'Delete' Link , i expect the javascript to submit the form and move to 'test.php'(though i intend to remain on same form, but that way i will know my form ACTUALLY got submitted). Please any help will be appreciated.
<!DOCTYPE html>
<html>
<head>
<title>test javascript form test </title>
</head>
<body>
<form action="#" method="post">
<label>Username</label>
<input type="text" id="name"><br>
<label>Password</label>
<input type="password" id="password"><br>
<button onclick="data()" type="button">Submit</button>
</form>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script>
function data(){
var name = $("#name").val();
var pass = $("#password").val();
alert(name);
alert(pass);
}
</script>
</body>
</html>
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.
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
}
}
?>
I have a select field with a add button next to it inside a form. The user will click the add button and create as many extra select fields as he wants and then select an item from each of the select fields. When he submits the form, I want the values of all selected items in an array.
Can any one help please? Thanks.
<?php
session_start();
include ('../conn.inc.php');
?>
<!DOCTYPE>
<html>
<head>
<script>
function addRow(r){
var root = r.parentNode;
var allRows = root.getElementsByTagName('tr');
var cRow = allRows[0].cloneNode(true)
var cInp = cRow.getElementsByTagName('input');
for(var i=0;i<cInp.length;i++){
cInp[i].setAttribute('name',cInp[0].getAttribute('name')+'_'+(allRows.length+1))
}
var cSel = cRow.getElementsByTagName('select')[0];
cSel.setAttribute('name',cSel.getAttribute('name')+'_'+(allRows.length+1));
root.appendChild(cRow);
}
</script>
</head>
<body>
<form method="get" action="abc()">
<table>
<tr>
<td>
<select name="product_code" id="product_code">
<?php
$sql= mysql_query("select * from product_table where id > 0 order by product_code");
while($row = mysql_fetch_array($sql))
{
$pcode = $row['product_code'];
echo "<option value=\"$row[id]\">".$pcode."</option>";
}
?>
</select>
</td>
<td>
<input name="button" type="button" value="+" onick="addRow(this.parentNode.parentNode)">
</td>
</tr>
</table>
<input type="submit" value="Submit" />
</form>
</body>
</html>
It's more simple than what you've done.
You should set the name attribute of all your selects something like productCode[] (with the brackets).
PHP will automatically create you an $_POST['productCode'] variable containing all the values in an array..
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>