CODEWITHSUNDEEP
javascripthtmlforms
michelle
michelle

Reputation: 653

form value wont reset on submit

On submit I would like the form to reset to Write your comment here. Below I have 

document.getElementById('#Comment').value='';

but the form value is not resetting.

<form action="comments.php" method="post" id="Comment">
   <input type="text" style="width: 600px" value="Write your comment here" name="Comment" maxlength="250" autocomplete="off" id="Comment"
          onblur="if (this.value == '') {this.value = 'Write your comment here';}"
          onfocus="if (this.value == 'Write your comment here') {this.value = '';}" /><br>

   <input type="hidden" value="Post" name="submit" /> 

   </button>


   <input type="submit">
</form>
<script>
  $(function(){
    $('#Comment').on('submit', function(e){

    // prevent native form submission here
    e.preventDefault();

    // now do whatever you want here
    $.ajax({
        type: $(this).attr('method'), // <-- get method of form
        url: $(this).attr('action'), // <-- get action of form
        data: $(this).serialize(), // <-- serialize all fields into a string that is ready to be posted to your PHP file
        beforeSend: function(){
            $('#result').html('');
        },
        success: function(data){
            $('#result').html(data);
            document.getElementById('#Comment').value='';
        }
     });
   });
 });
</script>

Upvotes: 2

Views: 986

Answers (5)

EaziLuizi
EaziLuizi

Reputation: 1615

Remove the hash tag, change this line:

document.getElementById('#Comment').value='';

to

document.getElementById('Comment').value='';

Above will set input elements value to '', or below

document.getElementById('Comment').reset();

will reset the form.

EDIT:

I am not exactly sure what you are trying to achieve but try this code below, and alter it to your requirements, placeholder is usually a better option than handling the logic yourself like you are trying, here is the support for it..

<form action="comments.php" method="post" id="Comment">
    <input type="text" style="width: 600px" placeholder="Write your comments here..." value="" name="Comment" maxlength="250" autocomplete="off" id="txtComment" />

    <button type="submit" >Submit Me</button>
</form>
<script>
$(function () {
    $('#Comment').on('submit', function (e) {

        // prevent native form submission here
        e.preventDefault();

        // now do whatever you want here
        $.ajax({
            type: $(this).attr('method'), // <-- get method of form
            url: $(this).attr('action'), // <-- get action of form
            data: $(this).serialize(), // <-- serialize all fields into a string that is ready to be posted to your PHP file
            beforeSend: function () {
                $('#result').html('');
            },
            success: function (data) {
                $('#result').html(data);
                document.getElementById('Comment').reset();
            }
        });
    });
});
</script>

Upvotes: 4

Sim
Sim

Reputation: 3317

I see, you're using jquery. Why don't you use the jquery selector and then reset the value of your form?

$("#Comment").get(0).reset();

Note: The get(0) function returns the form object from the selected jquery object and you can call the reset() method on it.

Upvotes: 0

Karl Gjertsen
Karl Gjertsen

Reputation: 4928

Instead of resetting the value, which could be posted as a form entry, why not use a placeholder?

<input type='text' placeholder='Write your comment here' />

Upvotes: 0

Marc Anton Dahmen
Marc Anton Dahmen

Reputation: 1091

You have a closing button tag </button>, but no opening tag. Add the button <button type="submit"> before and it should work.

Upvotes: 0

Harry Bomrah
Harry Bomrah

Reputation: 1668

Use this document.getElementById('Comment').reset();

Upvotes: 1

Related Questions