Hinzufügen versteckter Text zum Senden von Formular mit jQuery

Question

Also ich habe dieses Login-Formular, und was ich versuche zu tun ist ein zusätzliches Stück Daten anfügen, sagen wir es -123, an ihren Benutzernamen hinter den Kulissen da dies bestimmen wird, an welcher Site sie sich anmelden.

Ich habe die unten in meiner HTML-Seite, aber das funktioniert leider nicht. Irgendwelche Ideen?

<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

einfach die Elemente von ID holen, da sie alle IDs haben, dann ändern Sie den Wert vor das Formular val() mit einreichen. Das Ereignis submit wird ausgelöst, bevor das Formular gesendet wird.

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

Answer 2

Die Logik Sie war es, die val() mit map() zur Einstellung hatte sehr verworren und nicht das, was Sie brauchen. Stattdessen wird nach dem #username Element ausgewählt haben, können Sie eine Funktion val() geben, die die erforderliche Zeichenfolge auf den aktuellen Wert anhängt, wie folgt aus:

$('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>

Beachten Sie, dass Sie nicht inline verwenden sollten style Attribute. Platziere das Styling stattdessen in einem externen Stylesheet - wie ich es oben im Snippet getan habe.

Answer 3

Skript wie folgt ändern. Sie können Namen hinter 123 anhängen und auch $(this).attr('name') gibt Wert des Attributs als Name. Zum Zeitpunkt der Verbindung mit dem Service-Anruf api entfernen Sie diese 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> 

Ausgang in Alarmfeld:

username-123<value in input tag> 

Benutzernamen von unten Tag

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

Answer 4

Ändern Sie Ihr Skript wie unter

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

    </script >