send an integer value of a variable from javascript to php file - javascript

HTML CODE
<form action="send.php" method="post">
<input type="hidden" name="qty" id="quantity" value="">
<input type="submit" id="submit">
</form>
JAVASCRIPT CODE
var qty=10;
$("#submit").click(function(){
$("#quantity").val(qty);
});
PHP FILE (send.php)
<?php
$showqty=$_POST['qty'];
echo $showqty;
?>
My code above is receiving an error on the php file. It says that the index qty is undefined. How can I send an integer value of a variable from javascript to php?

You do not have any issues with you javascript or you PHP code.
when you recieve undefined error, it means that the object is not even posted to the send.php file. so the problem is with the object or the way you are sending it, not with the value in it.
with a look at you code I saw that you have two action tags and no method tag and that is what causing the error.
with no method tag, the form uses GET method instead of POST method.
so you just have to change this line:
<form action="send.php" action="post">
with this line:
<form action="send.php" method="post">

simply use
var qty = document.getElementById("qty").value

action="post"> should be method="post">
This may help you:
<!doctype html>
<html lang="en">
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
var qty=10;
$("#submit").click(function(e){
var qty=10;
$.ajax({
url:'send.php',
type:'POST',
data:{'qty':qty},
success: function(e){
alert(e);
//do some thing
}
});
});
});
</script>
</head>
<body>
<form id="myform" action="send.php" method="post" onSubmit="return false;">
<input type="submit" id="submit">
</form>
</body>
</html>
send.php
<?php
$showqty=$_POST['qty'];
echo $showqty;
?>

Related

How to pass an input file to an input file multiple?

I have a file input where the client adds an image and an img element is created through DOM, the problem is that I only have one file input and then with the submit button I want to send all the images that have been selected one by one to a file. php and upload them to the server, is there any way to go putting those files in a multiple input file and so just send the multiple input? or what would be the most optimal way?
Maybe you can try with input array like:
<form method="post" enctype="multipart/form-data" action="index.php">
<input name="file[]" type="file" />
<input name="file[]" type="file" />
...
<input type="submit" name="add" value="Add" />
</form>
Pro Tip: Read about multiple on MDN
I'm not sure if this is exactly what you're looking for, but this solved my needs to upload/save multiple images.
Save this code in a file called upload.html:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>*Upload Test*</title>
</head>
<body>
<form action="up.php" method="post" multipart="" enctype="multipart/form-data">
<input type="file" name="img[]" multiple accept=".jpg,.jpeg,.png" onchange="submit()">
<input type="submit">
</form>
</body>
</html>
Save this code in a file called up.php:
<?php
$img=$_FILES['img'];
if(!empty($img)) {
$img_desc=reArrayFiles($img); $cnt=0;
foreach($img_desc as $val) {
$newname=$val['name'];
echo $newname.' ('.$val['type'].') : ';
if(file_exists('./uploads/'.$newname)){
echo '<b>Image already exists</b><br>';
}else{
move_uploaded_file($val['tmp_name'],'./uploads/'.$newname);
if($val['error']==0){
$cnt++;
echo 'Uploaded!<br>';
}else{
echo '<b>Error</b><br>';
}
}
}
echo '<hr>Uploaded '.$cnt.' images.';
}
function reArrayFiles($file) {
$file_ary=array();
$file_count=count($file['name']);
$file_key=array_keys($file);
for($i=0;$i<$file_count;$i++) {
foreach($file_key as $val) {
$file_ary[$i][$val]=$file[$val][$i];
}
}
return $file_ary;
}
?>
This code was adapted from an example here.

Retrieving php variables from ajax call but not working

when I use this code nothing and call the ajax nothing happens and I was looking at some online forums saying I need to use json encode to pass variables over ajax but it just echos it at the top of the webpage.
AjaxTesting
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$("#test").click(function(){
$.ajax({
event.preventDefault(),
url:'ajaxUser.php',
type:'POST',
dataType: 'json',
success:function(data){
alert(data.id);
}
)};
});
</script>
</head>
<body>
<form method="post">
<input name="userName">
<input name="submit" type="button" value="Submit" id="test">
</form>
</body>
</html>
ajaxUser
<?php
echo json_encode(array('id' => 123, 'messageid' => "test"));
?>
You don't have event parameter called in click function. Don't call preventDefault() within ajax function ,also you need to code your js within document.ready() if you want to write in header element !!
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<form method="post">
<input name="userName">
<input name="submit" type="button" value="Submit" id="test">
</form>
<script>
$("#test").click(function(event){
event.preventDefault();
$.ajax({
url:'ajaxUser.php',
type:'POST',
dataType: 'json',
success:function(data){
alert(data.id);
}
});
});
</script>
</body>
</html>
Should work
The php code needs to be in a different file named AjaxTesting.php and you never call the function post() in the javascript. So we can call it inside a form submit event handler
Try adding:
$(function(){
$('form').submit(function(event){
event.preventDefault()
post();
})
});
Also note that the html page needs to be running on the same server and not from local file for ajax to work

