两个HTML表单和一个提交（一个表单包含动态字段）

Question

Well, I have seen a lot of answers to questions like "Submit two forms with one button" and similar, but never to my specific doubt.

I've spent two days around this, testing different solutions and this is what I have:

First form is a dynamic form, generated automatically through information inside one column only from my MySQL db, so then I explode in PHP and separate the fields to build the form.

So far so good!

Then in javascript I have this script that will get all options selected and/or writen (depending on input type) by user and will POST a var.

And again, so far so good!

But then I have the second form (let's say it has "static fields") and I want those to go on POST as well.

I am facing two dilemmas here:

1 - Should I really separate this into two forms and try to submit them one at a time in order to store the first one in a var (session var maybe?)

2 - Should I simply put it everything inside one form and try to submit it all at once? (I have tried this and with my actual JavaScript it won't work, I will have to modify it but problem is... I don't know how, but I guess this would be the best solution.)

And now enough "talking" and let's see some code.

These are the dynamic fields (code isn't complete here, it's only for you to have an idea, because this code alone is working):

$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> 

Then we have here the JavaScript that will be called after submitting:

$(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);
}); });

ANY help will be MUCH appreciated, that's all I can say! :)

PS: It's important to mention that I have a lot of PHP conditions that must be done after submition (independently of being one or two forms). Those conditions are inside same file and will do different things depending on options selected, so I really don't want to go out of this file without those conditions being checked.

Answer 1

You can't submit two forms synchronosly so what I suggest is using Ajax so you can submit the first form with ajax then in the success function you can submit the second one.

$.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" );
         });
      });

Or you can send both of the forms in only one ajax request, to do so you just have to concat the serialization of the two forms :

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