添加隐藏文本使用jQuery提交表单

Question

所以我有这个登录表单，我想要做的是追加一块数据，例如让我们说这是-123，在他们的用户名后面因为这将决定他们登录哪个网站。

我已经在我的HTML页面中看到了下面的内容，但不幸的是这不起作用。有任何想法吗？

<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

通过ID就获取这些元素，因为它们都具有的ID，然后提交使用val()形式改变之前的值。在提交表单之前触发事件submit。

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

Answer 2

你不得不使用map()设置val()的逻辑是非常令人费解，而不是在所有你所需要的。相反，选择#username元素之后，你可以通过一个函数来val()其中追加所需的串的电流值，就像这样：

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

注意，你不应该使用内联style属性。相反，将样式放置在外部样式表中 - 就像我在上面的代码片段中所做的那样。

Answer 3

更改下面的脚本。您可以将名称附加在123后面，并且$(this).attr('name')也可以给出属性的值作为名称。在与api服务电话连接时删除此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> 

输出对话框：

username-123<value in input tag> 

从下面标签的用户名

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

Answer 4

更改您的脚本像下面

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

    </script >