Question

我有一个PHP表单，其中包含不同类型的输入字段（文本框，收音机，复选框，..），我使用了jQuery。它适用于所有输入类型，除了我的表单中的一个问题，用户选择的项目（电影）存储在一个数组中。我认为图像可以比我更好地解释：

enter image description here

从图像中可以看出，用户选择的电影被移动到所选列表（数组），而在jQuery验证中，输入名称是＆＃34;必需＆＃34;因此，在这种情况下，只有插入文本框的值（在这种情况下：＆＃34;冻结＆＃34;）将存储在数据库中。

这是代码：

<form id="form2" action="page3.php" method="post">

<fieldset id = "q27"> <legend class="Q27"></legend>
<label class="question"> What are your favourite movies?<span>*</span></label>
<div class="fieldset content"> 
<p>
<div class="movienames">    
 <div class="field">
      <Input type = 'radio' id="selectType" Name ='source' value= 'byTitle'>By title
      <Input type = 'radio' id="selectType" Name ='source' value= 'byActor'>By actor
      <Input type = 'radio' id="selectType" Name ='source' value= 'byDirector'>By director
 </div>

 <div id="m_scents" class="field">
   <label style="margin-bottom:10px;" for="m_scnts"></label>
    <p>
     <input class="autofill4" type="textbox" name= "q27[]" id="q" placeholder="Enter movie, actor or director name here" />
     <input type="button" value="search" id="btnSearch" />
    </p>
 <div>    
</div>

 <div id="basket">
   <div id="basket_left">
       <h4>Selected Movies</h4>
       <img id="basket_img" src="http://brettrutecky.com/wp-content/uploads/2014/08/11.png" />
   </div>
   <div id="basket_right">
       <div id="basket_content">
          <span style="font-style:italic">Your list is empty</span>
       </div>
   </div>
</div>        
</p>
</div>
</fieldset>

<script type="text/javascript">    
var master_basket = new Array();
selectedMovies = {};
var selected;
var selectedVal;
var selectedDir;        
$(document).ready(function () {
      $("input[id='selectType']").change(function(){
               $("#q").val('');
               if ($(this).val() == "byTitle") {
                   //SOME LINES OF CODE....
                     .....
                } else     
                  if ($(this).val() == "byActor"){
                    // SOME LINES OF CODE

                } else 
                  if ($(this).val() == "byDirector"){  
                  //SOME LINES OF CODE
                }             
           }); 

$('#btnSearch').on('click', function (e) {           
           window.textbox = $('#q').val();
           window.searchType = $('input:radio[name=source]:checked').val();

           popupCenter("movielist.php","_blank","400","400");
  });    

});     

    function addToBasket(item) {
       master_basket.push(item);
       showBasketObjects();
    }

    function showBasketObjects() {
       $("#basket_content").empty();
       $.each(master_basket, function(k,v) {
             var name_and_year = v.movie_name;          

             $("#basket_content").append("<div class='item_list'>" + v.movie_name + "<a class='remove_link' href='" + name_and_year + "'><img width='20' src='http://i61.tinypic.com/4n9tt.png'></a></div>");
       });
 }
 </script>

 // CODE RELATED TO OTHER QUESTIONS IN THE FORM....
 //......... 
 <input class="mainForm" type="submit" name="continue" value="Save and Continue" />  

 </form>

<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>
<script>
 $(document).ready(function() {
   $('#form2').validate({       
        rules: {
           "q27[]": {
                required: true,
            },
           //OTHER REQUIRED QUESTIONS....
        },
               errorPlacement: function(error, element) {      
           if (element.attr("type") == "radio" || element.attr("type") == "checkbox" || element.attr("name") == "q12[]") {
              error.insertAfter($(element).parents('div').prev($('question')));
           } else {
             error.insertAfter(element);             
        }
       }

    }); 
});
</script>

问题：

我的代码有两个问题：

当我点击＆＃34;保存并继续＆＃34;按钮提交此页面形式，对于上述问题（你可以在中看到的那个） image），只存储在文本框中插入的值数据库，而我需要存储列表中所有选定的电影在DB中的单独行中。
此问题的文本框是隐藏字段仅当用户选择其中一个单选按钮值时才会出现。因此，如果用户只是忽略这个问题并且没有选择一个无线电按钮值，然后他可以简单地提交此页面并继续没有任何错误信息。

我想知道是否有一种方法可以自定义jQuery验证，这样我就不会让用户提交此页面，直到他们没有回答上述问题？然后，我怎么能用户在“数据库”中存储所选项目而不是文本框值？

所有想法都将受到高度赞赏，

Answer 1

要提交购物篮电影项目，您可以添加隐藏的输入字段。你会得到这样的东西：

$("#basket_content").append("<div class='item_list'>" + v.movie_name + "<a class='remove_link' href='" + name_and_year + "'><img width='20' src='http://i61.tinypic.com/4n9tt.png'></a></div>");
$("#basket_content").append("<div type='hidden' name='basket_movie[]' value='"+v.movie_name+"' />");

使用此功能，会有一个像$_POST['basket_movie']这样的数组，其中包含购物篮中电影的电影名称。

如果您想阻止提交，当未填写输入框时，您只需在表单提交上添加一个动作监听器并计算item_list项。如果它为0则不提交。添加这样的内容以防止在没有项目添加到购物篮时提交表单：

    $(document).on('submit', '#form2',function(e)
    {
        if($('.item_list').length == 0)
        {
            e.preventDefault();
        }
    });

自定义php表单验证

问题：

1 个答案: