How do I trigger a get request from a bootstrap button? I have the following code:
<form class="navbar-form navbar-right" role="form">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
<button type="submit" class="btn btn-warning" value="/signup" id="submit">Sign up</button>
</form>
and would like this button to perform a get request with the following value "signup"
I am using a MEAN stack and the routes are set up so when the app is accessed with the get value /signup it goes to the signup page. But I am not able to get the bootstrap 3 button to post a get a request.
On your form you will need the following two attributes:
Action = "{URL TO SEND THE FORM TO}"
Method = "{GET or POST}"
For a signup with a username and password you should really think about doing a POST request so the form element should look like (for a POST request):
<form action="/signup" method="POST" class="navbar-form navbar-right" role="form">
or for a get request:
<form action="/signup" method="GET" class="navbar-form navbar-right" role="form">
Related
I have adjust controller name with route and send form that post method but it didnt work, i send it from modal
I have add {{ method_field('patch') }} but it still didnt work
This is from view :
<form action="{{route('edit kode', 'test')}}" method="post">
{{ method_field('patch') }}
{{ csrf_field() }}
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i class="material-icons">clear</i>
</button>
<h5 class="modal-title">Edit Data</h5>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label class="bmd-label-floating">Kode</label>
<input type="hidden" class="form-control" id="modalidkode">
<input type="text" class="form-control" id="modalkode" readonly>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<label class="bmd-label-floating">Nama Kode</label>
<input type="text" class="form-control" id="modalnamakode" required>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal"
style="margin-right: 10px">Batal
</button>
<button type="submit" class="btn btn-info">Simpan Perubahan</button>
</div>
Controller
public function editCode(Request $request){
dd($request->all());
$edCode="05.01";
return redirect()->back()->withSuccess($edCode. " changed");
}
Route
Route::post('/pengaturan/edit', 'AllCodeController#editCode')->name('edit kode');
You're expecting the request to be a POST request in your routes, but your form is submitting a PATCH request (because of the method_field('patch') at the top of your form). Either remove the method_field() call, or change Route::post(...) to Route::patch(...).
You can read more about form method spoofing in the Laravel documentation:
HTML forms do not support PUT, PATCH or DELETE actions. So, when defining PUT, PATCH or DELETE routes that are called from an HTML form, you will need to add a hidden _method field to the form. The value sent with the _method field will be used as the HTTP request method:
<form action="/foo/bar" method="POST">
<input type="hidden" name="_method" value="PUT">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
</form>
Im building a nodejs (express) app using a user model for commenting thins etc.
For certain activities a user must have an account and has to be logged in. I'm using a middleware (function isLoggedIn) to check if a user is logged in. At first, I did this with a form that's shown if you go to the /login route. Instead of using a route, I want to use a bootstrap modal that shows up.
This is my login form that shows up when the modal is being invoked:
<form action="/login" method="POST">
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="loginModalTitle">Login</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group" id="formGroupLogin">
<input type="email" class="form-control" name="username" placeholder="E-Mail" required>
<input type="password" class="form-control" name="password" placeholder="Passwort" required>
</div>
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-primary btn-block" value="Login">
</div>
</div>
</div>
</div>
</form>
It works perfektly fine when I put this on my navbar so that it's being invoked when you click the "Login" Button in the navbar.
But how can I invoke this modal when I want to guide to the login form within a middleware that checks if the user is authenticated?
In the past, I did this by routing to a route that shows the login form (using res.redirect("/login"). Now I don't want to route, I just need to expand the modal.
That's how my middleware looked so far:
function isLoggedIn(req, res, next) {
if (req.isAuthenticated()) {
return next();
}
res.redirect("/login");
}
How do I have to change it? Any Ideas?
I am trying to build an app that lets users find other users with a specific combination of skills. I ask the users to select which skills they are looking for via checkboxes but I'm not sure how to request for the status of that checkbox in my function.
My function currently is:
UserInfo.find()
.where('skill1').equals('')
.where('skill2').equals('')
.where('skill3').equals('')
.limit(10)
.then(function(doc) {
res.render('index', {items: doc});
});
It works properly if I set the equals('') to true or false but I'm not sure how to set it dynamically. My HTML code for the checkboxes is:
<form action="/getskills" method="get">
<div class="input">
<label for="skill1">Skill1</label>
<input type="checkbox" id="skill1" name="skill1" value="skill1"/>
</div>
<div class="input">
<label for="skill2">Skill2</label>
<input type="checkbox" id="skill2" name="skill2" value="skill2"/>
</div>
<div class="input">
<label for="skill3">Skill3</label>
<input type="checkbox" id="skill3" name="skill3" value="skill3"/>
</div>
FIND SKILL
</form>
How can I create and integrate a function to check the value of the checkbox and set the value of the required skill to either true or false?
Thanks in advance for your help.
The problem is that you are using an <a> element to perform the request to the server instead of <input type="submit">. Without a submit button, the elements on your form will not be submitted with the request. Modify your html to this
<form action="/getskills" method="get">
<div class="input">
<label for="skill1">Skill1</label>
<input type="checkbox" id="skill1" name="skill1" value="skill1" />
</div>
<div class="input">
<label for="skill2">Skill2</label>
<input type="checkbox" id="skill2" name="skill2" value="skill2" />
</div>
<div class="input">
<label for="skill3">Skill3</label>
<input type="checkbox" id="skill3" name="skill3" value="skill3" />
</div>
<input type="submit" value="FIND SKILL" />
</form>
then in your Node.js code (I assume you are using express), you can get the checkbox values as query parameters as follows:
//I'm assuming the req parameter is passed in to the express get() method
UserInfo.find()
.where('skill1').equals(req.query.skill1)
.where('skill2').equals(req.query.skill2)
.where('skill3').equals(req.query.skill3)
.limit(10)
.then(function(doc) {
res.render('index', {items: doc});
});
Windows 8
Rails 4.1
Ruby 2.0
I have the following search form in my menu:
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" method="get" name="search-form" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
When I submit, I would like to call a particular method in the agents controller. I tried:
<input type="text" method="get" name="search-form" action="agents_search_view" class="form-control" placeholder="Search">
but it did not work. I also tried:
<button type="submit" action="agents_search_view" class="btn btn-default">Submit</button>
but it did not work either. Any ideas?
You should be adding action in the form tag,not in the input and not in the submit button.
This should work
<form class="navbar-form navbar-left" role="search" action="agents_search_view">
<div class="form-group">
<input type="text" method="get" name="search-form" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
i am stuck with a problem. when i hosted my site having two part, UI and Server, when i am trying to login to the system the following error is occurred. read lot of posts regarding this error and i cannot make it possible. please help me to catch the exact problem
<div class="logo-container"><h3>DMS<span>Beta</span></h3>
</div>
<div style="width:55%; float:left;">
<h2>Sign In</h2>
<div class="divAlertError" id="divLoginAlert" style="display:none;">
The username or password is incorrect
</div>
<form method="POST" accept-charset="UTF-8" class="form-signin">
<input type="text" id="username" class="input-block-level" name="username" placeholder="Username">
<input type="password" id="password" class="input-block-level" name="password" placeholder="Password">
<label class="checkbox" style="padding-left:0px;">
Forgot Password
</label>
<div class="btn-group">
<button class="btn btn-mini">Action</button>
<button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>--select--</li>
<li>English -US</li>
<li>English -EN</li>
</ul>
</div>
<button type="submit" name="submit" class="btn btn-primary pull-right" id="btnSignIn">Sign in</button>
</form>
</div>
</div>
</div>
</div>
</div>
<div>
<p> <center>© EMR 2013.All rights reserved</center></p>
</div>
</div>
<!-- Login Div ends-->
this is the code i am using and the error i that am getting is
HTTP Error 405.0 - Method Not Allowed
The page you are looking for cannot be displayed because an invalid method (HTTP verb) is being used.
please help me. i got this error after updating my ui design, before that all pages are working fine..
Regadrs,
Sivajith S.
It looks like your form is missing the action attribute.