CODEWITHSUNDEEP
javascriptjqueryhtmlforms
Yadollah Rahimi
Yadollah Rahimi

Reputation: 21

I can not use two conditions in jQuery

I have a form like this:

<form>

<input type="radio" name="adsType" id="adsType" value="request" />
<input type="radio" name="adsType" id="adsType" value="provide" />

<select name="transactionType" id="transactionType">
    <option value="1">Sale</option>
    <option value="2">Rent</option>
</select>

<input type="text" name="price" id="price" />
<input type="text" name="min_price" id="price" />
<input type="text" name="max_price" id="max_price" />


<input type="text" name="fare" id="fare" />
<input type="text" name="min_fare" id="min_fare" />
<input type="text" name="max_fare" id="max_fare" />

</form>

I want:

when provide selected and click on Sale display price input only,

when provide selected and click on Rent display fare input only,

when request selected and click on Sale display min_price and max_price inputs,

when request selected and click on Rent display min_fare and max_fare inputs

i am trying for this javascript:

//<![CDATA[
$(function(){
$('input[name=adsType]').change(function () {
    if ($(this).val() == 'provide') {

        $('select[name=transactionType]').change(function () {


                if ($(this).val() == '1') { /* Provide type | Sale type => display 'price' input only */
                    $('#price').show();
                } else {
                    $('#price').hide();
                }

                if ($(this).val() == '2') { /* Provide type | Rent type => display 'fare' input only */
                    $('#fare').show();
                } else {
                    $('#fare').hide();
                }

            });
    }
    if ($(this).val() == 'request') {
        if ($(this).val() == '1') { /* Request type | Sale type => display 'min_price' and 'max_price' inputs */
            $('#min_price').show();
            $('#max_price').show();
        } else {
            $('#min_price').hide();
            $('#max_price').hide();
        }

        if ($(this).val() == '2') { /* Request type | Rent type => display 'min_fare' and 'max_fare' inputs */
            $('#min_fare').show();
            $('#max_fare').show();
        } else {
            $('#min_fare').hide();
            $('#max_fare').hide();
        }

        });
    }
});

});//]]>

But it not return good result. Please help me to edit this JavaScript code!

Upvotes: 0

Views: 108

Answers (3)

Kosh
Kosh

Reputation: 18393

I believe something like this may help. See the snippet and comments in the code:

