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

时间：2018-08-07 11:29:06

标签： javascript jquery html sql ajax

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

这是我目前拥有的示例文本-效果很好；

Java脚本； 

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>

1 个答案:

答案 0 :(得分：0)

提交后，使用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"}，等等。

相关问题
最新问题