How to post href by JavaScript or jQuery non AJAX

I want to post data to a PHP file by link.
I'm using this:
<a onclick="$.post('responses.php', {'form':'<?php echo $_GET['form'] ?>'});return false;" href="#">
This code works but I want to post data to and brows response.php then I need a non AJAX equivalent code.
Seems like form should be good for your case:
<form method="post" action="responses.php">
<input type="hidden" name="form" value="<?php echo $_GET['form'] ?>'});return false;"/>
<input type="submit" value="submit"/>
</form>
This code will both post data and redirect user to response.php as you want.
If you don't want an AJAX thing, you can do the same thing using a form:
$(function () {
$("a").click(function (e) {
e.preventDefault();
document.bleh.submit();
});
});
.hidden {display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="bleh" class="hidden" target="ifr" method="post" action="responses.php">
<input type="submit" />
</form>
<iframe name="ifr" class="hidden"></iframe>
Click to Submit

Uncaught TypeError: Illegal invocation error while sending data from ajax

i have a form which i am trying to send values through ajax. But i receive following error:
Uncaught TypeError: Illegal invocation
I am stuck and can't find where am i wrong. Any suggestions please?
Ajax
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" </script>
<script type="text/javascript">
$(document).ready(function() {
$("#submit_custom").click(function() {
e.preventDefault();
var postData = new FormData();
postData.append('file[]', $('input[type=file]')[0].files[0]); // after this line
postData.append('trxid', $('input[name=trxid]'));
postData.append('orderid', $('input[name=orderid]'));
postData.append('custid', $('input[name=custid]'));
if(proceed)
$.post('upload.php', post_data, function(response){
if(response.type == 'error'){ //load json data from server and output message
output = '<div class="error">'+response.text+'</div>';
}else{
output = '<div class="success">'+response.text+'</div>';
$("#upload_form").slideUp(); //hide form after success
}
$("#upload_form").hide().html(output).slideDown();
}, 'json');
});
});
});
</script>
</head>
<body>
<h2>Hello <?php echo $user ?> </h2> <p> "You have successfully done purchasing process.</p>
<div id="upload_form">
<p>To send your size details for your order please upload the following file:</p>
<p>Download custom size form Provide us your custom size: File.pdf</p>
<form enctype="multipart/form-data" action="" method="post">
<input type="text" name="trxid" value="<?=$trx?>">
<input type="text" name="orderid" value="<?=$orderid?>">
<input type="text" name="custid" value="<?=$customerid?>">
<input type="file" name="file">
<input type="submit" id="submit_custom">
</form>
</div>
</body>
</html>
You are getting Illegal invocation because jQuery can't serialize the postData object for $.post.
I think you need to add .val().
postData.append('file[]', $('input[type=file]')[0].files[0].val()); // after this line
postData.append('trxid', $('input[name=trxid]').val());
postData.append('orderid', $('input[name=orderid]').val());
postData.append('custid', $('input[name=custid]').val());

documnet.getElementById does not fetch the value . what is going wrong?

i am sure this is quite a numb question to ask and most probably the most basic one. i am just a starter for JS.
i am trying to access the value of input field by document.getElementById and it is returning null to me i am not sure why here is the code.
<html>
<head>
<script type="text/javascript">
var name = document.getElementById("e_name");
alert(name);
</script>
</head>
<body>
<form action="" method="post">
<input type="text" name="name" id="e_name" value="Enter your Name"/>
<input type="submit" name="submit"/>
</form>
</body>
</html>
the following code prints the value null in alert box. what is wrong?
Update :
When i use the following code.
<html>
<head>
</head>
<body>
<form action="" method="post">
<input type="text" name="name" id="name" value="Enter your Name"/>
<input type="submit" name="submit"/>
</form>
<script type="text/javascript">
var name = document.getElementById('name').value;
alert(name);
</script>
</body>
</html>
it prints Enter your Name but if i change the value it does not print the changed value. i would want to perform the following for validation purpose
a) holds the value of e_name in a javascript variable in the head tag
b) so that i should be able to process it for validation.
how do i do it?
Because you're calling that line of script even before document object is ready!
Try this
<body>
<form action="" method="post">
<input type="text" name="name" id="e_name" value="Enter your Name"/>
<input type="submit" name="submit"/>
</form>
<script type="text/javascript">
var name = document.getElementById("e_name").value;
alert(name);
</script>
</body>
Or this in your head tag.
<script type="text/javascript">
window.onload = function() {
var name = document.getElementById("e_name");
alert(name);
}
</script>
The Javascript code is executing before that HTML has loaded. The element with id="e_name" doesn't actually exist in the document yet.
function validate()
{
var nam=name.value;
alert("name"+nam);
}

Categories