将输入附加到 HTML 表单且 JQuery 不起作用

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 之间并用 space 替换它，但它也不起作用

Answer 1

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

// 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");}
})

Answer 2

您的代码几乎没有问题。

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

你的方法的参数名称 loadValidation 应该是 formClass 或 formId 因为 classId 没有意义，请很好地格式化你的代码，它现在看起来真的很糟糕.

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

以下是 fiddle，它在将数据发送到服务器之前附加表单字段：

工作JSFIDDLE

将输入附加到 HTML 表单且 JQuery 不起作用

appending an input to a HTML form with JQuery not working

html

javascript

jquery

backbone.js