Sending information by javascript into PHP - javascript

I want to send information of 1 variable with javascript into PHP.
So , i used this code (in index.php) :
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
<script>
$.post('http://localhost/test/index.php', {
name: $('.class').html();
});
$(document).ready(function(){
$("#my_form").on("submit", function () {
var hvalue = $('.class').text();
$(this).append("<input type='hidden' name='name' value=' " + hvalue + " '/>");
});
});
</script>
<form action="" method="post" id="my_form">
<div class="class" name="name">
this is my div
</div>
<input type="submit" value="submit" name="submit" />
</form>
<?php
if(isset($_POST['name'])){ $name = $_POST['name']; }
echo $name;
But i see this error :
Notice: Undefined variable: name in C:\Program Files\EasyPHP-5.4.0RC4\www\test\index.php on line 22
What can i do ?

$name is not defined. You have the echo outside of the if statement, move it inside the braces.
if(isset($_POST['name'])) {
$name = $_POST['name'];
echo $name;
}
Also, you post to submit.php but this code is for index.php... so you need to fix that, too.

also , In using jQuery , you didn't closed the tag :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
close like this and use this code :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$.post('http://localhost/test/index.php', {
name: $('.class').html();
});
$(document).ready(function(){
$("#my_form").on("submit", function () {
var hvalue = $('.class').text();
$(this).append("<input type='hidden' name='name' value=' " + hvalue + " '/>");
});
});
</script>
<form action="submit.php" method="post" id="my_form">
<div class="class" name="name">
this is my div
</div>
<input type="submit" value="submit" name="submit" />
</form>

Related

Javascript : How to dynamic form submit

i try with below code but it's not working Please help me if any one know
<script>
function update(i){
document.myform[i].submit();
}
</script>
<?php
for($i=0;$i<5;$i++){
?>
<form name="myform[]" action="act.php" method="POST">
<input type="text" name="fname" value="">
click here
</form>
<?php
}
?>
Just change the link for an input of type submit:
<form name="myform[]" action="act.php" method="POST">
<input type="text" name="fname" value="">
<input type="submit" name="aname" value="click here">
</form>
It will automatically submit the form where is contained, no need for this javascript:
<script>
function update(i){
document.myform[i].submit();
}
</script>
Edit:
in order to submit a form from javascript..
document.getElementsByName("myForm")[i].submit();
i got solution
<script>
function update(i){
console.log(i);
//alert(document.myform[i].fname.value);
var oForm = document.forms[i];
// alert(document.forms[i].fname.value);
// alert(oForm.fname.value);
oForm.submit();
//document.myform[i].submit();
}
</script>
<?php
for($i=0;$i<5;$i++){
?>
<form name="myform<?php echo $i;?>" action="act.php" method="POST">
<input type="text" name="fname_<?php echo $i;?>" id="fname_<?php echo $i;?>" value="">
click here
</form>
<?php
}
?>
<script>
function update(id){
var formName = jQuery(id).closest('form').attr('name')
alert(formName);
}
</script>
or js:
<script>
function update(id){
var el = document.getElementById(id);
var r3 = el.closest("form");
console.log(r3);
}
</script>

How to update the content of a div when a form is submitted using javaScript

