2 个表单的 1 个按钮，其中一个表单是 <select>答案

【问题标题】：1 button for 2 forms where one of the forms is a <select>2 个表单的 1 个按钮，其中一个表单是 <select>
【发布时间】：2021-05-24 15:01:52
【问题描述】：

我有 2 个表格，其中一个表格是可以显示 2 个隐藏 div 的选择。选择一个选项时，应将值发送到数据库。

现在第二种形式是按钮所在的位置。当按下这个按钮时，它应该提交两个表单。我已经尝试了一些东西，但它们似乎不起作用。有人有想法吗？

第一个“主”形式：

<form class="areaType" id="formSelect" action="saveData.php" method="POST">
    <p>Are you a student showcasing a project or a school institution looking to collaborate?</p>
    <select id="textAreaType" onchange="chooseType(this)" name="type">
        <option value="0" selected></option>
        <option value="1">Student project</option>
        <option value="2">School institution project</option>
    </select>
</form>

第二种（隐藏）形式：

<form class="textAreas" id="formSchool" action="saveData.php" method="POST">
        <div class="fieldsForSquare">
            <p>Fill in these fields for your square</p>
        </div>
        <div class="areaTitle">
            <p>Title</p>
            <textarea type="text" id="textAreaTitle" name="summary" required></textarea>
        </div>
        <div class="areaDescription">
            <p>Short description</p>
            <textarea maxlength="200" type="text" id="textAreaDescription" name="shortSummary" required></textarea>
        </div>
        <div class="areaPersons">
            <p>How many people are you looking for and how big is the team going to be?</p>
            <input type="number" maxlength="2"
                oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
                id="textAreaPersons" required>
            <input type="number" maxlength="2"
                oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
                id="textAreaPersons2" required>
        </div>
        <div class="areaHours">
            <p>Is it fulltime or parttime?</p>
            <select id="textAreaHours" required>
                <option value="0" selected></option>
                <option value="1">Fulltime</option>
                <option value="2">Parttime</option>
            </select>
        </div>
        <div class="fieldsForPage">
            <p>Fill in these fields for your page</p>
        </div>
        <div class="areaAbout">
            <p>What is it about?</p>
            <textarea type="text" id="textAreaAbout" required></textarea>
        </div>
        <div class="areaLookingFor">
            <p>What/who are you looking for?</p>
            <textarea type="text" id="textAreaLookingFor" required></textarea>
        </div>
        <div class="areaCollab">
            <p>U wish to add other accounts to this project?</p>
            <textarea type="text" id="textAreaCollab"></textarea>
        </div>
        <div class="areaImg">
            <p>Add some images of the product/project.</p>
            <input id='files' type='file' multiple />
            <output id='result' />
        </div>
        <div class="submitButton">
            <input type="submit" value="submit" onclick="submitForms()">
        </div>
    </form>

第三种（隐藏）形式：

<form class="textAreas" id="formStudent" action="saveData.php" method="POST">
        <div class="fieldsForSquare">
            <p>Fill in these fields for your square</p>
        </div>
        <div class="areaTitle">
            <p>Title</p>
            <textarea type="text" id="textAreaTitleStudent" name="summary" required></textarea>
        </div>
        <div class="areaDescription">
            <p>Short description</p>
            <textarea maxlength="200" type="text" id="textAreaDescriptionStudent" name="shortSummary"
                required></textarea>
        </div>
        <div class="fieldsForPage">
            <p>Fill in these fields for your page</p>
        </div>
        <div class="areaAbout">
            <p>What is it about?</p>
            <textarea type="text" id="textAreaAbout" required></textarea>
        </div>
        <div class="areaCollab">
            <p>U wish to add other accounts to this project?</p>
            <textarea type="text" id="textAreaCollab"></textarea>
        </div>
        <div class="areaImg">
            <p>Add some images of the product/project.</p>
            <input id='files' type='file' multiple />
            <output id='result' />
        </div>
        <div class="submitButton">
            <input type="submit" value="submit" onclick="submitForms_()">
        </div>
    </form>

根据选择的值提交表单的 Javascript 代码：

    function submitForms() {
    document.getElementById('formSelect').submit();
    document.getElementById('formSchool').submit();
}

function submitForms_() {
    document.getElementById('formSelect').submit();
    document.getElementById('formStudent').submit();
}

