Submit data using AJAX

[OsaMasw]

I have single input to be enterded into database I want to use ajax to do this
The problem that I already have form to do something else so I can't put from inside form
how can I achive somthing like this without touching the original form

when press edit the field edited and "success" text appears

<input name="tx_name" type="text" id="tx_name" size="35" value="<? echo $data['title']; ?>"/>
<input name="tx_id" type="hidden" id="tx_id" value="<? echo $data['id']; ?>"/>
<a href="#" class="editname" >Edit</a>
<span class="error" style="display:none">Error</span>
<span class="success" style="display:none">Success</span>

<script type="text/javascript">
$(function() {

$(".editname").click(function() {


    var name = $("#tx_name").val();
    var id = $("#tx_id").val();

    var dataString = 'name='+ name + '&id=' + id ;

    if(name=='' || id=='' )
    {
    $('.success').fadeOut(200).hide();

    $('.error').fadeOut(200).show();

    }
    else
    {
    alert("name="+ name + "&id=" + id); // just to see what is the var
    $.ajax({
    type: "POST",
    url: "edit.php",
    data: dataString,
    success: function(){
    $('.success').fadeIn(200).show();
    $('.error').fadeOut(200).hide();
   }
});
}
    return false;
    });



});
</script>

and another problem the results allways the first input and that because of id
how can I achive this??

[broj1]

Each input on your form has to have a unique ID so you can refer to it. Also edit links have to have uinque IDs. You can use an ID from the database data or something else.

<input name="tx_name" type="text" id="tx_id-<? echo $data['id']; ?>" size="35" value="<? echo $data['title']; ?>"/>

<a href="#" class="editname" id="<? echo $data['id']; ?>">Edit</a>

Now you can catch the onclick event of edit link and read record ID from it:

$(".editname").click(function() {

    var recordId = $(this.attr('id'));

    // use recordId to access input fields
    var inputValue = $(('txt_id-' + recordId)).val(); // or something like that
    ...

EDIT: I have done several edits in the code so make sure you refresh to the last version.

The code above might be a bit wobly but you get the principle. I haven't tested it.

[OsaMasw]

I tried the code and now its not working :(
here is the full code

<input name="tx_name" type="text" id="tx_id-<? echo $data['pic_id']; ?>" size="35" value="<? echo $data['pic_title']; ?>"/>
<a href="#" class="editname" id="<? echo $data['pic_id']; ?>">Edit</a>
<span class="error" style="display:none">Error</span>
<span class="success" style="display:none">Success</span>

<!-- JavaScript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$(".editname").click(function() {
var recordId = $(this.attr('id'));
var name = $(('txt_id-' + recordId)).val();
// tried to put # and nothing works
    var dataString = 'name='+ name + '&id=' + recordId ;

    if(name=='' || recordId=='' )
    {
    $('.success').fadeOut(200).hide();

    $('.error').fadeOut(200).show();

    }


    else
    {
    $.ajax({
    type: "POST",
    url: "edit.php",
    data: dataString,
    success: function(){
    $('.success').fadeIn(200).show();
    $('.error').fadeOut(200).hide();
   }
});


    }


    return false;
    });



});
</script>

[broj1]

My mistake - a typo in the jquery code. Change line 11 from:

var recordId = $(this.attr('id'));

to:

var recordId = $(this).attr('id');

Note the change in brackets :-).

[broj1]

There are other small errors in the code as well so this is now the correct code (slightly reformated):

<script type="text/javascript">
$(function() {

    $(".editname").click(function() {

        var recordId = $(this).attr('id');
        var name = $('#tx_id-' + recordId).val();

        // tried to put # and nothing works
        var dataString = 'name='+ name + '&id=' + recordId ;

        if(name=='' || recordId=='' ) {

            $('.success').fadeOut(200).hide();
            $('.error').fadeOut(200).show();

        } else {

            $.ajax({

                type: "POST",
                url: "edit.php",
                data: dataString,
                success: function(){

                    $('.success').fadeIn(200).show();
                    $('.error').fadeOut(200).hide();
                }
            });    
        }

        return false;
    });    
});
</script>

The errors were in brackets, and the ID of input was misspelled (txt_id instead of tx_id).

[broj1]

There is another issue with your code. If a user enters spaces or ampersands or < or > or similar unwanted characters in the input box you should not pass that to the URL unencoded so use at least encodeURIComponent function before sending data to ajax.

$.ajax({

    type: "POST",
    url: "edit.php",
    data: encodeURIComponent(dataString),
    success: function(){
    $('.success').fadeIn(200).show();
    $('.error').fadeOut(200).hide();
    }
}); 

On the PHP side decode it back (i.e. using urldecode) and escape it properly to avoid attacks to your database or browser.

[OsaMasw]

I made those changes before read your post :D,its working perfectly now.
this page is only for admin and its me so I know my charachters is always wanted :D
but thanks for advice, I appreciate your help.