Ajax form submits - php

Hey guys I'm not getting any post data coming out here, and am pretty positive this isn't working at all. The big deal was it firing a accept/deny with an id # attached, and a value for that forms checkbox. I'm getting no errors, and no warnings so am having an issue stepping through it =( Hopefully another set of eyes?
Sorry ahead of time I know my JQuery blows.
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.6");
</script>
<script>
$(".audit").submit(function()
{
return false;
});
$(".accept, .deny").click(function(event)
{
$form = $(this).parent("form").get(0);
$gruden = $form(function(index) { attributes.push($(this).val());});
$.post($form.attr("action"), $form.serialize() + "&submit=" + $(this).attr("value") + "&gruden=" + $gruden, function(data) {
console.log(data);
});
});
</script>
.......................
<?php foreach($obj->photos as $pending) { ?>
<div class='container' id='photo-<?=$pending->id;?>'>
<span class='shadow'>
<a href='/<?=$pending->large;?>'><img src='http://<?=$_SERVER['HTTP_HOST'].'/'.$pending->small;?>'/></a>
</span>
<form class='audit' name='audit-<?=$pending->id;?>' action='<?=$_SERVER['PHP_SELF'];?>'>
<div class='box'>
<ul>
<li>ID: <?=$pending->id;?></li>
<li>Date: <?=$pending->created_at;?></li>
<li>User: <?=$pending->fb_id;?></li>
<li> </li>
<li>
<input class='gruden' value='gruden-<?=$pending->id;?>' type='checkbox' />
<a name='submit' value='accept-<?=$pending->id;?>' class='accept' href=''></a>
<a name='submit' value='deny-<?=$pending->id;?>' class='deny' href=''></a>
</li>
</ul>
</div>
</form>
</div>
<?php } ?>

I think I see your problem now. I've re-written your code so it makes more sense. Comments to explain what's going on
<script>
$(".audit").submit(function(){
return false; //Preventing the form from submitting if someone hits Enter
});
$(".accept, .deny").click(function(event) {
var form = $("form.audit"); //Always use var to declare variables in Javascript. It's not PHP; we don't use $, unless you want it to be a part of the variable name. Also fixed your selector
var gruden = $form(function(index) { attributes.push($(this).val());}); //Are you trying to find out if the checkbox with class gruden is checked? Please answer in the comments so I can correct this line
$.post(form.attr("action") + "&submit=" + $(this).attr("value") + "&gruden=" + gruden, form.serialize(), function(data) {
console.log(data);
}); //I assume that you want to pass submit and gruden as GET params here, since you're appending them to the URL. If you want them to go as POST vars, then let me know in the comments
});
</script>
No offense, but I think you might benefit from reading a bit more about Javascript and jQuery. At least read up on how selectors work in jQuery, and some basic Javascript syntax

This line surely doesn't return your form element as it only looks at the direct parent.
$form = $(this).parent("form");
Try something like this:
$form = $(this).parents("form").get(0);

Related

How to POST values stored in href link in one page to the next php page

