submitting form with parameter from a link in jquery

Question

I am trying to save data in database in background through a link, and to give download functionality to that link in front end. but it gives an error.

my script is -

<script>
$(document).ready(function(){
    $("#download").click(function(){
        var me = $(this), data = me.data('params');
        saveData(me);
});

function saveData(me){  
$.ajax({
       type: "POST",
       url: "download_counter.php",
       data: { client_id: "<? echo $client_id;?>", candidate_id: me }
    });
}
});
</script>

this is the link (It looks fine)

<a href="upload/<? echo $download;?>" id="download" data-params="{'ca_id':'<? echo $ca_id;?>'}"><button name="download"></button></a>

download_counter.php looks like -

<?
if (isset($_POST['candidate_id'])) { // Form has been submitted.
    $candidate_id = $_POST['candidate_id'];
    $client_id= $_POST['client_id'];
    $date = date("Y-m-d");
    echo "client - ".$client_id;
    echo "candidate - ".$candidate_id;
    $query = "INSERT INTO `downloads`(`client_id`, `candidate_id`, `download_date`) VALUES ('".$client_id."', '".$candidate_id."', '".$date."')";
    $result = mysql_query($query);  
}
?>

when i click the link, it lets download the file but database do not updates. Please help.

It's most likely because the browser cancels the AJAX request because the user is sent to a new page (the download). One way would be to do `e.preventDefault()` in the onclick function (add the e argument), and then redirect the user when the ajax is done. Or create a redirect page in php that counts then redirects to the download. This will count for users without JS as well. — ThoKra, Dec 11 '13 at 11:13

score 0 · Answer 1 · answered Dec 11 '13 at 11:13

0

Check jquery click event handler, which says

// say your selector and click handler is somewhat as in the example
$("some selector").click({param1: "Hello", param2: "World"}, some_function);

// then in the called function, grab the event object and use the parameters like this--
function some_function(event){
    alert(event.data.param1);
    alert(event.data.param2);
}

answered Dec 11 '13 at 11:13

Anil Saini

627
3
17

what is this param1 and param2. i want to get values from my link. how to do that – Gaurav Manral Dec 11 '13 at 11:35

apo · Accepted Answer · 2013-12-11T11:21:29.193

0

There is an error with passing parameter to function saveData, so your ajax request not occur:

$(document).ready(function(){
    $("#download").click(function(){
        var me = $(this), data = me.data('params');
        saveData(data); // was me
});

edited Dec 11 '13 at 11:21

answered Dec 11 '13 at 11:14

apo

116
7

query is running, but database is not updating yet. :( – Gaurav Manral Dec 11 '13 at 11:22
there might me issue with escaping the variable values, check this link -- [`escaping and passing php variables to sql insert query`](http://stackoverflow.com/questions/7537377/how-to-include-a-php-variable-inside-a-mysql-insert-statement)` – Anil Saini Dec 11 '13 at 11:34
yes. database is updating now with your suggestion. but it is not getting value of candidate_id.. i am doing this - $("#download").click(function(){ $("#count").hide(); var me = $(this), data = me.data('params'); saveData(data); // was me type: "POST", url: "counter.php", data: { client_id: "2", candidate_id: data.ca_id } – Gaurav Manral Dec 11 '13 at 11:38
1

yes because php have an array in variable $_POST['candidate_id']. In your case you don't need to have link with array in data parameter: data-params="{'ca_id':' echo $ca_id;?>'}" but only data-caid=" echo $ca_id;?>" and in js $(..).data('caid'); – apo Dec 11 '13 at 11:45

Gaurav Manral · Answer 3 · 2013-12-11T11:46:55.323

0

database is updating now, but it is not getting value of candidate_id.

i did this -

<script>
$(document).ready(function(){
    $("#download").click(function(){        
        $("#count").hide();
        var me = $(this), data = me.data('params');
        saveData(data); // was me
});

function saveData(data){  
$.ajax({
       type: "POST",
       url: "counter.php",
       data: { client_id: "2", candidate_id: data.ca_id }
    });
}
});
</script>

edited Dec 11 '13 at 11:46

answered Dec 11 '13 at 11:40

Gaurav Manral

600
4
7
24

please console.log the `data` in the saveData function and paste it over here. – Anil Saini Dec 11 '13 at 12:14
what is that Anil? And how to do that..? – Gaurav Manral Dec 11 '13 at 13:24
i am talking about `console.log()` function, it will log the passed parameter to console. So what i want you to do is in the saveData function just before $.ajax({---}); write `console.log(data);` then see what is logged in console and paste that output. – Anil Saini Dec 11 '13 at 13:46
i did it. but where is this console..? – Gaurav Manral Dec 11 '13 at 13:50
open your link in chrome and press key `F12`. – Anil Saini Dec 11 '13 at 14:03
i have added an answer, please go through that, it might solve your problem. – Anil Saini Dec 11 '13 at 14:10
`1113-10y-Far-32` this is the data which is get printed in console. That's what i wanted, and code running fine tooo. – Gaurav Manral Dec 11 '13 at 14:12
can you help me a little here http://stackoverflow.com/questions/20511793/error-with-draggable-and-droppable-image – Gaurav Manral Dec 11 '13 at 14:34

score 0 · Answer 4 · answered Dec 11 '13 at 14:08

0

I think on click the data you are reading is a string and in the given format. 
And you are passing that as data, but since it is not an valid id, 
that value in the database is not updated.

Check this out

answered Dec 11 '13 at 14:08

Anil Saini

627
3
17

submitting form with parameter from a link in jquery

4 Answers4