Я хочу отобразить две формы.
Первая форма должна отображаться при щелчке первой опции, а
Вторая форма должна отображаться при нажатии второй опции
Пожалуйста, помогите мне. Заранее спасибо.
вот мой код:как показать и скрыть формы, выбрав опцию с помощью jquery

<form class="form-horizontal" id="form" data-role="form"> 
<div class="form-group"> 
    <label class="col-sm-3 control-label col-sm-offset-1" for="What">What do you want?:</label> 
    <select class="selectpicker col-md-4" id="What" title="Select Any Option"> 
     <option id="opt1">Sell Embroidery Machine</option> 
     <option id="opt2">Buy Embroidery Machine</option> 
    </select> 
</div> 
</form>

здесь формы:

<form class="form-horizontal hide" id="form1" data-role="form"> 
<div class="form-group"> 
    <label class="col-sm-2 control-label col-sm-offset-2" for= 
      "Name">Name:</label> 
    <div class="col-sm-4"> 
     <input class="form-control" id="Name" placeholder="Name" 
       required="" type="text"> 
    </div> 
</div> 
<div class="form-group"> 
    <label class="col-sm-2 control-label col-sm-offset-2" for= 
      "surname">Sur Name:</label> 
    <div class="col-sm-4"> 
     <input class="form-control" id="surname" placeholder= 
       "Sur Name" required="" type="text"> 
    </div> 
</div> 
<div class="form-group"> 
    <label class="col-sm-3 control-label col-sm-offset-1" for= 
      "Contact">Contact Number:</label> 
    <div class="col-sm-4"> 
     <input class="form-control" id="Contact" placeholder= 
       "Contact Number" required="" type="tel"> 
    </div> 
</div> 
<div class="form-group"> 
    <label class="col-sm-2 control-label col-sm-offset-2" for= 
      "Email">Email:</label> 
    <div class="col-sm-4"> 
     <input class="form-control" id="Email" placeholder= 
       "Email Address" required="" type="email"> 
    </div> 
</div> 
<div class="form-group"> 
    <label class="col-sm-3 control-label col-sm-offset-1" for= 
      "Location">Where Are you located?</label> 
    <div class="col-sm-4"> 
     <input class="form-control" id="location" placeholder= 
       "Location" type="text"> 
    </div> 
</div> 
<div class="form-group"> 
    <label class="col-sm-3 control-label col-sm-offset-1" for= 
      "radio1">This is a qoute for:</label> 
    <div class="col-sm-4" id="radio1"> 
     <div class="radio"> 
      <label><input name="optionsRadios" type="radio"> My Self</label> 
     </div> 
     <div class="radio"> 
      <label><input name="optionsRadios" type="radio"> My Business</label> 
     </div> 
     <div class="radio"> 
      <label><input name="optionsRadios" type="radio"> On Behalf of someone else</label> 
     </div> 
     <div class="radio"> 
      <label><input name="optionsRadios" type="radio"> On Behalf of another business</label> 
     </div> 
    </div> 
</div> 
<div class="form-group"> 
    <label class="col-sm-2 control-label col-sm-offset-2" for= 
      "BusinessName">Business Name:</label> 
    <div class="col-sm-4"> 
     <input class="form-control" id="BusinessName" placeholder= 
       "Business Name" type="text"> 
    </div> 
</div> 
<div class="form-group"> 
    <label class="col-sm-3 control-label col-sm-offset-1" for= 
      "checkbox">I would like an embroidery machine because:</label> 
    <div class="col-sm-4"> 
     <div class="checkbox"> 
      <label><input id="checkbox" type="checkbox"> Embroidery 
       machine is my hobby</label> 
     </div> 
     <div class="checkbox"> 
      <label><input type="checkbox"> I would like to start my 
       business</label> 
     </div> 
     <div class="checkbox"> 
      <label><input type="checkbox"> I would like upgrade my 
       emroidery machine</label> 
     </div> 
     <div class="checkbox"> 
      <label><input type="checkbox"> To Extand my business to 
       include embroidery</label> 
     </div> 
    </div> 
