フォームAが複数のフィールドを持つ場合、それを考慮してフォームBにデータを送信するHTML

2024年6月25日

フォームAが複数のフィールドを持つ場合、それを考慮してフォームBにデータを送信するHTMLを以下に示します。

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Two Forms with Multiple Fields</title>
</head>
<body>

<!-- フォームA -->
<form method="post" action="{% url 'form_a_submit_url' %}">
    {% csrf_token %}
    <label for="field_a1">Field A1:</label>
    <input type="text" id="field_a1" name="field_a1">

    <label for="field_a2">Field A2:</label>
    <input type="text" id="field_a2" name="field_a2">

    <!-- 他のフォームAのフィールドも同様に追加 -->

    <button type="submit">Submit Form A</button>
</form>

<!-- フォームB -->
<form method="post" action="{% url 'form_b_submit_url' %}">
    {% csrf_token %}

    <!-- フォームAの各フィールドを隠しフィールドとして持つ -->
    <input type="hidden" name="field_a1" value="{% if request.method == 'POST' %}{{ request.POST.field_a1 }}{% endif %}">
    <input type="hidden" name="field_a2" value="{% if request.method == 'POST' %}{{ request.POST.field_a2 }}{% endif %}">

    <!-- 他のフォームAのフィールドも同様に追加 -->

    <!-- フォームB独自のデータ -->
    <label for="field_b1">Field B1:</label>
    <input type="text" id="field_b1" name="field_b1">

    <label for="field_b2">Field B2:</label>
    <input type="text" id="field_b2" name="field_b2">

    <!-- 他のフォームBのフィールドも同様に追加 -->

    <button type="submit">Submit Form B</button>
</form>

</body>
</html>

この例では、フォームAがfield_a1、field_a2などの複数のフィールドを持っており、それらのフィールドのデータをフォームBに隠しフィールドとして渡しています。同様に、フォームBは独自のフィールド（field_b1、field_b2など）を持ちます。必要に応じて、他のフォームAのフィールドやフォームBのフィールドも同様に追加できます。

未分類

Posted by ぼっち