I would like to update the content of #contentRight when either editForm-1 or editForm-2 is submitted with the submitted form values.
I can get the response output from the updateDB.php file and see it at the
alert("Data: " + theResponse + "\nStatus: " + status);
However it does not update the div content with either of the following 2 lines.
$("#contentRight").html(theResponse);
document.getElementById("contentRight") = theResponse;
[EDIT-------------]
I added some styles to see what element is occupying what space. If you click on #saveEdit-1 (which is the element with the blue border) The script works as it supposed to. When you click on the #saveEdit-1 button element (which is the arrow) the div does not get updated. WHY?
Here is the working example
if I change the click listeners to
$("#saveEdit-1 button").click(function(){ performAjaxSubmission(1); });
$("#saveEdit-2 button").click(function(){ performAjaxSubmission(2); });
it still does not work. Working Example
[/EDIT-------------]
Any help would be greatly appriciated.
Here are the files.
<?php require_once("includes/functions.php"); ?>
<!DOCTYPE html>
<html>
<head>
<style>
#editForm-1, #editForm-2 {
border:1px solid red;
}
#saveEdit-1, #saveEdit-2 {
border:2px solid blue;
}
#saveEdit-1 button, #saveEdit-2 button {
border:3px solid green;
}
</style>
<link href="/test/stylesheets/_appStyleAdmin.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="javascripts/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="javascripts/jQuery-UI/jquery-ui.min.js"></script>
<script type="text/javascript">
function performAjaxSubmission(formID) {
// alert(formID);
var page = "edit-Test";
var URL = "http://310it.com/test/updateDB.php?page=" + page;
var formData = $("#editForm-" + formID).serialize();
// alert(formData);
$.post(URL , formData, function(theResponse){
alert("Data: " + theResponse + "\nStatus: " + status);
$("#contentRight").html(theResponse);
// $("#contentRight").text(theResponse);
// document.getElementById("contentRight") = theResponse;
// document.getElementById("contentRight").innerHTML(theResponse);
});
}
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#saveEdit-1").click(function(){ performAjaxSubmission(1); });
$("#saveEdit-2").click(function(){ performAjaxSubmission(2); });
});
</script>
</head>
<body>
<div id="contentRight">
<p>AJAX Response will be displayed here.</p>
<p> </p>
<span></span>
</div><!-- endof contentRight -->
<form id="editForm-1" name="editForm-1" method="post" action="">
<input type="hidden" name="action" id="action" value="edit">
<input type="hidden" name="formID" id="formID" value="1">
<div class="addNewItem-InputField">
<p>Edit Test - 1</p>
<label for="editTestName"><input type="text" name="editTestName" id="editTestName" /></label>
</div><!-- endof addNewItem-InputField -->
<div id="saveEdit-1" name="saveEdit-1" class="submitButton">
<button title="SAVE EDIT TEST" value="Submit" name="submit" type="submit"><img src="/test/images/icon-update-02.png"></button>
</div><!-- endof submitButton -->
</form>
<p>&nbsp</p>
<form id="editForm-2" name="editForm-2" method="post" action="">
<input type="hidden" name="action" id="action" value="edit">
<input type="hidden" name="formID" id="formID" value="2">
<div class="addNewItem-InputField">
<p>Edit Test - 2</p>
<label for="editTestName"><input type="text" name="editTestName" id="editTestName" /></label>
</div><!-- endof addNewItem-InputField -->
<div id="saveEdit-2" name="saveEdit-1" class="submitButton">
<button title="SAVE EDIT TEST" value="Submit" name="submit" type="submit"><img src="/test/images/icon-update-02.png"></button>
</div><!-- endof submitButton -->
</form>
</body>
</html>
<?php
/************************************
updateDB.php
************************************/
if (isset ($_GET['page'])) {
$currentPage = $_GET['page'];
} else {
$currentPage = NULL;
}
showVarPre ($_POST);
showVarMed ($currentPage); // Shows the current page passed from JS
if ($currentPage == 'test2') {
$currentTable = 'records';
} elseif ( $currentPage == 'court-types') {
$currentTable = 'ota_court_types';
}
$action = ($_POST['action']);
echo "<h3>" . $action . "</h3>";
if ($action == "updateRecordsListings"){
/*
$listingCounter = 1;
foreach ($updateRecordsArray as $recordIDValue) {
$query = "UPDATE " . $currentTable . " SET position = " . $listingCounter . " WHERE id = " . $recordIDValue;
mysql_query($query) or die('Error, insert query failed');
$listingCounter = $listingCounter + 1;
}
*/
echo '<pre>';
echo '</pre>';
echo 'If you refresh the page, you will see that records will stay just as you modified.';
}
?>
document.getElementById("contentRight").innerHTML(theResponse);
Are you expecting html or text from the response? If it's the former, use:
$("#contentRight").html(theResponse);
if it's the later, use:
$("#contentRight").text(theResponse);
update:
your form submission is causing a full page refresh. this is the default behavior. you need to catch the event and prevent the default behavior.
`$(document).ready(function(){
$("#editForm-1").submit(function(e){
e.preventDefault();
performAjaxSubmission(1);
});
$("#editForm-2").submit(function(e){
e.preventDefault();
performAjaxSubmission(2);
});`
The problem was using input type as an image rather than using a button with an image. I still do not know or understand why but here is the related link

How to set readonly all input beside input that user try to fill data?

