更改模式加载的 url答案

【问题标题】：Change url on modal load更改模式加载的 url
【发布时间】：2014-06-20 11:03:28
【问题描述】：

我正在使用 twitter bootstrap 和 laravel 创建一个 Web 应用程序。我似乎遇到的问题是我的登录和注册例程发生在同一页面“/”上。我试图在模态加载时更改 url，以便我可以使用来自两个不同位置的路由。

这是我的路线

Route::post('register', array('uses' =>'RegistrationController@doRegister'));
Route::post('login', array('uses' => 'RegistrationController@doLogin'));

这里是模态

<div class="modal fade" id="signInModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Sign In</h4>
          </div>
          <div class="modal-body">
            <form action="" method="post" id="signInForm">
                <div class="form-group center-block">
                    <div class="row"><!-- Input for Sign In-->
                        <div class="col-xs-12">
                            <div class="form-group">
                                <input type="email" class="form-control" id="inputEmail" placeholder="User ID">
                            </div>
                        </div>
                        <div class="col-xs-12">
                            <div class="form-group">
                                <input type="password" class="form-control" id="inputPassword" placeholder="Password">
                            </div>
                        </div>
                    </div><!-- End of Input for Sign In-->
                </div>
            </form>
            </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary" id="signInModalButton">Submit</button>
          </div>
         </div>
        </div>
      </div>
    </div>



 <div class="modal fade" id="registeringModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Register</h4>
          </div>
              <div class="modal-body">
                <form action="" method="post" id="registerForm">
                    <div class="form-group center-block">
                        <div class="row"><!--Input for Registering-->
                            <div class="col-xs-12 col-sm-6 col-md-6">
                                <div class="form-group">
                                    <input type="text" name="first_name" id="first_name" class="form-control input-lg" placeholder="First Name" tabindex="1">
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-6 col-md-6">
                                <div class="form-group">
                                    <input type="text" name="last_name" id="last_name" class="form-control input-lg" placeholder="Last Name" tabindex="2">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <input type="email" name="email" id="email" class="form-control input-lg" placeholder="Email Address" tabindex="4">
                        </div>
                        <div class="row">
                            <div class="col-xs-12 col-sm-6 col-md-6">
                                <div class="form-group">
                                    <input type="password" name="password" id="password" class="form-control input-lg" placeholder="Password" tabindex="5">
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-6 col-md-6">
                                <div class="form-group">
                                    <input type="password" name="password_confirmation" id="password_confirmation" class="form-control input-lg" placeholder="Confirm Password" tabindex="6">
                                </div>
                            </div>
                            <div class="col-xs-12">
                                <div class="form-group">
                                    <input type="text" name="addressLine1" id="addressLine1" class="form-control input-lg" placeholder="Address Line 1" tabindex="6">
                                </div>
                            </div>
                            <div class="col-xs-12">
                                <div class="form-group">
                                    <input type="text" name="addressLine2" id="addressLine2" class="form-control input-lg" placeholder="Address Line 2" tabindex="6">
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-6 col-md-6">
                                <div class="form-group">
                                    <input type="text" name="city" id="city" class="form-control input-lg" placeholder="City" tabindex="6">
                                </div>
                            </div>
                            <div class="col-xs-6 col-sm-3 col-md-3"><!--State Dropdown-->
                                <div class="form-group">
                                        <select name="state" class="form-control" tabindex="6">
                                            <option value=" " disabled selected>State</option>
                                            <option value="AL">AL</option>
                                            <option value="AK">AK</option>
                                            <option value="AZ">AZ</option>
                                            <option value="AR">AR</option>
                                            <option value="CA">CA</option>
                                            <option value="CO">CO</option>
                                            <option value="CT">CT</option>
                                            <option value="DE">DE</option>
                                            <option value="DC">DC</option>
                                            <option value="FL">FL</option>
                                            <option value="GA">GA</option>
                                            <option value="HI">HI</option>
                                            <option value="ID">ID</option>
                                            <option value="IL">IL</option>
                                            <option value="IN">IN</option>
                                            <option value="IA">IA</option>
                                            <option value="KS">KS</option>
                                            <option value="KY">KY</option>
                                            <option value="LA">LA</option>
                                            <option value="ME">ME</option>
                                            <option value="MD">MD</option>
                                            <option value="MA">MA</option>
                                            <option value="MI">MI</option>
                                            <option value="MN">MN</option>
                                            <option value="MS">MS</option>
                                            <option value="MO">MO</option>
                                            <option value="MT">MT</option>
                                            <option value="NE">NE</option>
                                            <option value="NV">NV</option>
                                            <option value="NH">NH</option>
                                            <option value="NJ">NJ</option>
                                            <option value="NM">NM</option>
                                            <option value="NY">NY</option>
                                            <option value="NC">NC</option>
                                            <option value="ND">ND</option>
                                            <option value="OH">OH</option>
                                            <option value="OK">OK</option>
                                            <option value="OR">OR</option>
                                            <option value="PA">PA</option>
                                            <option value="RI">RI</option>
                                            <option value="SC">SC</option>
                                            <option value="SD">SD</option>
                                            <option value="TN">TN</option>
                                            <option value="TX">TX</option>
                                            <option value="UT">UT</option>
                                            <option value="VT">VT</option>
                                            <option value="VA">VA</option>
                                            <option value="WA">WA</option>
                                            <option value="WV">WV</option>
                                            <option value="WI">WI</option>
                                            <option value="WY">WY</option>
                                        </select>
                                </div>
                            </div><!--End of State Dropdown List-->
                            <div class="col-xs-6 col-sm-3 col-md-3">
                                <div class="form-group">
                                    <input type="number" name="zipcode" id="zipcode" class="form-control input-lg" placeholder="Zipcode" tabindex="6">
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-6 col-md-6">
                                <div class="form-group">
                                    <input type="text" name="phoneNumber" id="phoneNumber" class="form-control input-lg" placeholder="Phone Number" tabindex="6">
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
              </div><!-- End of input for registering-->
          <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary" id="registerModalButton">Register</button>
          </div>
        </div>
      </div>
    </div>

