修改 Jquery 以接受多个查询而不是一个查询

Question

目前在我的系统中，我可以从下拉框中选择一个选项，然后此选项显示用户可以输入/选择信息的输入框。然后将此信息发送到数据库并返回信息。我需要修改它，以便在一个页面上显示其中的 3 或 4 个选项，而不是下拉框，按下一个按钮，如果选择了任何选项，则每个单独的查询都会发送到数据库。例如，如果他们选择性 M/F 和订阅 Y/N 2，则会发送和返回单独的查询。

这是我目前拥有的示例文本 - 这非常有效;

爪哇脚本;

window.onunload = refreshParent;
    function refreshParent() {
        window.opener.location.reload();
    }
$body = $("body");
$(document).on({
    ajaxStart: function() { $body.addClass("loading");    },
    ajaxStop: function() { $body.removeClass("loading"); } 
});
$(document).ready(function() {
// Variable to hold request
var request;
$(".chosen-select").chosen({width: '300px'});
//$("#distance_slider").slider({});
// Bind to the submit event of our form
$("#criteria").submit(function(event){
    // Prevent default posting of form - put here to work in case of errors
    event.preventDefault();
    // Abort any pending request
    if (request) {
        request.abort();
    }
    // setup some local variables
    var $form = $(this);
    //$("#isajax").val("1");    
    // Let's select and cache all the fields
    var $inputs = $form.find("input, select, button, textarea");
    // Serialize the data in the form
    var serializedData = $form.serialize();
    // Let's disable the inputs for the duration of the Ajax request.
    // Note: we disable elements AFTER the form data has been serialized.
    // Disabled form elements will not be serialized.
    $inputs.prop("disabled", true);
    // Fire off the request to /form.php
    request = $.ajax({
          url: "index.php?module=Prospects&action=PopupContactsCriteria&html=Popup_Contacts_Criteria_picker&form=ContactsForm&record={RECORD_VALUE}&first_run=1&form_submit=true&query=true&sugar_body_only=1",
        type: "post",
        data: serializedData
    });
    // Callback handler that will be called on success
    request.done(function (response, textStatus, jqXHR){
        // Log a message to the console
        //console.log("Hooray, it worked!");
        //console.log(response);
        document.open();
        document.write(response);
        document.close();
    });
    // Callback handler that will be called on failure
    request.fail(function (jqXHR, textStatus, errorThrown){
        // Log the error to the console
        console.error(
            "The following error occurred: "+
            textStatus, errorThrown
        );
    });
    // Callback handler that will be called regardless
    // if the request failed or succeeded
    request.always(function () {
        // Reenable the inputs
        $inputs.prop("disabled", false);
    });
});

HTML - 缺少表的结尾，只是一段代码

<form id="criteria" name="criteria">
<table width="100%" border="0">
    <tr>
        <td>
            <table width="100%" name="criteria_search">
                <tr>
                    <td class="dataLabel" width="75%" align="left"><strong>Add Rule : &nbsp;&nbsp;</strong>
                        <select name="rule" id="rule" onChange="toggletdDisplay(this.form);"> 
                        <option value="email">Email</option>
                    <option value="sex">Sex</option>
                    <option value="account">Account</option>
                    <option value="mobile">Mobile</option>
                        </select>
                    </td>
                    <td align="right" name="buttonForm" id="buttonForm">
                    <input type="hidden" name="action" value="PopupContactsCriteria"/>
                    <input type="hidden" name="query" value="true"/>
                    <input type="hidden" name="record" value="{RECORD_VALUE}"/>
                    <input type="hidden" name="module" value="{MODULE_NAME}" />
                    <input type="hidden" name="form_submit" value="{FORM_SUBMIT}" />
                    <input type="hidden" name="sugar_body_only" value="1" />
                    <input type="hidden" name="form" value="{FORM}" />          
                    <input class="button" type="submit" name="addButton" id="addButton" value="  Add Selected  " disabled/>
                </td>   
                <td class="dataLabel" name="instructions" id="instructions" style="display: inline;padding: 50px;"> <p style="color:black;font-size:10px;"><br /> <i> </i> </td>
                <tr>
                    <td class="dataLabel" name="email" id="email" >Email Address Required?  Yes <input type="radio" name="email_c" value="true_ex" {EMAIL_TEX_CHECKED}>  No <input type="radio" name="email_c" value="false" {EMAIL_F_CHECKED}></td>
                </tr>
            <td class="dataLabel" name="sex" id="sex" style="display: none;" > <br /> Male  <input type="radio" name="sex_c" value="Male" {SEX_M_CHECKED}>  Female  <input type="radio" name="sex_c" value="Female" {SEX_F_CHECKED}></td>
            <td class="dataLabel" name="email" id="email" style="display: none;" >  <p><Strong>Email Address (Please additionally select Assigned Racecourse)</strong><p/>Has email address <input type="radio" name="email_c" value="true_ex" {EMAIL_TEX_CHECKED}>  <br /> No email address  <input type="radio" name="email_c" value="false" {EMAIL_F_CHECKED}></td>
            <td class="dataLabel" name="account" id="account" style="display: none;" >  <br />Has Account  <input type="radio" name="account_c" value="True" {ACCOUNT_T_CHECKED}>  No Account <input type="radio" name="account_c" value="False" {ACCOUNT_F_CHECKED}></td>
            <td class="dataLabel" name="awc" id="awc" style="display: none;" >  <br />AWC Newsletter Selected <input type="radio" name="awc_c" value="True"> AWC Newsletter Not Selected <input type="radio" name="awc_c" value="False"></td>

这就是我正在努力做的事情 - 我不知道如何编辑 Jquery 以接受多个输入，或者遍历查询并以相同的方式显示它们

使用 ArrayList 的新脚本

// Bind to the submit event of our form
$("#additional_criteria").submit(function(event){
    // Prevent default posting of form - put here to work in case of errors
    event.preventDefault();
    // Abort any pending request
    if (request) {
        request.abort();
    }
    // setup some local variables
    var $form = $(this);
    //$("#isajax").val("1");    
    // Let's select and cache all the fields
    var $inputs = $form.find("input, select, button, textarea");
    // Serialize the data in the form
    var serializedData = $form.serialize();
    // Let's disable the inputs for the duration of the Ajax request.
    // Note: we disable elements AFTER the form data has been serialized.
    // Disabled form elements will not be serialized.
    $inputs.prop("disabled", true);
    // Fire off the request to /form.php
    request = $.ajax({
          url: "index.php?module=Prospects&action=PopupContactsCriteria&html=Popup_Contacts_Criteria_picker&form=ContactsForm&record={RECORD_VALUE}&first_run=1&form_submit=true&query=true&sugar_body_only=1",
        type: "post",
        data: serializedData
    });
    // Callback handler that will be called on success
    request.done(function (response, textStatus, jqXHR){
        // Log a message to the console
        //console.log("Hooray, it worked!");
        //console.log(response);
        document.open();
        document.write(response);
        document.close();
    });
    // Callback handler that will be called on failure
    request.fail(function (jqXHR, textStatus, errorThrown){
        // Log the error to the console
        console.error(
            "The following error occurred: "+
            textStatus, errorThrown
        );
    });
    // Callback handler that will be called regardless
    // if the request failed or succeeded
    request.always(function () {
        // Reenable the inputs
        $inputs.prop("disabled", false);
    });
});

.HTML

<button onclick="myFunction()">Show Additional Rules (*Not Required)</button>
<div id="myDIV" hidden="true">
    <table cellpadding="0" cellspacing="0" border="0" width="100%" class="edit view">
        <tr>
        <td>
            <form id="additional_criteria" name="additional_criteria">
                <table width="100%" border="0" name="additional_criteria">
                    <tr>
                        <td><p><Strong> Additional Rules</strong><p/></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                <tr>
                    <td class="dataLabel" name="email" id="email" >Email Address Required?  Yes <input type="radio" name="email_c" value="true_ex" {EMAIL_TEX_CHECKED}>  No <input type="radio" name="email_c" value="false" {EMAIL_F_CHECKED}></td>
                </tr>
                <tr>
                    <td class="dataLabe" name="account" id="account" > Has Account  <input type="radio" name="account_c" value="True" {ACCOUNT_T_CHECKED}>  No Account <input type="radio" name="account_c" value="False" {ACCOUNT_F_CHECKED}></td>
                </tr>
                <tr>
                    <td class="dataLabel" name="awc" id="awc" >  AWC Newsletter Selected <input type="radio" name="awc_c" value="True"> AWC Newsletter Not Selected <input type="radio" name="awc_c" value="False"></td>
                </tr>
                <tr>
                    <td class="dataLabel" name="mobile" id="mobile"  >  Has mobile  <input type="radio" name="mobile_c" value="True" {MOBILE_T_CHECKED}>  No mobile <input type="radio" name="mobile_c" value="False" {MOBILE_F_CHECKED}></td>
                </tr>

                    <tr>
                        <td align="right" name="buttonForm" id="buttonForm">
                            <input type="hidden" name="action" value="PopupContactsCriteria"/>
                            <input type="hidden" name="query" value="true"/>
                            <input type="hidden" name="record" value="{RECORD_VALUE}"/>
                            <input type="hidden" name="module" value="{MODULE_NAME}" />
                            <input type="hidden" name="form_submit" value="{FORM_SUBMIT}" />
                            <input type="hidden" name="sugar_body_only" value="1" />
                            <input type="hidden" name="form" value="{FORM}" />          
                            <input class="button" type="submit" name="addAdditionalButton" id="addAdditionalButton" value="  Add Additional  " />
                        </td>   
                </tr>
                </table>
            </form>
        </td>
        </td>
    </table>
</div>

Answer 1

提交时，使用 serializeArray(( 而不是 .serialize() 。这将生成一个对象数组，每个对象包含一个输入及其来自表单的值：

[
  {
    name: "action",
    value: "1"
  },
  {
    name: "query",
    value: "2"
  },
  {
    name: "record",
    value: "3"
  }
]

然后很容易为每个字段发出一个请求：

for(let oneObject of serializedData){
    $.post({
        url: "index.php",
        data: oneObject
    })
} 

这将进行三个不同的(和并行(调用，第一个携带{name: "action", value: "1"}，第二个{name: "query", value: "2"}，依此类推。