Ajout de texte caché pour envoyer le formulaire en utilisant jQuery

Question

J'ai donc ce formulaire de connexion, et ce que j'essaie de faire est d'ajouter une donnée supplémentaire, par exemple disons -123, à leur nom d'utilisateur dans les coulisses car cela permettra de déterminer quel site ils se connectent.

J'ai ci-dessous dans ma page HTML, mais malheureusement, cela ne fonctionne pas. Des idées?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

<script type="text/javascript"> 
$('submit').click(function() { 
$('input[username="username[]"]').map(function() { 
    $(this).val($(this).attr('username') + '-123' + $(this).val()); 
    alert($(this).val()); 
    }); 
}); 

<form method="post" action="http://fake.com/example/Login,loginForm.sdirect" id="loginForm"> 
<input type="hidden" name="formids" value="loginButton,username,password,Hidden" /> 
<input type="hidden" name="seedids" value="" /> 
<input type="hidden" name="submitmode" value="" /> 
<input type="hidden" name="submitname" value="" /> 
<input type="hidden" name="Hidden" id="Hidden" value="X" /> 
    <div class="login-fields" style="text-align:left; margin-left:0px; margin-top:16px; height:217px; width:225px; background-image:url(images/please_login.jpg); background-repeat: no-repeat;"> 
    <div style="position:relative; left:24px; top:48px;">username:<br /><input type="text" name="username" value="" id="username" size="20" /></div> 
<div style="position:relative; left:24px; top:60px;">password:<br /><input type="password" name="password" value="" id="password" size="20" /></div> 
<div style="position:relative; left:124px; top:72px;"><input type="submit" value="Login" /></div> 
</div> 
</form> 

Answer 1

Juste les éléments d'extraction par ID, car ils ont tous les ID, puis modifiez la valeur avant de soumettre le formulaire à l'aide val(). L'événement submit se déclenche avant que le formulaire ne soit envoyé.

$('#loginForm').on('submit', function() { 
    $('#username').val(function(v) { 
     return v + '-123'; 
    }); 
}); 

Answer 2

La logique que vous aviez pour régler le val() en utilisant map() était très alambiquée et pas du tout ce que vous avez besoin. Au lieu de cela, après avoir sélectionné l'élément #username, vous pouvez passer une fonction à val() qui ajoute la chaîne nécessaire à la valeur actuelle, comme ceci:

$('form').submit(function(e) { 
 
    e.preventDefault(); // this is only for the sake of this example, remove if not needed 
 

 
    $('#username').val(function(i, v) { 
 
    return v + '-123'; 
 
    }); 
 
});

.login-fields { 
 
    text-align: left; 
 
    margin-left: 0px; 
 
    margin-top: 16px; 
 
    height: 217px; 
 
    width: 225px; 
 
    background-image: url(images/please_login.jpg); 
 
    background-repeat: no-repeat; 
 
} 
 

 
.login-fields>div:nth-child(1) { 
 
    position: relative; 
 
    left: 24px; 
 
    top: 48px; 
 
} 
 

 
.login-fields>div:nth-child(2) { 
 
    position: relative; 
 
    left: 24px; 
 
    top: 60px; 
 
} 
 

 
.login-fields>div:nth-child(3) { 
 
    position: relative; 
 
    left: 124px; 
 
    top: 72px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
<form method="post" action="http://fake.com/example/Login,loginForm.sdirect" id="loginForm"> 
 
    <input type="hidden" name="formids" value="loginButton,username,password,Hidden" /> 
 
    <input type="hidden" name="seedids" value="" /> 
 
    <input type="hidden" name="submitmode" value="" /> 
 
    <input type="hidden" name="submitname" value="" /> 
 
    <input type="hidden" name="Hidden" id="Hidden" value="X" /> 
 

 
    <div class="login-fields"> 
 
    <div> 
 
     username:<br /> 
 
     <input type="text" name="username" value="" id="username" size="20" /> 
 
    </div> 
 
    <div> 
 
     password:<br /> 
 
     <input type="password" name="password" value="" id="password" size="20" /> 
 
    </div> 
 
    <div> 
 
     <input type="submit" value="Login" /> 
 
    </div> 
 
    </div> 
 
</form>

Notez que vous ne devriez pas utiliser en ligne style les attributs. Placer le style dans une feuille de style externe à la place - comme je l'ai fait dans l'extrait ci-dessus.

Answer 3

changez le script comme ci-dessous. vous pouvez en mesure d'attacher le nom derrière 123 et aussi $(this).attr('name') donne la valeur de l'attribut en tant que nom. Au moment de la connexion avec l'appel de service API, supprimez ce event.preventDefault();.

<script type="text/javascript"> 
     $('form').submit(function (event) { 
     event.preventDefault(); 
     $('#username').map(function() { 
      $(this).val($(this).attr('name') + '-123' + $(this).val()); 
      alert($(this).val()); 
      }); 
     }); 
    </script> 

sortie en zone d'alerte:

username-123<value in input tag> 

nom d'utilisateur ci-dessous étiquette

<input type="text" name="username" value="" id="username" size="20" /> 

Answer 4

Modifier votre script comme ci-dessous

$(document).ready(function() { 
      $('input[type="submit"]').on("click", function (e) { 
       $('#username').val(function (index, value) { 
        return value + '-123'; 
       }) 
       alert($('#username').val()); 
      }); 
     }); 

    </script >