使用表单中的按钮将变量附加到具有来自其他表单的变量的 url

Question

我有一个带有搜索栏和一些复选框的网站，这些将变量添加到 url：

term = "test"
variable1=1
url/search?term=test&variable1=1

然后，在搜索完成后，我在页面左侧有另一个表单，其中包含一些其他复选框和另一个搜索按钮。我希望该按钮在单击时使用旧的搜索词和变量运行另一个搜索，但添加了新的搜索

othervariable=1
url/search?term=test&variable1=1&othervariable=1

我尝试了其他线程的一些建议，但第二个搜索按钮似乎只将变量添加到 url

url/othervariable=1

这不起作用

第一种形式：

    <form id="search_form" method="get" name="search">
      <div class="input-group row" style="width: 40vw ">
        {% if termo %}
          <input style="border-radius: 0; background-color: rgba(255,255,255,0.8);" type="text" maxlength="1800" id="input_text" name="termo_busca" class="form-control" value="{{ termo }}"/>
        {% else %}
          <input style="border-radius: 0; background-color: rgba(255,255,255,0.8);" type="text" name="termo_busca" class="form-control" placeholder="Digite o termo que deseja pesquisar"/>
        {% endif %}
        <div class="input-group-btn">
          <button style="background-color: #4A9FFF; border-color: #4A9FFF; cursor: pointer; border-radius: 0; padding: 0.85rem 1.05rem; font-size: 1.5rem; line-height: 1.25;" onclick="changeFlag()" type="submit" class="btn btn-primary btn-md" value="Buscar"> 
            <i class="fa fa-search"></i>
          </button>
        </div>
      </div>
      <div class="input-group row" style="width: 44vw">
        <!-- <label style="font-size: 12px;">Cortes :</label> -->
        <label class="checkbox-inline" style="font-size: 11px; background-color: rgba(255,255,255,0.0);">
          <input type="checkbox" name="recursal" value="1" {% if "recursal" in courts %} checked {% else %} {% endif %}> Recursal
        </label>

        <label class="checkbox-inline" style="font-size: 11px; background-color: rgba(255,255,255,0.0);">
          <input type="checkbox"  name="constitucional" value="1" {% if "constitucional" in courts %} checked {% else %} {% endif %} > Constitucional
        </label>

        <label class="checkbox-inline" style="font-size: 11px; background-color: rgba(255,255,255,0.0);">
          <input type="checkbox" name="reclamacao" value="1" {% if "reclamacao" in courts %} checked {% else %} {% endif %} > Reclamacao
        </label>

        <label class="checkbox-inline" style="font-size: 11px; background-color: rgba(255,255,255,0.0);">
          <input type="checkbox" name="habeas_corpus" value="1" {% if "habeas_corpus" in courts %} checked {% else %} {% endif %} > Habeas Corpus
        </label>

        <label class="checkbox-inline" style="font-size: 11px; background-color: rgba(255,255,255,0.0);">
          <input type="checkbox" name="mandado_seguranca" value="1" {% if "mandado_seguranca" in courts %} checked {% else %} {% endif %} > Mandado Seguranca
        </label>

        <label class="checkbox-inline" style="font-size: 11px; background-color: rgba(255,255,255,0.0);">
          <input type="checkbox" name="penal_original" value="1" {% if "penal_original" in courts %} checked {% else %} {% endif %} > Penal Original
        </label>

        <label class="checkbox-inline" style="font-size: 11px; background-color: rgba(255,255,255,0.0);">
          <input type="checkbox" name="outros" value="1" {% if "outros" in courts %} checked {% else %} {% endif %} > Outros
        </label>

        <!-- <label class="checkbox-inline" style="font-size: 11px; background-color: rgba(255,255,255,0.0);">
          <input type="checkbox" name="todos" value="1" {% if todos == None %} {% else %} checked {% endif %} checked> Todos
        </label> -->

      </div>

      {% if total %}
      <strong style="font-size: 13px;"></strong>
      {% elif termo %}
        <strong style="font-size: 13px;">Não foram encontradas decisões relacionadas ao termo {{ termo }}.</strong> <br/><br/>
      {% endif %}
    </form>

