Breaking News: Grepper is joining You.com. Read the official announcement!

dynamic input fields with radio button

Uninterested Unicorn answered on August 29, 2021 Popularity 7/10 Helpfulness 2/10

answer dynamic input fields with radio button

dynamic input fields with radio button

Comment

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

<head>
  <script>
    $(document).ready(function($) {

      //Moved inside $(document).ready()
      $("input[name='chkPassPort']").click(function() { 
        if ($("#chkYes").is(":checked")) {               
          $("#dvPassport").show();           
        } else {               
          $("#dvPassport").hide();           
        }       
      });

      $('input.maxtickets_enable_cb').change(function() {
        if ($(this).is(':checked')) $(this).parent().children('div.max_tickets').show();
        else $(this).parent().children('div.max_tickets').hide();
      }).change();
      $('#contact_form').bootstrapValidator({
          feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
          },
          fields: {
            first_name: {
              validators: {
                stringLength: {
                  min: 2,
                },
                notEmpty: {
                  message: 'your first name'
                }
              }
            }
          }
        })
        .on('success.form.bv', function(e) {
          $('#success_message').slideDown({
            opacity: "show"
          }, "slow")
          $('#contact_form').data('bootstrapValidator').resetForm();
          e.preventDefault();
          var $form = $(e.target);

          var bv = $form.data('bootstrapValidator');

          $.post($form.attr('action'), $form.serialize(), function(result) {
            console.log(result);
          }, 'json');
        });
    });
  </script>
</head>
<div class="row">
  <div class="col-md-10" style="padding: 0; height:20%;">
    <div class="panel panel-default">
      <span>Do you have Passport?</span>
      <label for="chkYes">
        <input type="radio" id="chkYes" name="chkPassPort" />Yes
      </label>
      <label for="chkNo">
        <input type="radio" id="chkNo" name="chkPassPort" />No
      </label>
      <hr />
      <div id="dvPassport" style="display: none">
        Passport Number:
        <input type="text" id="txtPassportNumber" />
      </div>

      <form action="">
        <div id="opwp_woo_tickets">
          <div>
            <input type="checkbox" class="maxtickets_enable_cb" name="opwp_wootickets[tickets][0][enable]">
            <div class="max_tickets">
              <input type="text" name="opwp_wootickets[tickets][0][maxtickets]">
            </div>
          </div>
        </div>
      </form>
    </div>
    <!-- /.container -->


    <div class="container">

      <form class="well form-horizontal" action="" method="post" id="contact_form">
        <fieldset>

          <div class="form-group">
            <label class="col-md-4 control-label">First Name</label>
            <div class="col-md-4 inputGroupContainer">
              <div class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                <input name="first_name" placeholder="First Name" class="form-control" type="text">
              </div>
            </div>
          </div>
        </fieldset>
      </form>
    </div>
  </div>
</div>

Popularity 7/10 Helpfulness 2/10 Language javascript

Source: stackoverflow.com

Tags: dynamic javascript radio-button

Link to this answer
Share Copy Link

Contributed on Aug 29 2021

Uninterested Unicorn

0 Answers Avg Quality 2/10

dynamic input fields with radio button

Contents

More Related Answers

dynamic input fields with radio button

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.