</div> 
<div class="form-group"> 
    <label class="col-sm-3 control-label col-sm-offset-1" for= 
      "EmbExp">Embroidery Experience:</label> 
    <select class= 
        "selectpicker col-md-4" id="EmbExp" title="Select Any Option"> 
     <option> 
      Beginner Embroider (0-6 month) 
     </option> 
     <option> 
      Intermediate Embroider (1-2 years 
     </option> 
     <option> 
      Advanced Embroider (2+ years) 
     </option> 
    </select> 
</div> 
<div class="form-group"> 
    <label class="col-sm-3 control-label col-sm-offset-1" for= 
      "IntIn">I am Intersested in:</label> 
    <select class= 
        "selectpicker col-md-4" id="IntIn" title="Select Any Option"> 
     <option value="Home embroidery machine (R2 000-R20 000)"> 
      Home embroidery machine (R2 000-R20 000) 
     </option> 
     <option value= 
         "Combo sewing/embroidery machine (R20 000-R100 000)"> 
      Combo sewing/embroidery machine (R20 000-R100 000) 
     </option> 
     <option value= 
         "Semi-Industrial embroidery machine (R90 00-R160 000)"> 
      Semi-Industrial embroidery machine (R90 00-R160 000) 
     </option> 
     <option value= 
         "Industrial embroidery machine (R70 000-R150 000)"> 
      Industrial embroidery machine (R70 000-R150 000) 
     </option> 
     <option value= 
         "Industrial embroidery machine (R150 000-R400 000)"> 
      Industrial embroidery machine (R150 000-R400 000) 
     </option> 
    </select> 
</div> 
<div class="form-group"> 
    <label class="col-sm-3 control-label col-sm-offset-1" for= 
      "radio2">New or Pre-owned? :</label> 
    <div class="col-sm-4" id="radio2"> 
     <div class="radio"> 
      <label><input name="optionsRadios1" type="radio"> New Embroidery Machine</label> 
     </div> 
     <div class="radio"> 
      <label><input name="optionsRadios1" type="radio"> Used 
       Embroidery Machine</label> 
     </div> 
     <div class="radio"> 
      <label><input name="optionsRadios1" type="radio"> Quote 
       For Both New And Used Embroidery Machine</label> 
     </div> 
     <div class="radio"> 
      <label><input name="optionsRadios1" type="radio"> On 
       Behalf of another business</label> 
     </div> 
    </div> 
</div> 
<div class="form-group"> 
    <label class="col-sm-3 control-label col-sm-offset-1" for= 
      "IHav">I am Intersested in:</label> 
    <select class= 
        "selectpicker col-md-4" id="IHav" title="Select Any Option"> 
     <option value="R2 000 - R5 000"> 
      R2 000 - R5 000 
     </option> 
     <option value="R5 000 - R10 000"> 
      R5 000 - R10 000 
     </option> 
     <option value="R10 000 - R50 000"> 
      R10 000 - R50 000 
     </option> 
     <option selected="selected" value="R50 000 - R100 000"> 
      R50 000 - R100 000 
     </option> 
     <option value="R100 000 - R200 000"> 
      R100 000 - R200 000 
     </option> 
     <option value="R200 000 - R400 000"> 
      R200 000 - R400 000 
     </option> 
    </select> 
</div> 
<div class="form-group"> 
    <label class="col-sm-3 control-label col-sm-offset-1" for= 
      "radio3">I require financing:</label> 
    <div class="col-sm-4" id="radio3"> 
     <div class="radio"> 
      <label><input name="optionsRadios2" 
          type="radio"> Yes</label> 
     </div> 
     <div class="radio"> 
      <label><input name="optionsRadios2" type="radio"> No, I 
       already have financing arranged</label> 
     </div> 
     <div class="radio"> 
      <label><input name="optionsRadios2" type="radio"> No, I 
       will be paying cash</label> 
     </div> 
    </div> 
</div> 
<div class="form-group"> 
    <label class="col-sm-3 control-label col-sm-offset-1" for= 
      "Radio4">Do you already have a digitizing software 
     :</label> 
    <div class="col-sm-4" id="radio4"> 
     <div class="radio"> 
      <label><input name="optionsRadios3" 
          onfocus="enableField();" type="radio"> Yes</label> 
     </div> 
     <div class="radio"> 
      <label><input name="optionsRadios3" onfocus= 
        "disableField();" type="radio"> No</label> 
     </div> 
    </div> 
</div> 
<div class="form-group hide fade" id="NameOfSoft1"> 
    <label class="col-sm-3 control-label col-sm-offset-1" for= 
      "NameOfSoft">Name Of Digitizing Software:</label> 
    <div class="col-sm-4"> 
     <input class="form-control" id="NameOfSoft" placeholder= 
       "Name" required="" type="text"> 
    </div> 
</div> 
<div class="form-group"> 
    <label class="col-sm-3 control-label col-sm-offset-1" for="txtArea">Any Additional Comments:</label> 
    <div class="col-sm-4"> 
     <textarea class="form-control" id="txtArea" placeholder="Additional Comments" rows="5"></textarea> 
    </div> 
</div> 
<a class="btn btn-default col-sm-offset-5" href="">Submit 
    Quote</a> 
</form> 

<br> 

<form class="form-horizontal hide" id="form2" role="form"></form>

и сценарий:

$(function(){ 

console.log('jquery loaded...'); 
//$('#What').change(function(){ 
// console.log($("#What option").filter(":selected")); 
//}); 

$('#form #what #opt1').click(function(){ 
    console.log("Option 2 Clicked"); 

    if($("#form1").hasClass('hide')) 
    { 
     console.log("First Statement Passed..."); 
     if($("#form2").hasClass('in')) 
     { 

     console.log("Nested Statement 1 Passed..."); 
      $('#form2').removeClass('in'); 
      $('#form2').addClass('hide'); 
      $('#form1').removeClass('hide'); 
      $('#form1').addClass('in'); 
     } 
     else 
     { 
     console.log("Nested Statement 2 Passed..."); 
      $('#form1').removeClass('hide'); 
      $('#form1').addClass('in'); 
      $('#form2').removeClass('in'); 
      $('#form2').addClass('hide'); 

     }   
    } 
    else 
    { 
     console.log("Second Statement Passed..."); 
     if($("#form1").hasClass('in')) 
     { 
      console.log("Nested Second Statement Passed..."); 
      $('#form1').removeClass('in'); 
      $('#form1').addClass('hide'); 
      $('#form2').removeClass('hide'); 
      $('#form2').addClass('in'); 
     } 
    } 

}); 

$('#form #opt1').click(function(){ 
    console.log("Option 1 Clicked"); 
    //ZI70u7nfZGzr1vB5fR2N6w 
    if($("#form1").hasClass('hide')) 
    { 
     console.log("First Statement Passed..."); 
     if($("#form2").hasClass('in')) 
     { 

     console.log("Nested Statement 1 Passed..."); 
      $('#form2').removeClass('in'); 
      $('#form2').addClass('hide'); 
      $('#form1').removeClass('hide'); 
      $('#form1').addClass('in'); 
     } 
     else 
     { 
     console.log("Nested Statement 2 Passed..."); 
      $('#form1').removeClass('hide'); 
      $('#form1').addClass('in'); 
      $('#form2').removeClass('in'); 
      $('#form2').addClass('hide'); 

     }   
    } 
    else 
    { 
     console.log("Second Statement Passed..."); 
     if($("#form1").hasClass('in')) 
     { 
      console.log("Nested Second Statement Passed..."); 
      $('#form1').removeClass('in'); 
      $('#form1').addClass('hide'); 
      $('#form2').removeClass('hide'); 
      $('#form2').addClass('in'); 
     } 
    } 

}); 
});

Fiddle

источник

2014-11-22 Humayun Ahmed

$ (# form1) .hide(); $ (# form2) .show() и $ (# form1) .show(); $ (# form2) .hide() – bsting

добавьте свой css .... какой код делает ваш класс [in, hide], это простая задача в jquery, показывающая форму на клике ... показать ваш css – Vicky

я могу «Я вижу два элемента' form' и 'select' в примере скрипта –

Проверьте, если это то, что вы хотите .. ... Простой способ сделать это вместо добавления классов и проверки c дивчины

HTML

<form> 
    <div class="form-group"> 
    <label class="col-sm-3 control-label col-sm-offset-1" for="What">What do you want?:</label> 
    <select class="selectpicker col-md-4" ititle="Select Any Option" id="myselect"> 
     <option id="op1">Sell Embroidery Machine</option> 
     <option id="op2">Buy Embroidery Machine</option> 
    </select> 
</div> 
</form> 
<form id="formop1" class="myform"> 
    <span>Hi i am form1</span> 
</form> 

<form id="formop2" class="myform"> 
    <span>Hi i am form2</span> 
</form>

CSS

.myform{ 
    display:none; 
}

$(document).ready(function(){ 
    $('#myselect').change(function(){ 
    var id=$('#myselect option:selected').attr('id'); 

    var formid="#form"+id; 

    $('.myform').hide(); 
    $(formid).show(); 


}); 
    });

Что я сделал здесь дается ваши субформы общего класса MyForm; class="myform" и установите его свойство CSS в display:none, а затем с помощью JS я использовал функцию изменения для выбора опции и получил идентификатор опций под выборкой. Как вы можете видеть, идентификатор опции равен id="op1", а идентификатор формы, связанной с этой опцией, - id="formop1". Поэтому в основном то, что я пытаюсь сделать здесь просто сцепить идентификаторы и показывают соответствующие формы .... Вот скрипка с предупреждениями для справки ... DEMO

Примечания: Это работает для п числа опций & FORMS

источник

2014-11-22 11:33:00 Vicky

Попробуйте эти. Я не вижу ur css или 2 формы на скрипке, поэтому давая короткий ответ:

$("#What").change(function() { 

     var selectedId=$('#What option:selected').attr('id'); 

      if(selectedId == 'opt1') 
      { 
       $("#form2").hide(); 
       $("#form1").show(); 
       // You can add all ur css stuff here 
      } 
     else{ 
      $("#form1").hide(); 
      $("#form2").show(); 
      // add ur csss stuff here 
     } 

    });

источник

2014-11-22 11:47:54

как показать и скрыть формы, выбрав опцию с помощью jquery

Fiddle

ответ

Смежные вопросы