CODEWITHSUNDEEP
javascriptphpjqueryhtmlcss
Rajib.Hassan
Rajib.Hassan

Reputation: 93

If my form's one div visible, then another div's value will be reset

I have a form for mysql query which class name is myForm. There are some div for different value. Now, if I select checkbox_one from class="select_box" then div.check_area_one will be fadeIn(); After that,

1) If I checked checkbox value="one" then div_one will be fadeIn() and another fadeOut();

2) If I checked checkbox value="two" then div_two will be fadeIn() and another fadeOut();

3) If I checked checkbox value="three" then div_three will be fadeIn() and another fadeOut();

And after checked any radio button of them, submit button [which in class submit div] will be fadeIn(); Same thing will be happened on select option [Which class is "select_box" in top] checkbox_two or checkbox_three But my problem is, anyone can fill everything in"checkbox_one from first. But after fill those things and before press submit, he can change his choice and he can select checkbox_two from first. I want, if do something like this, the previous selected all option will be automatic reset. I don't know can I do this, Please help me. If possible, give me full code please.

My CSS and HTML sample is given below:

CSS: 

<style type="text/css">
.check_area_one, .check_area_two, .check_area_three {display:none;}
.div_one, div_two, div_three{display:none;}
</style>

HTML:

<form action="" class="myForm">
<select class="select_box" name="check_select" id="">
 <option value="checkbox_one">checkbox_one</option>
 <option value="checkbox_two">checkbox_two</option>
 <option value="checkbox_three">checkbox_three</option>
</select>
<div class="check_area_one"> <!--first one -->
    <div class="checkbox_one">
    <input type="checkbox" value="One"/> One
    <input type="checkbox" value="Two"/> Two
    <input type="checkbox" value="Three"/> Three
    </div>
        <div class="div_one">
            <input type="radio" value="mango"/> Mango
            <input type="radio" value="apple"/> Apple
            <input type="radio" value="banana"/> Banana
        </div>

        <div class="div_two">
            <input type="radio" value="fish"/> Fish
            <input type="radio" value="rice"/> Rice
            <input type="radio" value="beef"/> Beef
        </div>

        <div class="div_three">
            <input type="radio" value="football"/> Football
            <input type="radio" value="cricket"/> Cricket
            <input type="radio" value="basketball"/> Basketball
        </div>
        <div class="submit">        
            <input type="submit" value="submit" />
        </div>
</div>
<div class="check_area_two"> <!--second one-->
    <div class="checkbox_two">
    <input type="checkbox" value="One"/> One
    <input type="checkbox" value="Two"/> Two
    <input type="checkbox" value="Three"/> Three
    </div>
        <div class="div_one">
            <input type="radio" value="mango2"/> Mango2
            <input type="radio" value="apple2"/> Apple2
            <input type="radio" value="banana2"/> Banana2
        </div>

        <div class="div_two">
            <input type="radio" value="fish2"/> Fish2
            <input type="radio" value="rice2"/> Rice2
            <input type="radio" value="beef2"/> Beef2
        </div>

        <div class="div_three">
            <input type="radio" value="football2"/> Football2
            <input type="radio" value="cricket2"/> Cricket2
            <input type="radio" value="basketball2"/> Basketball2
        </div>
        <div class="submit">        
            <input type="submit" value="submit" />
        </div>
</div>
<div class="check_area_three"> <!--third one-->
    <div class="checkbox_one">
    <input type="checkbox" value="One"/> One
    <input type="checkbox" value="Two"/> Two
    <input type="checkbox" value="Three"/> Three
    </div>
        <div class="div_one">
            <input type="radio" value="mango3"/> Mango3
            <input type="radio" value="apple3"/> Apple3
            <input type="radio" value="banana3"/> Banana3
        </div>

        <div class="div_two">
            <input type="radio" value="fish3"/> Fish3
            <input type="radio" value="rice3"/> Rice3
            <input type="radio" value="beef3"/> Beef3
        </div>

        <div class="div_three">
            <input type="radio" value="football3"/> Football3
            <input type="radio" value="cricket3"/> Cricket3
            <input type="radio" value="basketball3"/> Basketball3
        </div>
                <div class="submit">        
            <input type="submit" value="submit" />
        </div>
</div>
</form>

Upvotes: 0

Views: 147

Answers (2)

Suyog
Suyog

Reputation: 2482

This may help you.

<script>
$('.select_box').change(function()
{
    if(this.value == 'checkbox_one')
    {
        $('.check_area_one').css('display', 'block');
        $('.check_area_two').css('display', 'none');
        $('.check_area_three').css('display', 'none');

        jQuery(".check_area_two, .check_area_three").find(':input').each(function() {
            switch(this.type) {
                case 'password':
                case 'text':
                case 'textarea':
                case 'file':
                case 'select-one':
                case 'select-multiple':
                    jQuery(this).val('');
                    break;
                case 'checkbox':
                case 'radio':
                    this.checked = false;
            }
        });
    }

    if(this.value == 'checkbox_two')
    {
        $('.check_area_two').css('display', 'block');
        $('.check_area_one').css('display', 'none');
        $('.check_area_three').css('display', 'none');

        jQuery(".check_area_one, .check_area_three").find(':input').each(function() {
            switch(this.type) {
                case 'password':
                case 'text':
                case 'textarea':
                case 'file':
                case 'select-one':
                case 'select-multiple':
                    jQuery(this).val('');
                    break;
                case 'checkbox':
                case 'radio':
                    this.checked = false;
            }
        });
    }

    if(this.value == 'checkbox_three')
    {
        $('.check_area_three').css('display', 'block');
        $('.check_area_one').css('display', 'none');
        $('.check_area_two').css('display', 'none');

        jQuery(".check_area_one, .check_area_two").find(':input').each(function() {
            switch(this.type) {
                case 'password':
                case 'text':
                case 'textarea':
                case 'file':
                case 'select-one':
                case 'select-multiple':
                    jQuery(this).val('');
                    break;
                case 'checkbox':
                case 'radio':
                    this.checked = false;
            }
        });
    }
});

Fiddle

Upvotes: 1

Chilli
Chilli

Reputation: 123

Try it : May be it help to you 

<script>
    $(document).ready(function () {
       $('.select_box').change(function()
        {
            $('.check_area_one,.check_area_two,.check_area_three').hide('1000');
            if(this.value == 'checkbox_one')
            {
                $('.check_area_one').show('1000');            
            }

            if(this.value == 'checkbox_two')
            {
                $('.check_area_two').show('1000');            
            }

            if(this.value == 'checkbox_three')
            {
                $('.check_area_three').show('1000');           
            }

        });
     });
    </script>

Upvotes: 1

Related Questions