How to set readonly all input except input that user try to fill data ?
When user loads page index.php and tries to fill data into EG: <input id="edValue2" ...>, I want to set readonly all input except <input id="edValue2" ...>
But my code not work, how can i do ?
index.php
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<html>
<body>
<form id="form-id" method="post" action="" ENCTYPE = "multipart/form-data" onsubmit="return checkform(this);">
<?PHP
for ($i=1;$i<=5;$i++)
{
?>
<input id="edValue<?PHP echo $i; ?>" type="text" onKeyUp="send_it_register_to_hidden_input<?PHP echo $i; ?>()" onKeyPress="send_it_register_to_hidden_input<?PHP echo $i; ?>()"><br>
<?PHP
}
?>
<br>
<br>
<br>
<input type="text" id="lblValue" value="">
<input type="text" id="lblValue_number" value="">
</form>
</body>
<?PHP
for ($i=1;$i<=5;$i++)
{
?>
<script>
function send_it_register_to_hidden_input<?PHP echo $i; ?>()
{
lblValue.value = $("#edValue<?PHP echo $i; ?>").val();
lblValue_number.value = <?PHP echo $i; ?>;
Check_register_it();
}
</script>
<?PHP
}
?>
<script>
function Check_register_it()
{
$('#form-id input').attr('disabled','disabled'); //disable all
$(this).removeAttr('disabled'); //enable the one that triggers the event
}
</script>
</html>
I strongly suggest don't create functions like that. It just makes your codes complicated. Use classes in this case so that you don't need to setup functions for each id that you want to manipulate:
<body>
<form id="form-id" method="post" action="" ENCTYPE = "multipart/form-data" onsubmit="return checkform(this);">
<?PHP for ($i=1;$i<=5;$i++) { ?>
<input class="input_boxes" type="text" data-i="<?php echo $i; ?>"><br/>
<?PHP } ?>
<br>
<br>
<br>
<input type="text" id="lblValue" value="">
<input type="text" id="lblValue_number" value="">
</form>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('.input_boxes').on('keyup', function(e){
var value = $(this).val();
var i_val = $(this).attr('data-i');
$('#lblValue').val(i_val);
$('#lblValue_number').val(value);
$('input').prop('readonly', true);
$(this).prop('readonly', false);
});
</script>
Assuming all inputs are children of the same element (i.e. siblings), you can use jQuery to do this easily:
$('input').on('focus', function(){
$('input').removeAttr('readonly');
$(this).siblings().attr('readonly', 'readonly');
});
JSBin:
http://jsbin.com/qukohosafuje/1/edit
Try this :-
$("input").on('keyup', function () {
$('input').not(this).attr('readonly', 'readonly');
});
DEMO
You have to put all JQuery statement within:
$(function(){
//put your JQuery code here
});
Try and let me know if now works.
You can simply use the html attribute of readonly for the inputs you don't want users to fill.
e.g
<input type="text" id="lblValue" value="" readonly>
if you would required the readonly inputs to be accessible after the necessary input has been filled, you can use jquery to trigger the event.
e.g
$('input').keyUp(function(){
if($('#edValue2').val()!=""){
$('input:not("#edValue2")').removeAttr('readonly');
})

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>

Submission of form does not work in jQuery

Problem:
Trying to automatically generate a form and submit it without user interference.
Complete code:
<?php session_start(); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
$(document).ready(function()
{
var url = 'test.php';
var form = $('
<form action="' + url + '" method="post">' +
'<input type="text" name="Datafile" value="' + <?php echo "upload/".$_SESSION['txtfile'].""; ?> + '">' +
'<input type="text" name="Perspective" value="' + <?php echo implode(" ", $_SESSION['dimensions']); ?> + '">' +
'<input type="hidden" name="form_submitted" value="true">' +
'</form>
');
$('body').append(form);
$(form).submit();
});
</script>
</head>
<body>
</body>
</html>
It gives me first an error when looking at the source code that implode() parameters are wrong.
Desired solution:
The form should submit itself once it has been loaded.
Anyone who can spot what's wrong or why the form does not submit itself?
Since you are using jquery why aren't you just sending the data via post?
$.post( "test.php", { name: "<?php echo "upload/".$_SESSION['txtfile']; ?>" ,
Perspective: "<?php echo implode(" ", $_SESSION['dimensions']); ?>",
form_submitted : "true"} );
Can you try this,
<?php session_start(); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
function AutoSubmit(){
document.my_form.submit();
}
</script>
</head>
<body onLoad="AutoSubmit();">
<form action="test.php" name="my_form" id="my_form" method="post">
<input type="hidden" name="Datafile" value="<?php echo "upload/".$_SESSION['txtfile']; ?>">
<input type="hidden" name="Perspective" value="<?php echo implode(" ", $_SESSION['dimensions']); ?>">
<input type="hidden" name="form_submitted" value="true">
</form>
</body>
</html>
<?php session_start(); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
$(document).ready(function()
{
var url = 'test.php';
var form =
"<form action="+url+" method=\"post\"><input type=\"text\" name=\"Datafile\" value=\"<?php echo \"upload/\".$_SESSION[\'txtfile\'].\"; ?> \"><input type=\"text\" name=\"Perspective\" value=\" <?php echo implode(\" \", $_SESSION[\'dimensions\']); ?>\"><input type=\"hidden\" name=\"form_submitted\" value=\"true\"></form>";
$('body').append(form);
$(form).submit();
});
</script>
</head>
<body>
</body>
</html>
You forgot to load jQuery in document:
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>

Categories