Laravel模态表单：将输入值作为参数传递至指定路由

我来帮你搞定这个需求！其实核心思路就是在模态框提交按钮点击时，获取输入框的内容，然后把它拼接到你指定的路由上，最后完成跳转（或者发起请求）。咱一步步来实现：

第一步：完善模态框的HTML结构 #

首先得确保你的模态框里有输入名称的表单控件，还有对应的提交按钮。我把你给出的代码补全成完整可用的结构：

<!-- 触发按钮 -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" onClick="$('#myModal').modal()" style="margin-top: 2px;"> New Name </button>

<!-- 模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">输入新名称</h4>
      </div>
      <div class="modal-body">
        <!-- 名称输入框 -->
        <div class="form-group">
          <label for="nameInput">名称</label>
          <input type="text" class="form-control" id="nameInput" placeholder="请输入名称">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <!-- 自定义提交按钮，绑定点击事件 -->
        <button type="button" class="btn btn-primary" id="submitNameBtn">提交</button>
      </div>
    </div>
  </div>
</div>

第二步：编写JavaScript逻辑处理提交 #

接下来写关键的JS代码，监听提交按钮的点击事件，获取输入值并拼接路由：

// 等待页面DOM加载完成
$(document).ready(function() {
  // 监听提交按钮点击
  $('#submitNameBtn').click(function() {
    // 获取输入框的值
    const inputName = $('#nameInput').val().trim();
    
    // 先验证输入是否为空（可选，但建议加上）
    if (!inputName) {
      alert('请输入名称！');
      return;
    }
    
    // 这里替换成你指定的基础路由，比如'/your-target-route'
    const baseRoute = '/names';
    
    // 两种参数拼接方式选一种：
    // 方式1：查询参数（比如 /names?name=xxx）
    const targetRoute = `${baseRoute}?name=${encodeURIComponent(inputName)}`;
    // 方式2：路径参数（比如 /names/xxx）
    // const targetRoute = `${baseRoute}/${encodeURIComponent(inputName)}`;
    
    // 跳转到目标路由
    window.location.href = targetRoute;
    
    // 如果不需要跳转，而是要发起AJAX请求，可以改成：
    // $.get(targetRoute, function(response) {
    //   // 处理请求返回的结果
    //   $('#myModal').modal('hide'); // 成功后关闭模态框
    // });
  });
});

关键细节说明 #

• encodeURIComponent()：一定要用这个方法对输入的名称进行编码，避免特殊字符（比如空格、&、中文等）破坏路由结构。
• 如果你用的是框架（比如Vue/React），路由跳转方式会不一样，但核心逻辑都是获取输入值→拼接路由→跳转/请求。
• 验证部分可以根据需求扩展，比如限制输入长度、格式等。

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