Page 1 of 1

Clear Form Fields

Posted: Sat Jun 18, 2011 7:15 pm
by 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

Re: I have this..

Posted: Sat Jun 18, 2011 8:15 pm
by jacek
you can set their value to an empty string
input_element.value = '';

Re: Clear Form Fields

Posted: Sun Jun 19, 2011 12:49 am
by ashwood
yeah but how do i do that in jquery? according to what ive got?

edit: on the success: function..

Re: Clear Form Fields

Posted: Sun Jun 19, 2011 1:08 am
by jacek
ashwood wrote: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 ''.

Re: Clear Form Fields

Posted: Sun Jun 19, 2011 9:54 am
by libeco
ashwood wrote:yeah but how do i do that in jquery? according to what ive got?

edit: on the success: function..
http://api.jquery.com/val/

Re: Clear Form Fields

Posted: Sun Jun 19, 2011 10:20 am
by 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.

Re: Clear Form Fields

Posted: Sun Jun 19, 2011 11:01 am
by 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..

Re: Clear Form Fields

Posted: Sun Jun 19, 2011 11:11 am
by Tino
No, you would need to specify a second parameter for attr that's the actual value.

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

Re: Clear Form Fields

Posted: Sun Jun 19, 2011 11:36 am
by 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;  
    });  
});

Re: Clear Form Fields

Posted: Sun Jun 19, 2011 2:39 pm
by ashwood
it works :D thanks a lot :D: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! :D

Re: Clear Form Fields

Posted: Sun Jun 19, 2011 3:49 pm
by jacek
ashwood wrote:why doesn't it clear straight away? it lags abit in a sense..
Waiting for the AJAX request to complete I guess.

Re: Clear Form Fields

Posted: Sun Jun 19, 2011 3:51 pm
by ashwood
Sorted thanks guys :)