Clear Form Fields

[ashwood]

     $(document).ready(function(){
    $("form#submit").submit(function() {
    var fname     = $('#fname').attr('value');
    var lname     = $('#lname').attr('value');  
        $.ajax({  
            type: "POST",  
            url: "ajax.php",  
            data: "fname="+ fname +"& lname="+ lname,  
            success: function(){
                $('form#submit').hide(function(){$('div.success').fadeIn();});
            }
        });  
    return false;  
    });  
});

I have that.. what is does it as you can see is send the data to the database then shows a div "success".. thing is i want the form to stay there but the data in the fields to disappear.. i did put the form inside the success div and it did show the form again when i submitted the data BUT when i tried submitting again from the success div form (which is the same as the original form) the page goes blank and the same data i entered first time round goes into the database again..

so my question is how do i get the form to stay and the fields to clear so the user can type a message again?

thanks

[jacek]

you can set their value to an empty string

input_element.value = '';

[ashwood]

yeah but how do i do that in jquery? according to what ive got?

edit: on the success: function..

[jacek]

yeah but how do i do that in jquery? according to what ive got?

I have no idea if the jQuery library provides a function to set the value, if it does it's a pretty pointless one.

But you would do it in the same way, get the element of the input that you want to set the value of, and then set it to ''.

[libeco]

yeah but how do i do that in jquery? according to what ive got?

edit: on the success: function..

http://api.jquery.com/val/

[Torniquet]

$('#fname').val('');
$('#lname').val('');

using .val(); returns the value of the targeted element. using .val('') sets the elements value to a new value, in this case nothing.

alternatively you can use .attr('value','') again setting the specified attribute with a new value.

[ashwood]

so would this work?

Using Javascript Syntax Highlighting
     $(document).ready(function(){
    $("form#submit").submit(function() {
    var fname     = $('#fname').attr('value');
    var lname     = $('#lname').attr('value');  
        $.ajax({  
            type: "POST",  
            url: "ajax.php",  
            data: "fname="+ fname +"& lname="+ lname,  
            success: function() { $('#fname').val('');
            $('#lname').val(''); });
            }
        });  
    return false;  
    });  
});

cant try it at the moment on my iphone..

[Tino]

No, you would need to specify a second parameter for attr that's the actual value.

.attr('value', 'whatever value you want')

[Torniquet]

no idea where your getting the extra });

but other than that, yes it should work. I have not come across a situation where using the .val('') doesnt remove the value.

so your script should look like this.

$(document).ready(function(){
    $("form#submit").submit(function() {
    var fname     = $('#fname').attr('value');
    var lname     = $('#lname').attr('value');  
        $.ajax({  
            type: "POST",  
            url: "ajax.php",  
            data: "fname="+ fname +"& lname="+ lname,  
            success: function() { 
                $('#fname').val('');
                $('#lname').val(''); 
            }
        });  
    return false;  
    });  
});

[ashwood]

it works thanks a lot :D:D:D:D:D!

only thing is..

http://www.aatm-online.co.uk/ajaxtest

why doesn't it clear straight away? it lags abit in a sense.. thanks again!

[jacek]

why doesn't it clear straight away? it lags abit in a sense..

Waiting for the AJAX request to complete I guess.

[ashwood]

Sorted thanks guys