PHP 代码首先检查一个选项是否被选中，然后（应该）插入它：

    <?php 
    include('../general.config.php');

    print_r($_POST);
    $summary = $_POST['summary']; 
    $shortSummary = $_POST['shortSummary']; 
    $type = $_POST['type']; 
    
    if(isset($type)){
        $query = $db->prepare("INSERT INTO `project`( `type`, `short_summary`, `summary`) VALUES (?, ?, ?)");

        $query->bindPARAM(1,$type, PDO::PARAM_INT);
        $query->bindPARAM(2,$shortSummary, PDO::PARAM_STR);
        $query->bindPARAM(3,$summary, PDO::PARAM_STR);

        if($query->execute())
        echo "succes!";
    else
        echo "NO SUCCES!";
    }
?>

chooseType() 函数：

function chooseType(select) {
    if (select.value == 1) {
        document.getElementById('mainAddProjectStudentID').style.display = 'block'
        document.getElementById('mainAddProjectSchoolID').style.display = 'none'
    } else if (select.value == 2) {
        document.getElementById('mainAddProjectSchoolID').style.display = 'block'
        document.getElementById('mainAddProjectStudentID').style.display = 'none'
    } else if (select.value == 0) {
        document.getElementById('mainAddProjectSchoolID').style.display = 'none'
        document.getElementById('mainAddProjectStudentID').style.display = 'none'
    }
}

未选择任何选项时：

选择其中一个选项时：

【问题讨论】：

一开始为什么要三个表格？
提示：你只能有一个表格。当输入字段不显示时，添加禁用属性，您将看到它们的值永远不会被发布
查看编辑，这就是我有 3 个表单的原因
哪两种形式？带有select 的那个和在select 中选择选项后显示的那个？对吗？
您一次只能提交一份表格。提交表单会重新加载页面，这会停止第二次提交。

标签： javascript php forms

【解决方案1】：

首先你不能用一个提交按钮提交两个表单，除非你使用ajax。这也不是处理这种情况的最佳方式。

我将分两部分回答这个问题。您拥有三个表单并且能够从这两个表单发送数据，然后是一种更好的方法来执行此操作。

您的选择选项具有代表任何一种形式的静态值。您可以简单地添加一个隐藏的 input 字段，让您的表单数据包含正确的类型。

<!-- Hidden Input Tag for the formStudent form-->
<input type="hidden" name="type" id="studentType" value="1">

<!-- Hidden Input Tag for the formSchool form-->
<input type="hidden" name="type" id="schoolType" value="2">

现在，当任一表单提交时，您的目标是正确填充 type 变量。

这样做的正确和更简单的方法之一是只使用一种形式而不是三种形式。您可以使用 select 标签切换表单的显示，就像您已经在做的那样。为您的字段使用唯一名称，并在您的 php 脚本中使用 $type 变量有条件地填充变量 $summary、$shortSummary 和 $type。

演示（仅添加基本元素）

<form action="saveData.php" method="POST">
    <select id="textAreaType" onchange="chooseType(this)" name="type">
        <option value="0" selected></option>
        <option value="1">Student project</option>
        <option value="2">School institution project</option>
    </select>
    <!-- Student Form> -->
    <div id="mainAddProjectStudentID" style="display:none;">
        <textarea type="text" id="textAreaTitleStudent" name="studentSummary" required></textarea>
        <textarea maxlength="200" type="text" id="textAreaDescriptionStudent" name="studentShortSummary" required></textarea>
    </div>
    
    <!-- School Form -->
    <div id="mainAddProjectSchoolID" style="display:none;">
        <textarea type="text" id="textAreaTitleStudent" name="schoolSummary" required></textarea>
        <textarea maxlength="200" type="text" id="textAreaDescriptionStudent" name="schoolShortSummary" required></textarea>
    </div>
    
    <!-- Submit Button -->
    <input type="submit" value="submit">
    
</form>

而你的php读取数据会是


if(!empty($_POST['type']) && ($_POST['type'] == 1 || $_POST['type'] ==2 )){
    $type = $_POST['type']; 
    $summary = ($type == 1)? $_POST['studentSummary'] : $_POST['schoolSummary']; 
    $shortSummary = ($type ==1)? $_POST['studentShortSummary'] : $_POST['schoolShortSummary']; 
}

这只是一种方法，可能有很多。

【讨论】：