第二种形式：

        <form id="diogo_form" method="get" name="search" ; background-color: rgba(255,255,255,0.0);">
          <div class="dropdown" data-control="checkbox-dropdown">
              <label class="dropdown-option">
                <input type="checkbox" name="selecone" value="1" {% if "selecone" in decision_results %} checked {% else %} {% endif %}/>
                selecone
              </label>

              <label class="dropdown-option">
                <input type="checkbox" name="Selection Two" value="1" {% if "Selection Two" in decision_results %} checked {% else %} {% endif %}/>
                Selection Two
              </label>

              <label class="dropdown-option">
                <input type="checkbox" name="Selection Three" value="1" {% if "Selection Three" in decision_results %} checked {% else %} {% endif %}/>
                Selection Three
              </label>

              <label class="dropdown-option">
                <input type="checkbox" name="Selection Four" value="1" {% if "Selection Four" in decision_results %} checked {% else %} {% endif %}/>
                Selection Four
              </label>

              <label class="dropdown-option">
                <input type="checkbox" name="Selection Five" value="1" {% if "Selection Five" in decision_results %} checked {% else %} {% endif %}/>
                Selection Five
              </label>     
          </div>
          <div class="input-group-btn">
            <button style="background-color: #4A9FFF; border-color: #4A9FFF; cursor: pointer; border-radius: 0; padding: 0.85rem 1.05rem; font-size: 1.5rem; line-height: 1.25;" onclick="changeFlag()" type="submit" class="btn btn-primary btn-md" value="Buscar"> 
              <i class="fa fa-search"></i>
            </button>
          </div>
        </form>

Answer 1

表单只会提交属于它的字段（即在<form> 内）。如果您想使用添加的新表单输入重复搜索，您可以添加一个 <input type="hidden"> 和从 GET 请求获得的 value 到侧面表单（第二个）。

假设您从 URL 中获取了termo_busca，那么您可以添加：

<input type="hidden" value="{{termo}}" name="termo_busca" />

到你的第二种形式。以此类推，对于您要重复的其他搜索参数。

您应该只为要在第二次搜索原样中重复的每个参数添加一个<input type="hidden">（即用户不会修改它）。

如果您希望用户能够在diogo_form 中修改它，那么您应该使用正确的类型添加对应的input（例如checkbox）。

因此，如果您想在第二个表单中重复recursal 复选框，您可以从第一个表单中添加这一行：

<input type="checkbox" name="recursal" value="1" {% if "recursal" in params %} checked {% endif %}> Recursal

请注意，您将在 GET 参数中检查 recursal。

另外，请注意我删除了 {% else %}，因为它在那里没有做任何事情。

---

更新：

就像我说的，form 只会提交它包含的值。如果您不想重复复选框，那么您需要一个 javascript 解决方案，该解决方案将在提交时将这些值“添加”到您的第二个表单或镜像它们。

这是一个使用 jQuery 并在提交之前添加它们的解决方案：

$('#diogo_form').on('submit', function(e) {
    e.preventDefault();

    let recursal_val = $('#search_form input[name="recursal"]').is(':checked') ? 1 : 0;
    $('#diogo_form').append(`<input type="hidden" name="recursal" value="${recursal_val}" />`);

    // ... do the same for all other values you want to copy
    // you could potentially also copy them all if you want them all
    // $('#search_form input[type="checkbox"]').each(function(i, e) {
    //   let name = $(e).attr('name');
    //   let checked = $(e).is(':checked');
    //   if(checked) {
    //     // add to diogo_form (see above)
    //   }
    // });

    $('#diogo_form').submit();
});