我使用这个 javascript 提交表单

    //Delay JS bind so button exists                           
 $(document).ready(function() {                 $('#signInModalButton').click(function() {                    $('#signInForm').submit();
 }); }); </script>

编辑：为了澄清 /login 和 /register 页面不存在，我试图在模式出现时更改 url，以便我的路线正常工作。

【问题讨论】：

标签： javascript jquery html twitter-bootstrap laravel-4

【解决方案1】：

表单中的操作属性为空。这就是您的表单被提交到同一页面的原因。

你需要更换

<form action="" method="post" id="signInForm">

与

<form action="{{ URL::to('register') }}" method="post" id="signInForm">

和

<form action="" method="post" id="signInForm">

与

<form action="{{ URL::to('login') }}" method="post" id="signInForm">.

【讨论】：

感谢您的帮助，但这并不能解决问题。
这是否仍然重定向到同一页面或显示一些错误？
我收到此错误：内部服务器错误服务器遇到内部错误或配置错误，无法完成您的请求。
这应该是对的！没有操作，没有 AJAX，您的帖子将一事无成。
@Matt 你的代码有问题。您需要在应用程序配置中启用调试，您会在代码中看到错误。

【解决方案2】：

据我所知，您的提交按钮是错误的。应该是：

<button class="btn btn-danger" data-dismiss="modal">Close</button>
<input type="submit" class="btn btn-primary" id="signInModalButton">Submit</button>

它们也应该放在您的<form> 中，并且您的表单应该对其进行操作。

【讨论】：

我有一些处理提交<script type='text/javascript'> //Delay JS bind so button exists $(document).ready(function() { $('#signInModalButton').click(function() { $('#signInForm').submit(); }); }); </script>的javascript
好的，我认为将所有这些都提供给问题是个好主意，否则人们将无法为您提供帮助。也许我可以帮助你？ ;) 否则人们会标记它，您的问题将被关闭。