I viewed so many post aboit this but still cant get my code to work.
I want to get a php array of my checked checkboxes values.
heres my code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<title>Untitled Document</title>
</head>
<body>
<?php
echo'<form method="post">
<input type="checkbox" name="cim" value="valami">';
echo'<input type="checkbox" name="cim" value="valami2">';
echo'<input type="checkbox" name="cim" value="valami3">';
echo'<input type="checkbox" name="cim" value="valami4">
<input type="submit" value="Felvisz" name="feladat"></form>';
if (isset($_POST['feladat'])) {
?>
<script type="text/javascript">
var checkedValue = $('.messageCheckbox:checked').val();
var myJSON = JSON.stringify(checkedValue);
$.ajax({
type: "POST",
url: "proba.php",
data: { tomb : myJSON },
success: function(){
alert("OK");
}
});
</script>
<?php
var_dump($_POST);
$array = json_decode(stripslashes($_POST['tomb']));
foreach($array as $arr){
echo $arr;
}
}
?>
</body>
</html>
Massages i got:
Notice: Undefined index: tomb in D:\programok\xamp\htdocs\SZAKDOGA\Dropbox\proba.php on line 48
Warning: Invalid argument supplied for foreach() in D:\programok\xamp\htdocs\SZAKDOGA\Dropbox\proba.php on line 49
Please someone can help me to solve this?
To get an array , you must convert the name to accept multiple so change the input's :
name="cim"
to
name="cim[]"
Also your jquery ajax function should be this :
<script type="text/javascript">
$(function(){
$("form").on("submit",function(e){
e.preventDefault();
var checkedValue = $(this).serialize();
$.ajax({
type: "POST",
url: "proba.php",
data: checkedValue,
success: function(){
alert("OK");
}
});//end ajax
});//end form submit
});
</script>
in php the cim will be the array example
var_dump($_POST["cim"]);
hope it helps
currently, you are testing for checked boxes with class messageChecked. assign your checkboxes that class, give your form an id, then test for checked condition on each checkbox,
$('#yourForm').each(function() {
if($('.messageChecked').is(':checked')) {
checkedValue.push($('.messageChecked:checked').val());
}
}
now send it to your php script via ajax,
$.ajax({
type: "POST",
url: "proba.php",
data: { tomb : (checkedValue) },
success: function(){
alert("OK");
}
});
if done like this you can remove json_decode and stripslashes from your $_POST statement
Related
I have simple code with html, JavaScript and PHP. I am trying to pass a variable from HTML to PHP through ajax.
A text box appears on screen with button, user inputs in the text field and clicks the button. The field text should appear before the field. But in my case, nothing happens when clicking the button. I am posting my code below. These are the three files I have made:
index.html
<!doctype html>
<html lang="en">
<body>
<input id="name" type="text" /> <input id="button" type="button" value="Load" />
<div id="content"></div>
<script type="text/javascript" src="ajax.js"></script>
</body>
</html>
ajax.js
$('#button').click(function() {
document.write("this is javascript");
var name = $('#name').val();
$.ajax({
url: 'page.php',
data: name,
success: function(data) {
$('#content').html(data);
}
});
});
page.php
<?php
if(isset($_GET['name'])) {
echo "lllllllllllllllll";
echo $name=$_GET['name'];
}
?>
Add CDN as mentioned above. Also make sure you load the jquery CDN or jquery.lib.js before including external js file, ajax.js in index.html.
There is an issue in your $.ajax code:
$.ajax({
url: 'page.php',
data: name,
success: function(data) {
$('#content').html(data);
}
});
change this to:
$.ajax(
{
type:'GET',
url: 'page.php',
data:"name=test"
},
success: function(data) {
$('#content').html(data);
}
);
only add before axaj.js
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
add this in your javascript ajax: type : 'GET'.
In your php code :
$name=$_GET['name'];
echo $name;
I created a simple form, onSubmit it takes the values to js page(AJAX CALL) then send to add.php page again returns the value to html page.
This code is working fine on my local system but when i test it in server AJAX call is not working.Even i just tested as on submit(click) alert from add.js(AJAX) but not working and works good in local(XAMP)
var btn = document.getElementById("sub");
btn.addEventListener("click", function() {
//alert('came');
var data=$("#myForm :input").serializeArray();
$.post($("#myForm").attr("action"),data,function(info){
$("#result").html(info);
});
});
$("#myForm").submit(function() {
return false;
});
<!DOCTYPE html>
<html>
<head>
<title>
Ajax call
</title>
</head>
<body>
<form id="myForm" action="add.php" method="post">
<input type="text" name="uname">
<input type="text" name="age">
<button id="sub">submit</button>
</form>
<span id="result"></span>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="add.js"></script>
</body>
</html>
Here is my add.php , which echo the result that will be displayed in my html result div tag `
<?php
$name=$_POST['uname'];
$age=$_POST['age'];
echo $name;
Is there anything to change while uploading in server.Whats wrong in my code.
Thanks in advance.
This is the object you are sending to the server, you can see that it has not the structure that the server side 'add.php' is expecting, so there is no $_POST['uname'] variable. You may use a var_dump($_POST) to see the structure you are receiving or use $("#myForm").serialize() that I've used a lot and worked fin to me.
var btn=document.getElementById("sub");
btn.addEventListener("click",function(){
alert('came');
var data=$("#myForm :input").serializeArray();
$.post($("#myForm").attr("action"),data,function(info){
$("#result").html(info);
$('#myForm')[0].reset();*/
//please have a look in your add.js:9:26
});
});
$("#myForm").submit(function(){
return false;
});
Could you follow ajax in this method, Surely it will works for you.
<button type="button" onclick="submit()" class="input-group-addon addbtn">Submit</button>
function submit(){
var data = $("#myForm").serialize();
$.ajax({
url: 'your url',
type: "post",
data: {'formSerialize':data, '_token': $('meta[name="_token"]').attr('content')},
success: function(data){
if(data.success==1){
alert('success');
}else if(data.error==1){
alert('error');
}
}
});
}
In your controller you can get the value like this
parse_str($data['formSerialize'],$input);
In $input You can easily access all the field value.
Problems: I'm not 100% sure what's causing your problem. But on my end I found the problem to be browser related since it worked on Chrome but not on FireFox.
One scenario would that FireFox didn't recognize your:
$("#myForm").submit(function() {
return false;
});
It does happen that FireFox will do so if you don't abide by its standards. I did explain this in my answer about event.preventDefault();
I also completely changed your add.js as I've found some of your code unnecessary and that it could be combined into a cleaner function. Since you're already using jQuery might as well stick to it and not use DOM.
FORM:
<!DOCTYPE html>
<html>
<head>
<title>
Ajax call
</title>
</head>
<body>
<form id="myForm">
<input type="text" name="uname">
<input type="text" name="age">
<button type="submit">Submit</button>
</form>
<span id="result"></span>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="add.js"></script>
</body>
</html>
ADD.JS
//you need to add "event" as a parameter to the function since Firefox
//will not recognize event.preventDefault(); if its missing
$( "#myForm" ).on( "submit", function( event ) {
event.preventDefault(); //this will prevent the form from submitting
var form_data = $("#myForm").serialize();
$.ajax({
method: "POST",
url: "add.php",
data: {form_data: form_data},
success: function (info) {
$("#result").html(info);
}
});
});
ADD.PHP
<?php
$form_data = $_POST['form_data'];
$params = array();
parse_str($form_data, $params);
$name = $params['uname'];
$age = $params['age'];
echo $name;
I tried all the stackoverflow posts about this, I spend two days and still no success 😔, I am trying to pass a JavaScript variable to a PHP variable, I tried this for example and still not succeed, it does not print noting on the screen, here is a full code:
here cc.html:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
//treehouse code
var $my_variable = "something";
$.ajax({
url: 'cc.php',
data: {x: $my_variable},
type: 'POST'
});
});
</script>
</body>
</html>
and here cc.php:
<?php
if(isset($_POST['x'])){
echo $_POST['x'];
}
?>
What should I do?
You don't do anything with the result of the AJAX call. Add a callback function:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
//treehouse code
var $my_variable = "something";
$.ajax({
url: 'cc.php',
data: {x: $my_variable},
type: 'POST'
}).done(function (result) {
alert(result); // <--- do something with the result
});
});
</script>
</body>
</html>
And your PHP code remains unchanged:
<?php
if(isset($_POST['x'])){
echo $_POST['x'];
}
?>
What you do in that callback function is up to you. You can alert() the value, log it to the console, write it somewhere on the page, etc.
If you want to print it on the screen you should use success: function(data)$('#result').html(data)} here is code example:
$(document).ready(function() {
$('#sub').click(function() {
var $my_variable = "something";
$.ajax({
url: 'cc.php',
type: 'POST',
data: { x: $my_variable },
success: function(data) {
$('#result').html(data)
}
});
});
});
You can try $.post too
$.post( "cc.php", { x: $my_variable} );
I have this PHP file:
JSONtest.php
<?php
$a=5;
echo json_encode($a);
//This converts PHP variable to JSON.
?>
I want to alert this variable's value using Ajax and JSON, and for that I've written this script:
learningJSON.php
$(document).ready(function(){
$("button").click(function(){
$.ajax({
url: 'JSONtest.php',
type: 'POST',
data: data,
dataType: 'json',
success: function(result){
alert(result);
},
error: function(){
alert("Error");
}
});
});
});
But when I click the button, I get this error message:
learningJSON.php:14 Uncaught ReferenceError: data is not defined
What wrong I'm doing? How can I fix this?
<?php
$a=5;
echo json_encode($a);
//This converts PHP variable to JSON.
?>
Nope, it doesn't. Whats the point in converting a simple number to JSON? It stays the number 5
Now the real problem. Yes your data variable is not defined anywhere in your JavaScript code. If you have no data to send, remove that parameter.
However if you still want to pass some data, define it accordingly then. For example
data: { fname: "John", lname: "Doe" }
Now let's say on your next exercise you want to post form data you can use this nice function named serialize(). This will take all the postable fields from your form and send them along with this request.
data : $("#formID").serialize()
Data variable is not defined, you can delete that
Php file
<?php
$a = $_REQUEST['number'];
echo json_encode($a);
//This converts PHP variable to JSON.
?>
Javascript file
$(document).ready(function(){
$("button").click(function(){
$.ajax({
url: 'JSONtest.php',
type: 'POST',
//data: {'number' : 10}, //this is when you need send parameters to the call, uncomment to send it parameters
dataType: 'json',
success: function(result){
alert(result);
},
error: function(){
alert("Error");
}
});
});
});
I think this one should be perfect for you.
We need 3 files
index.php
login.js
login.php
That mean when user submit [index.php] script js file [login.js] running ajax process script [json] in login.js by collect all data from form input [index.php] and send and run script login.php ... This is powerful script of ajax & json
check code below
index.php
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="login.js" type="text/javascript" charset="utf-8"> </script>
</head>
<body>
<form method="post" id="login" name="login">
Email: <input type="email" id="log-mail" name="log-mail" > <br />
Password: <input type="password" id="log-pass" name="log-pass" > <br />
<button type="submit" >Log in</button>
</form>
</body>
</html>
login.js
$(document).ready(function(){
// #login = login is the name of our login form
$('#login').submit(function(e) {
$.ajax({
type: "POST",
url: "login.php",
data: $('#login').serialize(),
dataType: "json",
success: function(msg){
if(parseInt(msg.status)==1)
{
window.location=msg.txt;
}
else if(parseInt(msg.status)==0)
{
window.location=msg.txt;
}
}
});
e.preventDefault();
});
});
login.php
<?php
if(isset($_POST['log-mail']) && $_POST['log-mail'] != '' && isset($_POST['log-pass']) && $_POST['log-pass'] != '' ) {
$_data_ = 'index.php?user_data='.$_POST['log-mail'];
echo msg_result(1,$_data_);
}else{
$msg_att = "index.php?login_attempt=1";
echo msg_result(0,$msg_att);
}
function msg_result($status,$txt) {
return '{"status":'.$status.',"txt":"'.$txt.'"}';
}
?>
you can see on your url if you
complete all field => ...index.php?user_data=user_data#gmail.com
uncomplete => ...index.php?login_attempt=1
Hope this solve your issue
So I am able to get my php value into javascript variable but I don't think my script.js is finding it. There of course are alot of files missing for the sake of keeping this question clean but my problem is that script.js get schoolId as undefined instead of the actual value but when I console.log schoolId i get a value of "1"(first page has id 1 so that works).
Header.php :
<?php
//gets current page id
$schoolOfficialId = $specificSchool[0]["id"];
?>
<head>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<input type="hidden" id='schoolOfficialId' value="<?php echo $schoolOfficialId;?>"/>
<script type="text/javascript">
var schoolId = $('#schoolOfficialId').val();
</script>
</body>
script.js: ajax call here NOTE: in the ajax i know the data is having trouble finding schoolId from the header.php to send to php file.
// execute an ajax query to push id of page to load_more.php
$.ajax({
url: 'load_more.php',
type: 'POST',
data: {schoolId:schoolId},
success:function(data){
console.log("working");
}
});
my load_more.php:
if (isset($_POST['schoolId'])) {
echo "yes";
}else {
echo "nope";
}//keeps echoing nope because the schoolId is not received
The problem is that you have the script running before the declaration.
<script type="text/javascript" src="js/script.js"></script> is in head, but var schoolId = $('#schoolOfficialId').val(); is at the bottom of the page.
Include the script after declaring schoolId.
<head>
</head>
<body>
<input type="hidden" id='schoolOfficialId' value="<?php echo $schoolOfficialId;?>"/>
<script type="text/javascript">
var schoolId = $('#schoolOfficialId').val();
</script>
<script type="text/javascript" src="js/script.js"></script>
</body>
P.S. despite other answers, data: {schoolId:schoolId}, is perfectly fine unless the keyname conflicts with a reserved word.
Load ajax code after defining var schoolId and also check source code whether php printing value for schoolId correctly or not and also do not forget to use $(document).ready()
<script type="text/javascript">
$(document).ready(function(){
var schoolId = $('#schoolOfficialId').val();
$.ajax({
url: 'load_more.php',
type: 'POST',
data: {schoolId:schoolId},
success:function(data){
alert(data);
}
});
})
</script>
PHP:
if (isset($_POST['schoolId'])) {
echo $_POST['schoolId'];
}else {
echo "nope";
}
By running the following i can see yes in alert ...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>stackoverflow</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script>
$(document).ready(function () {
var schoolId = $("#schoolOfficialId").val();
$.ajax({
url: 'ajax.php',
type: 'POST',
data: {schoolId: schoolId},
success: function (data) {
alert(data);
}
});
});
</script>
</body>
</html>
Ajax file (ajax.php) :
if (isset($_POST['schoolId'])) {
echo "yes";
} else {
echo "nope";
}