how to send data from an input to php to process them

[lofaifa]

i wanna take tags value from an input and add it to my database , here is the tags

 

<input type="text" class="add" dir="ltr" />
<button type="submit" value="" class="sub" style="border: 0; background: transparent">

 

js : (using jq)

 

$('.sub').click(function(){
        		 var tags=$('.add').attr('value');
        		 $.post('public/ajax/upload_tags.php',{tags_to_add:tags},function(data){
                             });
        		  });

 

but returned nothing ! whats the problem?

[AyKay47]

no where in this code does would it return anything, what are you expecting this to do?

If you want to return the data from the $.post call, you will add something that actually returns the data, like an alert() call.

 

$('.sub').click(function() {
    var tags = $('.add').val(); //use this instead of .attr() method
    $.post('public/ajax/upload_tags.php', {tags_to_add:tags}, function(data) {
        alert(data);
    });
});

[lofaifa]

i left it empty cuz i dont wanna show anything actually .. the ajax file adds the tags to the database .. doesnt echo anything back to me .

 

and it doesnt add anything anyway ..

 

if(isset($_POST['tags_to_add']) && $_POST['tags_to_add']!="" && !empty($_POST['tags_to_add'])){
//as a test , doesnt return anything
echo $_POST['tags_to_add'];
}

[AyKay47]

1. $_POST['tags_to_add']!="" and !empty($_POST['tags_to_add'] are redundant, they do the same thing.

 

2. Since you are not receiving any data from the ajax call, the if condition is not being met, so tags_to_add is not getting passed correctly.

The first step is to add debugging to the ajax call to make sure that the value is getting passed to the php script correctly.

 

$('.sub').click(function() {
    var tags = $('.add').val();
    alert(tags);
    //$.post('public/ajax/upload_tags.php', {tags_to_add: tags}, function(data) {
    //    alert(data);
    });
});

[lofaifa]

yea its fine .. next ?

[AyKay47]

I am going to write it a different way since this is what I am use to.

 

$('.sub').click(function() {
    var tags = $('.add').val();
    $.ajax({
       type: 'POST',
       url: "public/ajax/upload_tags.php",
       data: "tags_to_add=" + tags,
       success: function(data) {
           alert(data);
       }
});
});

 

then in the public/ajax/upload_tags.php page

 

if(isset($_POST['tags_to_add']) && !empty($_POST['tags_to_add']))
{
    echo $_POST['tags_to_add'];
}

 

If this does not return anything, check to make sure that the path of the receiving file is correct.

[lofaifa]

it doesnt work and the path is correct .. maybe something wrong with the html ?

 

<form method="post">
                          <table width="200">
                                <tr>
                                    <td width="40" height="30"><b>add</b> </td>
                                     <td width="150">
                                     <input type="text" class="add" dir="ltr" />
                                  <div class="dropdown">
                                  	<ul class="result"></ul>
                                  </div>
                                    </td>
                              </tr> 
                                 <tr>
                                 <td></td>
                                <td><button type="submit" value="" class="sub" style="border: 0; background: transparent">
                                        		<img name="register" src="public/images/add.png" onmouseover="this.src='public/images/addh.png'" onmouseout="this.src='public/images/add.png'" width="152" height="26"  alt="submit"  />
                                             </button></td>
                            </tr>
                           </table>
                       </form>

 

and thank you for your help , i appreciate it

[AyKay47]

You'll need to tell me more than "it doesn't work".

What exactly happens?

If you received the correct value when you added alert(tags), then the event is working just fine, and the problem lies either in the ajax call itself, or the handling php page.

[lofaifa]

when i tried this :

 

$('.sub').click(function() {
    var tags = $('.add').val();
    alert(tags);
    //$.post('public/ajax/upload_tags.php', {tags_to_add: tags}, function(data) {
    //    alert(data);
    });
});

 

i received and alert every time w typed something , that means tags is set ..

 

now when i tried this :

 

$('.sub').click(function() {
    var tags = $('.add').val();
    $.ajax({
       type: 'POST',
       url: "public/ajax/upload_tags.php",
       data: "tags_to_add=" + tags,
       success: function(data) {
           alert(data);
       }
});
});

 

simply nothing happens , the page refreshes , no alert ..

[lofaifa]

its working now ..

 

i removed the <form></form> tags around it and it worked .. i dont know why

 

thank you for your help!

[AyKay47]

something was happening, but the page was refreshing because the form was being submitted.

To stop this, you can return false on the submit event.

 

<form id='some_form'><input id='some_field' type='text' /><input type='submit' /></form>

 

javascript:

 

$("#some_form").submit(function(e) {
    var input_val = $("#some_field").val();
    //ajax request
    $.ajax({
       url: "some_file.php",
       data: "field_val=" + input_val,
       success: function(d) {
            alert(d);
       } 
    });
    return false; //stops the forms default behavior
});

 

or you can do as you have done, and get rid of the form altogether.

Although typically you should have a back end form handler as well.