$(function() {

  function toggleFields() {

    // setup which fields to show in every case
    var items = {
      provide: {
        1: '#price',
        2: '#fare'
      },
      request: {
        1: '#min_price, #max_price',
        2: '#min_fare, #max_fare'
      }
    }

    // get the selected values
    var ad = $('input[name="adsType"]:checked').val(),
        tr = $('select[name="transactionType"]').val();

    // hide all and show required
    $('[id*="price"], [id*="fare"]').hide();
    $(items[ad][tr]).show();

  }

  // handler for changes
  $('select[name="transactionType"], input[name="adsType"]').change(toggleFields);
  
  // initial run
  toggleFields();

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>

  <label>request <input type="radio" name="adsType" value="request" checked/></label>
  <label>provide <input type="radio" name="adsType" value="provide" /></label>

  <select name="transactionType" id="transactionType">
    <option value="1" selected>Sale</option>
    <option value="2">Rent</option>
  </select>

  <div>
    <label id="price">price <input type="text" name="price" /></label>
    <label id="min_price">min_price <input type="text" name="min_price" /></label>
    <label id="max_price">max_price <input type="text" name="max_price" /></label>
  </div>

  <div>
    <label id="fare">fare <input type="text" name="fare" /></label>
    <label id="min_fare">min_fare <input type="text" name="min_fare" /></label>
    <label id="max_fare">max_fare <input type="text" name="max_fare" /></label>
  </div>
</form>

Upvotes: 1

Sreekanth Reddy Balne
Sreekanth Reddy Balne

Reputation: 3424

There is no onchange event for the select box inside the if ($(this).val() == 'request') { of your code.

I have made some changes like adding class all to the inputs #price #fare #max_price #max_fare #min_price #min_fare.

You can go through the code in the below snippet.

//<![CDATA[
$(function() {
  $('input[name=adsType]').change(function() {
  $('.all').hide();
  $('#transactionType').val('');
    if ($(this).val() == 'provide') {
      
      $('select[name=transactionType]').change(function() {

$('.all').hide();
        if ($(this).val() == '1') { /* Provide type | Sale type => display 'price' input only */
          $('#price').show();
        }

        if ($(this).val() == '2') { /* Provide type | Rent type => display 'fare' input only */
          $('#fare').show();
        }

      });
    }
    if ($(this).val() == 'request') {
    $('select[name=transactionType]').change(function() {
      $('.all').hide();
      if ($(this).val() == '1') { /* Request type | Sale type => display 'min_price' and 'max_price' inputs */
        $('#min_price, #max_price').show();
      }

      if ($(this).val() == '2') { /* Request type | Rent type => display 'min_fare' and 'max_fare' inputs */
        $('#min_fare, #max_fare').show();
      }
});
    };
  });

});
.all {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>

  request<input type="radio" name="adsType" id="adsType" value="request" /> provide
  <input type="radio" name="adsType" id="adsType" value="provide" />

  <select name="transactionType" id="transactionType">
    <option value="" selected></option>
    <option value="1">Sale</option>
    <option value="2">Rent</option>
</select>

  <input class='all' type="text" name="price" placeholder='price' id="price" />
  <input class='all' type="text" name="min_price" placeholder='min_price' id="min_price" />
  <input class='all' type="text" name="max_price" placeholder='max_price' id="max_price" />


  <input class='all' type="text" name="fare" placeholder='fare' id="fare" />
  <input class='all' type="text" name="min_fare" placeholder='min_fare' id="min_fare" />
  <input class='all' type="text" name="max_fare" placeholder='max_fare' id="max_fare" />

</form>

Upvotes: 1

toto
toto

Reputation: 1188

TRY IT:

         $(document).ready(function () {

                var radioValue = "request";
                var transactionValue = 1;

                $('input[name=adsType]').change(function () {


                    radioValue = $(this).val();
                    update();

                });

                $('select[name=transactionType]').change(function () {


                    transactionValue = parseInt($(this).val(), 10);


                    update();

                });


                function update() {


                    if (radioValue === "provide") {
                        if (transactionValue === 1) {
                            $('#price').show();
                            $('#min_price').hide();
                            $('#max_price').hide();
                            $('#fare').hide();
                            $('#min_fare').hide();
                            $('#max_fare').hide();
                        } else {
                            $('#price').hide();
                            $('#min_price').hide();
                            $('#max_price').hide();
                            $('#fare').show();
                            $('#min_fare').hide();
                            $('#max_fare').hide();
                        }

                    } else {
                        if (transactionValue === 1) {
                            $('#price').hide();
                            $('#min_price').show();
                            $('#max_price').show();
                            $('#fare').hide();
                            $('#min_fare').hide();
                            $('#max_fare').hide();
                        } else {
                            $('#price').hide();
                            $('#min_price').hide();
                            $('#max_price').hide();
                            $('#fare').hide();
                            $('#min_fare').show();
                            $('#max_fare').show();
                        }


                    }




                }

                update();
            });

FORM HTML > Please check form id: min_price

    <form>

            <input type="radio" name="adsType" id="adsType" value="request" checked="checked" />
            <input type="radio" name="adsType" id="adsType" value="provide" />

            <select name="transactionType" id="transactionType">
                <option value="1" selected="selected">Sale</option>
                <option value="2">Rent</option>
            </select>

            <input type="text" name="price" id="price" />
            <input type="text" name="min_price" id="min_price" />
            <input type="text" name="max_price" id="max_price" />


            <input type="text" name="fare" id="fare" />
            <input type="text" name="min_fare" id="min_fare" />
            <input type="text" name="max_fare" id="max_fare" />

        </form>

Upvotes: 1

Related Questions