CODEWITHSUNDEEP
javascripthtmljquery
Faizan Qadri
Faizan Qadri

Reputation: 248

Form fields value get reset without page load

Following is my code in which i am trying to accomplish, when user clicks on the submit button then my javascript function sets all the value to null in the textfields of the form whose id='contact_form' without loading the page . Kindly let me know how can i modify the following code to accomplish the functionality i've been trying to do. Thanks!!

<script type='text/javascript'>
    $(document).ready(function(){
        $('#love').click(function(e) {
            document.contact_form.name.value = '';
            alert('aloha!!');
            //stop the form from being submitted (not working fine)
            e.preventDefault();
        }
    }
</script>
<form name='abc' action='' id='abc' >
    <input type="submit" id='love' />
</form>

I have also tried the following function it worked fine but its not preventing from the page load

<script type='text/javascript'>
    function js(){
        document.contact_form.name.value = '';
        //stop the form from being submitted (NOT WORKING!!)
        preventDefault();
    }
    }
</script>

Upvotes: 0

Views: 733

Answers (5)

Bergi
Bergi

Reputation: 664970

A form can be submitted in many ways, not only by clicking on a submit buttons. You should really watch for submit events, and cancel them with preventDefault (instead of click events that might trigger the submit). See @user1359163's answer.

But you problem seem to be document.contact_form.name.value. There is no property contact_form on the document object, so this will raise an error. The preventDefault is not executed, your form gets submitted and you never see the error. Set your debugger to "Stop on errors"!

You might want something like document.forms["contact"], but I don't know your HTML. An id selector for the input element would be the better choice.

Upvotes: 0

yusufiqbalpk
yusufiqbalpk

Reputation: 272

Assuming you have an HTML like this :

<form>
<input type="text" id="text" />
<input type="submit" id='submit' value="clear above field without reloading" />
</form>

And you want the text field value to clear when a user submits without reloading using jQuery, then following script will be your remedy :

$(function(){
$('#submit').click(function(){
    $('#text').value('');
})
});

Upvotes: 0

KBN
KBN

Reputation: 2974

$("#abc").submit( function() {
  // do everything you want.
   return false; //will prevent the reload.
});

Upvotes: 1

Amberlamps
Amberlamps

Reputation: 40488

If you try onsubmit="return false;" in the form tag your form will not be submitted. Unfortunately it will NEVER be submit. Unless you are not planning to submit it via AJAX you have to modify your onsubmit event like this:

<form onsubmit="return callFunction()">

function callFunction() {
    if(condition)
        return true;
    else
        return false;
}

Upvotes: 1

Johan
Johan

Reputation: 1557

To have a function execute when the form submits you have to do something like this;

<form onsubmit="return validate();">
your form here
</form>

Then you can have your check in a function called 'validate()' (or whatever you want to call it)

Make sure the validate() function returns true is the form is allowed to submit, or returns false if the page is not allowed to submit.

Also put id's and names on your input elements, that way you can access them much easier.

Upvotes: 0

Related Questions