将输入附加到HTML表单，JQuery无法正常工作

Question

我试图在使用AJAX发送它之前使用JQuery表单添加输入，但是它没有被附加，因为我在后端看到该字段为空。这是我的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没有意义，请你很好地格式化你的代码，它现在看起来非常糟糕。

您可以在发送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");}
})