J'essaie d'ajouter une entrée à un formulaire HTML avec JQuery avant de l'envoyer avec AJAX mais elle n'est pas ajoutée car je vois dans le back-end que le champ est nul. voici mon formulaire 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>

Et voici mon code 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");}


      },

Des idées pourquoi cela ne fonctionne pas? J'ai aussi essayé de supprimer le . entre basketForm.loginForm et remplacez-le par un espace, mais cela n'a pas fonctionné non plus

0
geekymano 14 mars 2019 à 10:05

2 réponses

Meilleure réponse

Il y a peu de problèmes avec votre code.

Il n'y a pas de méthode addurl sur $.ajax c'est pourquoi votre champ de formulaire n'est pas ajouté au DOM (voir $.ajax API). Il existe une méthode beforeSend sur l'API $.ajax, mais elle est utilisée pour modifier l'objet jqXHR avant qu'il ne soit envoyé.

Le nom de l'argument de votre méthode loadValidation devrait être formClass ou formId car classId n'a aucun sens et veuillez bien formater votre code, il a l'air vraiment mauvais en ce moment.

Vous pouvez ajouter votre champ au formulaire juste avant d'envoyer la requête ajax.

Voici le violon qui ajoute le champ de formulaire avant d'envoyer des données au serveur :

JSFIDDLE

1
Pal Singh 14 mars 2019 à 08:39

Vous pouvez sérialiser les valeurs d'entrée avant de les envoyer au serveur et y ajouter tout autre paramètre comme celui-ci

// 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');

EDIT : à partir du contexte de votre code, essayez de modifier vos lignes de requête ajax ci-dessous avec le script ci-dessus

$.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");}
})
0
scott6 14 mars 2019 à 08:02