Laravel登录页实现双输入框拼接结果赋值到email字段问题

你现有代码的核心问题是concatme函数仅将拼接结果赋值给了<p>标签的文本内容，没有同步给email输入框赋值，且提交按钮点击时触发函数可能存在赋值晚于表单提交的时序问题，可按以下方案修改：

修改步骤 #

1. 调整concatme函数逻辑

给email输入框赋值需要修改元素的value属性而非innerText，修改后的JS代码如下：

function concatme() {
    var usernamePrefix = document.getElementById("num1").value.trim();
    var emailSuffix = document.getElementById("num2").value.trim();
    var fullEmail = usernamePrefix + emailSuffix;
    // 更新预览文本
    document.getElementById("response").innerText = fullEmail;
    // 给邮箱输入框赋值
    document.getElementById("email").value = fullEmail;
}

2. 优化触发逻辑与字段显示

将触发时机改为用户输入用户名时实时拼接，同时把固定域名的输入框设为隐藏，避免用户误修改：

<!-- 用户名输入框，输入时实时触发拼接 -->
<input type="text" name="num1" class="form-control" id="num1" placeholder="USER" oninput="concatme()">
<!-- 固定邮箱后缀设为隐藏，用户不可编辑 -->
<input type="hidden" name="num2" class="form-control" id="num2" value="@box.domain.com">
<!-- 预览区域 -->
<p id="response"></p>
<!-- 原有邮箱输入框，若不需要用户手动修改可加readonly属性或直接隐藏 -->
<input id="email" type="email" class="form-control" name="email" value="{{ old('email') }}" required>

3. 移除冗余触发（可选）

因为已经实现了输入时实时赋值，可删除登录按钮的onclick="concatme()"属性，避免重复执行。

内容的提问来源于stack exchange，提问作者Joan Nin