CODEWITHSUNDEEP
javascriptjquery
HelloWorld1
HelloWorld1

Reputation: 14108

Clear all data and turn back to default settings

Goal:
When I clickon the clear all button and the data inside of the input box should be empthy and the dropdownlist should go back to default settings that is year 2009.

Problem:
I don't know how to do in order to make the dropdownlist to go back to default when you have pressed the button?

Info:
Please remember that I do not want to make any big changes in the current javascript/jquery sourcecode because it is used in production phase. I would like to make a complementary to the current source code.

I tried using <input type="reset" value="Clear alll" name="clear_all"> but it doesn't work in long term with the current source code.

Thanks! 

http://jsbin.com/qezesohake/edit?html,js,console,output


    function df(data) {

        $(data).find(':input').each(function () {
            switch (this.type) {
                case 'text':
	
                case 'textarea':
                    $(this).val('');
                    break;
            }
        });

    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<form action=""" method="post">    

<fieldset>
	<input id="aaa" type="text" value="" />
	<input id="bbb" type="text" value="" />


	<select id="year">

		<option value="2010">2010</option>
		<option value="2009" selected="selected">2009</option>
		<option value="2008">2008</option>

	</select>

</fieldset>


 <input type="button" value="Clear alll" name="clear_all" onclick="df(this.form)" />                                                          
                                                          
</form>

Upvotes: 0

Views: 437

Answers (3)

Vivek Jain
Vivek Jain

Reputation: 3889

Reset button does not require any onClick event to be passed. It works automatically.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form action=""" method="post">    
    <fieldset>
        <input id="aaa" type="text" value="" />
        <input id="bbb" type="text" value="" />
        <select id="year">
            <option value="2010">2010</option>
            <option value="2009" selected="selected">2009</option>
            <option value="2008">2008</option>
        </select>
    </fieldset>
    <input type="reset" value="Clear alll" name="clear_all" />                                                          
</form>

Upvotes: 0

Rayon
Rayon

Reputation: 36609

<form action="#" method="post">    

<fieldset>
	<input id="aaa" type="text" value="" />
	<input id="bbb" type="text" value="" />


	<select id="year">

		<option value="2010">2010</option>
		<option value="2009" selected="selected">2009</option>
		<option value="2008">2008</option>

	</select>

</fieldset>


 <input type="reset" value="Clear alll" name="clear_all" onclick="doSomething()">                                                         
                                                          
</form>

<script>
   function doSomething(){
     alert('Do something!');
   }
</script>

Upvotes: 2

Vicky Gonsalves
Vicky Gonsalves

Reputation: 11717

You don't need any javascript to clear form instead just replace your input type to reset button

 <input type="reset" value="Clear all" name="clear_all"/>

Upvotes: 0

Related Questions