Question

我尝试在使用AJAX发送输入之前将输入附加到具有JQuery格式的HTML，但是由于在后端看到该字段为空，因此未附加输入。这是我的HTML表单：

 <form class="basketForm loginForm" id="@formId" autocomplete="off" captcha="false">
        <div class="newRegister-addMobileNumber">
            <div class="newRegister-formBox">
                <div class="formElement newRegister-input">
                    <input id="@userNameInputId" type="text" name="EmailOrPhoneNumber" class="form-control persianDigitInput" placeholder="تلفن همراه" >

                </div>
                <div class="newRegister-button">
                    <button type="submit" class="animateBtn greenAnimateBtn">
                        <i class="fa fa-check"></i>
                        send
                        </button>
</div>
            </div>
        </div>
    </form>

这是我的JavaScript代码：

loadValidation: function (classId) {
//I suspect that this part is not reading the url correctly
        var currentUrl = window.location.href;
        console.log(currentUrl);
        var self = this;
        $(classId)
           .validate({
               rules: {
                   EmailOrPhoneNumber: {
                       required: true,
                       regex: $utils.regex.EmailOrPhoneNumber
                   },
                   Password: {
                       required: true
                   }
               },
               messages: {
                   EmailOrPhoneNumber: {
                       required: $utils.messages.user.required_EmailOrPhoneNumber,
                       regex: $utils.messages.other.notValid_EmailPhoneNumberFormat
                   },
                   Password: {
                       required: $utils.messages.user.required_Password
                   }
               },
               submitHandler: function (form) {
                   var $form = $(form);
                   var validator = $form.data("validator");
                   if (self.requireCaptcha(classId)) {
                       var captcha = $(classId + " input[name='CaptchaImage']").val();
                       if (captcha.length <= 0) {
                           validator.showErrors({
                               CaptchaImage: $utils.messages.other.requreid_CaptchaImage
                           });
                           return;
                       }
                   }
                   if (!validator || !$form.valid())
                       return;
                   $("#returnUrl").val($("#returnUrl").val() + window.location.hash);
                   $.ajax({
                       url: "/Account/Login",
                       datatype: "json",
                       type: "POST",
// this is the part where the input should be appended to the form
                       addurl: function () {
                           if ( currentUrl == "http://localhost:59746/Account/Register/") {
                               console.log(currentUrl)
                               $('<input />').attr('type', 'hidden')
                                   .attr('name', "ReturnUrl")
                               .attr('value', "regurl")
                                   .appendTo(".basketForm.loginForm");}


      },

有什么想法为什么不起作用？我也尝试过删除。在basketForm.loginForm之间，并用空格替换，但是它也不起作用

Answer 1

您的代码几乎没有问题。

addurl上没有$.ajax方法，这就是为什么您的表单字段未附加到DOM的原因（请参阅$.ajax API）。 beforeSend API上有一个$.ajax方法，但是它用于在发送jqXHR对象之前对其进行修改。

方法loadValidation的参数名称应为formClass或formId，因为classId毫无意义，请正确格式化代码，现在看起来真的很糟。 / p>

您可以在发送ajax请求之前将字段追加到表单中。

以下是小提琴，它在向服务器发送数据之前附加了表单字段：

工作JSFIDDLE

Answer 2

您可以在将输入值发送到服务器之前对其进行序列化，并像这样向其附加任何其他参数

// serialize all inputs inside .loginForm
var formData = $('.loginForm :input').serializeArray();
// add other data when on specific address
if (currentUrl == "http://localhost:59746/Account/Register/") {
  formData.push({ name: "ReturnUrl", value: "regurl" });
}

// post with formData
$.post('/Account/Login',formData,function(responseData){
  // do something here with responseData
},'json');

编辑： 从代码的上下文中，尝试使用上面的脚本更改下面显示的ajax请求行

$.ajax({
                       url: "/Account/Login",
                       datatype: "json",
                       type: "POST",
// this is the part where the input should be appended to the form
                       addurl: function () {
                           if ( currentUrl == "http://localhost:59746/Account/Register/") {
                               console.log(currentUrl)
                               $('<input />').attr('type', 'hidden')
                                   .attr('name', "ReturnUrl")
                               .attr('value', "regurl")
                                   .appendTo(".basketForm.loginForm");}
})

使用JQuery无法将输入附加到HTML表单

2 个答案: