在模态加载上更改url
Change url on modal load
我正在使用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">×</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">×</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>
编辑:澄清/登录和/注册页面不存在，我试图改变url时，模式出现，使我的路由正常工作。
表单中的动作属性为空。这就是为什么您的表单被提交到同一个页面。
你需要替换
<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"> .
就我所见，你的提交按钮是错误的。应该是:
<button class="btn btn-danger" data-dismiss="modal">Close</button>
<input type="submit" class="btn btn-primary" id="signInModalButton">Submit</button>
它们也应该放在你的<form>中，你的表单应该有一个动作。
相关文章：
- 我想使用模态通过php文件发送邮件，并且我希望在提交关闭后关闭pop
- 打开一个模态并将其链接到AngularJS中的指令
- SemanticUI模态not onDeny/onApprove事件未激发
- jqueryajax调用是复制url，当在模态视图之后在外部js文件中进行调用时
- 如何从url中显示模态内部的信息
- 打开一个模态(在Codeigniter中），该模态从依赖于phpvar的URL加载(在iframe中）内容
- 基于带有#的url打开模态
- 先前的状态视图不会保留在带有自定义模态url的打开UI引导模态的后台
- 使用SP.UI.ModalDialog.ShowPopupDialog(url)打开对话框时，模态弹出窗口发送值给父窗口
- 恢复基础url后模态窗口
- 如何在模态对话框中显示URL和URL标题
- AngularJS ui-bootstrap打开模态窗口而不改变url
- url的模态对话框不工作
- 任何URL的Colorbox模态
- 模态窗口内的Url重定向
- 将按钮值传递给Url.模态中的动作
- 在模态加载上更改url
- 如何获得"这个“;背景图像's的url使用“$event.target”;以离子模态显示
- 如何在模态中加载 URL 的内容并在浏览器中更改地址
- 带有URL的Javascript模态弹出窗口
