时间戳

首页 > 解决方案 > 使用 JQuery 将输入附加到 HTML 表单不起作用

javascript - 使用 JQuery 将输入附加到 HTML 表单不起作用

问题描述

我试图在使用 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 之间并用空格替换它，但它也不起作用

标签： javascriptjqueryhtmlbackbone.js

解决方案

您的代码几乎没有问题。

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

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

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

以下是在将数据发送到服务器之前附加表单字段的小提琴：

工作JSFIDDLE

推荐阅读