两个HTML表单和一个提交(一个表单包含动态字段)

时间:2015-04-02 03:25:44

标签: javascript php jquery html forms

好吧,我已经看到很多问题的答案,例如“用一个按钮提交两个表格”等类似的问题,但从来没有对我的具体怀疑。

我花了两天时间来测试不同的解决方案,这就是我所拥有的:

第一个表单是一个动态表单,只通过我的MySQL数据库中的一列内的信息自动生成,然后我在PHP中爆炸并分离字段以构建表单。

到目前为止一切顺利!

然后在javascript中我有这个脚本,它将获得用户选择和/或写入的所有选项(取决于输入类型)并将POST一个var。

再次,到目前为止一切顺利!

但后来我有第二种形式(假设它有“静态字段”),我希望那些也可以用于POST。

我在这里遇到两个困境:

1 - 我是否应该将它分成两种形式并尝试一次提交一个以便将第一个存储在var中(会话var可能?)

2 - 我应该简单地将所有内容放在一个表单中并尝试一次性提交吗? (我已经尝试了这个,并且用我的实际JavaScript它将无法工作,我将不得不修改它,但问题是......我不知道如何,但我想这将是最好的解决方案。)

现在已经足够“说话”,让我们看一些代码。

这些是动态字段(代码在这里不完整,只有你有想法,因为这个代码单独工作):

$types = explode(",",$row["field_type"]);
$values = explode("|",$row["field_values"]);
$count =1;
$c = 1;
if($types[0]!=""){
foreach($types as $type){

$value = explode("^",$values[$c-1]); ?> <div class="fields" data-count="<?=$count?>" data-type="<?=$type?>"> <span id="label<?=$count?>" class="labels"><?=$value[0]?></span>
<span <?php if($type=="select") { ?> class="styled quotoesDiv" <?php } ?>>
    <?php if($type=="text"){ ?>
        <input name="input<?=$count?>" type="text" id="input<?=$count?>" required value="" class="details"> 
    <?php }else if($type=="textbox"){ ?>
        <textarea style="  width: 450px;height: 150px;" name="input<?=$count?>" id="input<?=$count?>"></textarea>
    <?php }else if($type=="select"){ $options = explode(",",$value[1]); ?>
        <select name="input<?=$count?>" id="input<?=$count?>" class="qt-li">
            <?php foreach($options as $option){ ?>
                <option value="<?=$option?>"><?=$option?></option>
            <?php } ?>
        </select>
    <?php }else if($type=="combo"){ $options = explode(",",$value[1]); ?>
        <select multiple name="input<?=$count?>" id="input<?=$count?>" class="qt-li combo">
            <?php foreach($options as $option){ ?>
                <option value="<?=$option?>"><?=$option?></option>
            <?php } ?>
        </select>
     <?php }else if($type=="checkbox"){ $options = explode(",",$value[1]); ?>
        <?php foreach($options as $option){ ?>
            <input type="checkbox" name="input<?=$count?>" id="input<?=$count?>" value="<?=$option?>"> <?=$option?>
        <?php $count++; } ?>

    <?php $count--; }else if($type=="radio"){ $options = explode(",",$value[1]); ?>
        <?php foreach($options as $option){ ?>
            <input type="radio" name="input<?=$count?>" id="input<?=$count?>" value="<?=$option?>"> <?=$option?>
        <?php  } ?>

    <?php } ?>
</span> 

  

然后我们在这里提交将在提交后调用的JavaScript:

$(document).ready(function(e) {
$("#request_form").on("submit",function(e){
    //e.preventDefault();
    var count = $(".fields:last").data("count");
    var values = "";
    for(i=1;i<=count;i++){
        var type = $("#label"+i).closest(".fields").data("type");
        if(type=="checkbox"){
            values += $("#label"+i).html()+"__";
            var number_of_checkboxes = ($("#input"+i).closest("span").find("input").length)-1;
            $("#input"+i).closest("span").find("input").each(function(index, element) {
                if($(this).is(":checked")){
                    values += $(this).val()+",";
                }
            });
            values = values.substr(0,values.length-1);
            values += "^^"; 
            i = i-(-number_of_checkboxes);
        }else if(type=="radio"){
            values += $("#label"+i).html()+"__"+$('input[name="input'+i+'"]:checked').val()+"^^";

        }else{
            values += $("#label"+i).html()+"__"+$("#input"+i).val()+"^^";
        }
    }
    values = values.substr(0,values.length-2);

    $("#need_request").val(values);
    console.log(values);
}); });

任何帮助都会受到很多赞赏,这就是我所能说的! :)

PS:重要的是要提到我有很多PHP条件必须在submition之后完成(独立于一个或两个表单)。这些条件在同一个文件中,根据所选的选项会做不同的事情,所以我真的不想在没有检查这些条件的情况下退出这个文件。

1 个答案:

答案 0 :(得分:0)

你不能同步提交两个表单,所以我建议使用Ajax,这样你就可以使用ajax提交第一个表单,然后在成功函数中提交第二个表单。

$.ajax({
      method: "POST",
      url: "action.php",
      data: $("#form1").serialize()
    })
      .done(function( msg ) {
        alert( "Form 1 submitted" );
        $.ajax({
             method: "POST",
             url: "action.php",
             data: $("#form2").serialize()
         })
        .done(function( msg ) {
              alert( "Form 2 submitted" );
         });
      });

或者你可以只在一个ajax请求中发送这两个表单,为此你只需要连续两个表单的序列化:

$.ajax({
  method: "POST",
  url: "action.php",
  data: $("#form1").serialize()+"&"+$("#form2").serialize()
})
  .done(function( msg ) {
    alert( "Data Saved: " + msg );
  });