I have several links in a HTML/PHP page and I want to pass the value stored in the link when they are clicked to the next PHP page via $_POST (I know how to do it with $_GET but that is not what I want).
I know I need to use javascript/jquery and I have tried a lot of different things but I haven't been able to get it working. I can add an onclick attribute to href, if it helps to solve the problem.
INSIDE "page1.php" or "page1.html"
// Send the values of variables var1, var2, etc. to the new PHP page...
<div class="super">
good
</div>
<div class="super">
better
</div>
<div class="super">
best
</div>
<script>
(function() {
$("#id").on("click",function(e) {
e.preventDefault();
$.post(this.href,function(value) {
$(".top").html(value);
});
});
});
</script>
INSIDE "page2.php"
<?php
// Retrieve the URL variables (using PHP and jquery).
$val_1= $_POST['var1'];
$val_2= $_POST['var2'];
$val_3= $_POST['var3'];
//to test we retrieved the values from page1
echo "value of var1 is: ".$var_1;
?>
The issue is because you're not sending any data in the $.post call. Presumably you want to send the id/value of the a elements.
Firstly, note that value is not a valid attribute of an a element. I'd suggest changing this to a data attribute to avoid validation issues.
Secondly, to send the data in the request you can build an object, like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="super">
good
</div>
<div class="super">
better
</div>
<div class="super">
best
</div>
<button id="id">Click me!</button>
<script>
$(function() {
$("#id").on("click", function(e) {
e.preventDefault();
var data = {};
$('a').each(function() {
data[this.id] = $(this).data('value');
});
console.log(data);
$.post(this.href, data, function(value) {
$(".top").html(value);
});
});
});
</script>
** Update **
When any of the href link is clicked, page2.php is opened and based on which linked is clicked e.g. 'link3 above' which has a value 300, the page2.php does something based on that value. I don't want to pass all values of the links at once
In this case you can just read the data-value from the element and send it in the request and read it back in the PHP:
$(function() {
$(".super a").on("click", function(e) {
e.preventDefault();
$.post(this.href, {
value: $(this).data('value')
}, function(value) {
$(".top").html(value);
});
});
});
<?php
$val = $_POST['value'];
echo "value of var1 is: ".$val;
?>
var value= $(this).attr('value');
After that pass thus value to ajax function.
Example:
var record_id=jQuery(this).attr('data-key');
jQuery.ajax({
url: url,
dataType:'json',
type: "POST",
data:{
record_id:record_id,
}

Jquery Separation

I created a function on jquery where the user can click the button the value goes into the db and updates the color of the body. So the whole interface changes. Now im trying to make the anchor tags with classes like Blue
Im trying to create separate .clicks() like -> $('.blue').click(function(){}); not only one function for all of them. any help would be appreciate it
Here is my code:
<?php
echo "Welcome, ".$_SESSION['username'].".<br/> ";
echo "My name is: ".$_SESSION['fname']." ";
?>
<br/>
<br/>
Blue
Red
Green
<form action='' method='POST'>
<br/><input type='submit' name='logout' value='Logout'/>
</form>
<div id="show"></div>
<script>
function Swap(color){
var url = "php/test.php";
$.post(url, {ColorVar: color}, function(data){
$("#show").html(data).show();
});
location.reload(true);
}
</script>
Try this, hope it will help
<a href="javascript:void(0)" class="change-color" data-color="blue"/>Blue</a>
<a href="javascript:void(0)" class="change-color" data-color="red"/>Red</a>
<a href="javascript:void(0)" class="change-color" data-color="green"/>Green</a>
<script>
var url = "php/test.php";
$( document ).ready(function() {
$(document).on('mousedown', '.change-color', function(){
var color = $(this).attr('data-color');
$.post(url, {ColorVar: color}, function(data){
$("#show").html(data).show();
});
location.reload(true);
})
});
</script>
THanks #user3795381 your answer helped me point myself into the right direction.
This is what I was looking for.
<script>
var url = "php/test.php";
$(document).ready(function() {
$(".change").click(function(){
var color = $(this).attr('data-color');
$.post(url, {ColorVar: color}, function(data){
$("#show").html(data).show();
});
location.reload(true);
})
});
</script>
I could give you some tips:
You can use a single class for all links which save something to your database. For example 'do-save-color'.
You can store the data you want your to save as data-* attributes. You can name those to whatever you want but they have to start with data-. For example data-save-color="blue".
Save blue!
Use a global observer which 'captures' clicks on those links
$(document).on('click', '.do-save-color', function () {
// Your saving logic here
});
In your function use jQuery to read the data attribute and then post it:
var $link = $(this),
color = $link.data('save-color'); // color is now: "blue"
// Your AJAX logic here
Does this help you?
PS: Why do a location.reload() when you are saving things using AJAX?
here is a example with some html-classes (js-*) for js ...
html:
Blue
Red
Green
<p id="js-show" class="some-text">lall</p>
js:
$(".js-switch-style").click(function() {
$.post("/", { color: $(this).data("color") }, function(data) {
$("#js-show").html(data).show();
});
});

$_POST for text in DIV elements

Because of my web style, i don't want to use input & textarea and get information by using $_POST[] and i need to get information that is in DIV element.
For example , I want to get information in this :
<div class="mine" name"myname">
this is information that i want to get and put into database by PHP !
</div>
and :
$_POST[myname];
But i can't do it with $_POST , How can i do it ??
And if this method can't do this , do you know any other method to get information from DIV like this ?
you can call a onsubmit function and make a hidden field at the time of form submission like this
HTML
need to give a id to your form id="my_form"
<form action="submit.php" method="post" id="my_form">
<div class="mine" name"myname">
this is information that i want to get and put into database by PHP !
</div>
<input type="submit" value="submit" name="submit" />
</form>
Jquery call on submit the form
$(document).ready(function(){
$("#my_form").on("submit", function () {
var hvalue = $('.mine').text();
$(this).append("<input type='hidden' name='myname' value=' " + hvalue + " '/>");
});
});
PHP : submit.php
echo $_POST['myname'];
You can use this method. First, with javascript get content of <div>
Code:
<script type="text/javascript">
var MyDiv1 = Document.getElementById('DIV1');
</script>
<body>
<div id="DIV1">
//Some content goes here.
</div>
</body>
And with ajax send this var to page with get or post method.
You would need some JavaScript to make that work, e.g. using jQuery:
$.post('http://example.org/script.php', {
myname: $('.mine').text()
});
It submits text found inside your <div> to a script of your choosing.
You can use following structure;
JS:
$(document).ready(function() {
$("#send").on("click", function() {
$.ajax({
url: "your_url",
method: "POST",
data: "myname=" + $(".mine").text(),
success: function(response) {
//handle response
}
})
})
})
HTML:
<div class="mine" name"myname">
this is information that i want to get and put into database by PHP !
</div>
<input type="button" name="send" id="send" value="Send"/>
You can see a simulation here: http://jsfiddle.net/cubuzoa/2scaJ/
Do this in jquery
$('.mine').text();
and post data using ajax.
Put the content of DIV in a variable like below:
var x = document.getElementById('idname').innerHTML;

ajax update mysql field without refreshing page

I'm trying to get my announce box that has a X button on the top right, to be clicked and it remove the message, and update a mysql query field without refreshing the page
HTML
<form id="myForm" action="delanno.php" method="post">
<div class='announce-box'>
<div class='announce-message'>$show_message</div>
<div class='announce-delete'>
<a class='deleter'>
<button type='submit' id='sub' name='$show_id' style='height:35px; width:40px'>
<img src='../css/images/delete_25.png' width='25' height='25'>
</button>
</a>
</div>
</div>
</form>
php (delanno.php)
<?php
include("conn.php");
foreach($_POST as $name => $content) { // Most people refer to $key => $value
$something = "$name"; //ignore this, i did this for testing purposes
$query = mysql_query("UPDATE announce SET active='disabled' WHERE id='$something' ") or die(mysql_error());
}
?>
ajax // This is supposed to update the php field without refreshing or sending to another page
<script type="text/javascript">
$("#sub").click( function() {
$.post( $("#myForm").attr("action"),
$("#myForm :input").serializeArray(),
function(info){ $("#result").html(info);
});
});
$("#myForm").submit( function() {
return false;
});
</script>
more ajax // this is supposed to remove the announce div when the delete button is clicked.
<script>
$('.deleter').on('click', function(){
$(this).closest('.announce-box').remove();
})
</script>
if i remove
return false
it sends it to the php page and it obviously works. i'm not sure what to do from here
EDIT: The script doesn't work unless it's being sent to the php page
Javascript selecting DOM elements should be inside a ready function when the DOM is actually ready, e.g.
$(document).ready(function() {
// $('#some-id') .. etc
});
.
I just searched SO for a duplicate, I think it's out there but I didn't find it, so just posting as an answer and if someone else does, just flag it.

jQuery+AJAX delete anchor not working

Hi I'm using jQuery and Codeigniter. I'm creating a simple todo list that can add delete entries using ajax.
The problem is whenever I click on my delete anchor, it won't delete the entry. The adding of the entry feature works BTW.
Here's my code:
todo_view.php
<html>
<head>Todo List</head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#submit').click(function() {
var msg = $('#message').val();
$.post("<?= site_url('todo/add') ?>", {message: msg}, function() {
$('#content').load("<?= site_url('todo/view/ajax') ?>");
$('#message').val('');
});
});
$('a.delete').click(function() {
var id = $('input', this).val();
$.post("<?= site_url('todo/delete') ?>", {todoid: id}, function() {
$('#content').load("<?= site_url('todo/view/ajax') ?>");
});
});
});
</script>
<body>
<div id="form">
<input type="text" name="message" id="message" />
<input type="submit" name="submit" id="submit" value="Add todo" />
</div>
<div id="content">
<?php $this->load->view('message_list'); ?>
</div>
</body>
</html>
message_list.php
<ol>
<?php foreach ($todolist as $todo): ?>
<li>
<?php echo $todo->todo; ?>
<input type="hidden" value="<?=$todo->todoid ?>" />delete</li>
<?php endforeach; ?>
</ol>
Why doesn't it work?
First and foremost - to track GET/POST headers and values you should start using Firebug (an extension for Firefox). Really makes your life easy to terms of debugging ajax calls and responses.
Next (somewhat on the lines of what alimango mentioned)... the most likely cause is that the message list is being loaded AFTER your main page's DOM has already loaded. jQuery won't automatically bind the click event to elements added later. Your click binding routine has to be called AFTER the message list has been added to the DOM. Now this isn't always possible... as your list is being fetched / altered dynamically.
One solution is to use the live() bind event function that has been introduced since jQuery 1.3. This helps binds a handler to an event (like click) for all current - and future - matched element. Can also bind custom events. Fore more information, see http://docs.jquery.com/Events/live#typefn
Second solution is to use, LiveQuery - a jQuery plugin which "utilizes the power of jQuery selectors by binding events or firing callbacks for matched elements auto-magically, even after the page has been loaded and the DOM updated." You can grab it from http://plugins.jquery.com/project/livequery
Cheers,
miCRoSCoPiC^eaRthLinG

Categories