如何使用复选框显示表单的更多选项并更改表单的操作属性

How to use a checkbox to show more options of a form and change the action attribute of the form?

本文关键字：表单 操作 属性 选项 复选框 何使用 显示      更新时间：2023-09-26

嗨，我正在创建一个具有搜索房间表单的网站。我想让它成为一个复选框，当点击时，显示新的选项并更改表单的action="属性。

<form class="form-horizontal" action="reservation?action=listRooms" method="POST">
    <label for="">Date </label>
    <div class="datepicker ll-skin-nigran hasDatepicker">
        <input class="form-control" type="text" placeholder="14/03/2016" name="dateReservation" id="date" required="required"/>
    </div>
    <br />
    <div>
    <input type="checkbox" name="choice-for" id="choice-form">
    <label for="choice-for">Show More Options.</label>
    <div class="reveal-if-active">
    <label for="">Slots</label>
    <select name="slot" name ="slot" id="slot" >
        <option value="">Choose a slot </option>
        <option value="8h-9h30">8h00-9h30</option>
        <option value="9h30-11h">9h30-11h00</option>
        <option value="11h-12h30h">11h00-12h30h</option>
        <option value="12h30-14h">12h30-14h00</option>
        <option value="14h-15h30">14h00-15h30</option>
        <option value="15h30-17h">15h30-17h00</option>
        <option value="17h-18h30">17h00-18h30</option>
    </select>
    <br />
    <label for="">Display Screens</label>
    <input class="form-control" type="text" placeholder=" 26 pouces" name="screen" id="screen" />
    <br />
    <label for="">CPU</label>
    <input class="form-control" type="text" placeholder="Intel Core i5 " name="processor" id="processor" />
    <br />
    <label for="">RAM</label>
    <input class="form-control" type="text" placeholder=" 2Go de RAM ?" name="ram" id="ram" />
    <br />
    <input type="submit" value="Réserver" class="btn btn-primary" />
    </div>

然后我尝试使用javascript（JQuery）脚本来满足我的期望：

<script>
    $(function() {
        $( "#date" ).datepicker({ dateFormat: 'dd/mm/yy' });
    });
    $("#choice-form").change(function() {
      //there i need to know when the checkbox is changed dynamically so the attribute can change too.
      $("#form-horizontal).attr("reservation?action=listRooms");
    });
    var FormStuff = {
    init: function() {
        this.applyConditionalRequired();
        this.bindUIActions();
     },
      bindUIActions: function() {
        $("input[type='radio'], input[type='checkbox']").on("change", this.applyConditionalRequired);
      },
      applyConditionalRequired: function() {
        $(".require-if-active").each(function() {
          var el = $(this);
          if ($(el.data("require-pair")).is(":checked")) {
            el.prop("required", true);
          } else {
            el.prop("required", false);
          }
        });
      }
    };
    FormStuff.init();
</script>

试试这个：

$("#choice-form").change(function() {
  // If checkbox checked
  if ( $('#choice-form').is(':checked') ) {
     // Set new form action
     $('#form-horizontal').attr('action', 'reservation?action=listRooms');
     // Reveal additional options
     $('.reveal-if-active').show(); // or call .css() with appropriate options
  }
});

好的，假设您想将id（也可以使用名称）和值添加到表单中的操作参数…

$(document).on('click','.checkboxClass',function(){
  var id = $(this).attr('id');
  var val = $(this).val();
  var selectedVal = '&'+id+'='+val;
  var methodUrl = $('form.form-horizontal').attr('action');
  if($(this).is(':checked')){
    methodUrl+= selectedVal;
  }
  else{
    methodUrl = methodUrl.replace(selectedVal,'');
  }
  $('form.form-horizontal').attr({'action':methodUrl});
});

现在假设您有一个id="myId"和value="myValue"的复选框，如果您选中它，则操作参数将变为action="reservation?action=listRooms&myId=myValue"

这是你要的吗？

相关文章：