Javascript clear text field on submit

Question

I have a form that utilizes the Jquery form plugin. When the form is submitted I need to clear a textfield on my page. When this Javascript is run I want it clear the Textfield after running the php page.

<script> 
    // wait for the DOM to be loaded 
    $(document).ready(function() { 
        // bind 'myForm' and provide a simple callback function 
        $("#glue").ajaxForm({url: 'scripts/glue.php', type: 'post'})
    }); 
</script>

This is my input field:

<input type="text" id="glueField" class="form-control" name="word" placeholder="Press enter to glue a word" autocomplete="off" autofocus>

score 2 · Answer 1 · answered Jan 31 '14 at 08:27

2

I would use this method from the jQuery Form plugin, which clears all text inputs, password inputs, etc. inside of your ajax form. Like this:

$("#glue").ajaxForm({url: 'scripts/glue.php', type: 'post'}, function() {
    // Callback for when post is completed
    $('#glue').clearForm();
});

More info here

answered Jan 31 '14 at 08:27

Alec Moore

1,155
2
10
20

Unfortunately, this did not clear the input field. – Thobias Nordgaard Jan 31 '14 at 08:29
+1 for using the same plugin – Scary Wombat Jan 31 '14 at 08:29
Thanks @user2310289. You could also try natively resetting the value with $('#glue')[0].reset(); – Alec Moore Jan 31 '14 at 08:35
$('#glue')[0].reset(); did nothing either :/ – Thobias Nordgaard Jan 31 '14 at 09:40

score 1 · Answer 2 · answered Jan 31 '14 at 08:20

1

Try with:

$("#glue").ajaxForm({url: 'scripts/glue.php', type: 'post'}, function(){
  $('#glueField').val('');
});

answered Jan 31 '14 at 08:20

hsz

148,279
62
259
315

score 0 · Answer 3 · answered Jan 31 '14 at 08:21

0

If you are using inputs in that #glue then, after your ajax call, add this line would do the trick for you:

$('input').empty();

answered Jan 31 '14 at 08:21

Faron

1,255
11
20

score 0 · Answer 4 · answered Jan 31 '14 at 10:24

0

I fixed it myself. The jQuery form plugin has a method of doing this. I simply changed my jquery line to this:

$("#glue").ajaxForm({url: 'scripts/glue.php', type: 'post', clearForm: 'true'}, function() {

Adding:

clearForm: 'true'

answered Jan 31 '14 at 10:24

Thobias Nordgaard

278
7
20

score -1 · Answer 5 · answered Jan 31 '14 at 08:19

-1

jQuery (textFieldId/class).val ("");

answered Jan 31 '14 at 08:19

Arunkumar Srisailapathi

1,139
2
8
27

score -1 · Answer 6 · answered Jan 31 '14 at 08:21

-1

$("#glue").ajaxForm({url: 'scripts/glue.php', type: 'post', success: $("#glueField").val(''))})

You can do it like this. Set an empty string to the respective field on success.

answered Jan 31 '14 at 08:21

Muneeb Zulfiqar

1,003
2
13
31

1

Fix your code please. – hsz Jan 31 '14 at 08:22
fixed it. Was missing a comma right? – Muneeb Zulfiqar Jan 31 '14 at 08:25
You have extra `'` after `$("#glueField")` – hsz Jan 31 '14 at 08:25
Hm. This rendered the form unsuable, now it redicects to the action page instead of using ajax. Don't know why though. – Thobias Nordgaard Jan 31 '14 at 08:26

Javascript clear text field on submit

6 Answers6