I want to fill this form, but i dont know how to do it since it only have a classname.
All the examples i saw have an id or a name, to fill the form and submit it, please help.
<form class="header_form" method="post" action="">
<div class="lgn-items">
<div class="login_item">
<label>Email</label>
<input type="text" name="email" tabindex="1" class="inputtext" id="email" />
</div>
<div class="login_item" >
<label>Password</label>
<input type="password" name="password" tabindex="2" class="inputtext" id="pass" />
</div>
<div class="lgn-add">
Registration <span>|</span>
Forgot your password ?
<div class="rembo">
<input type="checkbox" name="remember" value="1" /> Remember me
</div>
</div>
</div>
<div class="login_item lgn-btn" >
<input type="submit" name="login_button" value="Login" tabindex="3" class="login" />
</div>
</form>
You can access to your form using any selector. In your case you to it like this.
casper.then(function () {
casper.fill('form.header_form', {
/** Your parameters here **/
}, true);
});
Related
I'm using blade templates and this is how my form looks:
<form action="{{ route("user-sessions.store") }}" method="POST">
#csrf
<div class="form-group">
<label for="e-mail">E-mail Address</label>
<input name="email_address" class="form-control" type="email" />
</div>
<div class="form-group">
<label for="password">Password</label>
<input name="password" class="form-control" type="password" />
</div>
<div class="form-group">
<input class="btn btn-primary" type="submit" />
</div>
</form>
Does back()->withInput() only work with {{ Form::open() }}? If so, the 7.x documentation doesn't say that it seems. I would think if you need a 3rd party library to get this to work, the documentation should say so. If that's not the issue, then what am I doing wrong?
I'm using Laravel 7.x.
if you use html collective, it automatically puts old values in form inputs. But when use pure html to create form inputs you have to use old method for input values. like this:
<form action="{{ route("user-sessions.store") }}" method="POST">
#csrf
<div class="form-group">
<label for="e-mail">E-mail Address</label>
<input name="email_address" class="form-control" type="email" value="{{old('email_address')}}"/>
</div>
<div class="form-group">
<label for="password">Password</label>
<input name="password" class="form-control" type="password" value="{{old('password')}}"/>
</div>
<div class="form-group">
<input class="btn btn-primary" type="submit" />
</div>
</form>
I have a modal form for login in Laravel project. When I enter false data and click to the button "Log in" the page refreshing and modal is closing. I can see errors only when I open modal again. It's not user-friendly. I want to validate modal with Ajax and show errors if something goes wrong without refreshing page
This is my modal
<form action="/login" method="post">
#csrf
<div class="sign-in-wrapper">
Login with Facebook
Login with Google
<div class="divider"><span>Or</span></div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" class="form-control" name="email" id="email">
<i class="icon_mail_alt"></i>
#error('email')
<strong style="color: red">{{$message}}</strong>
#enderror
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" class="form-control" name="password" id="password" value="">
<i class="icon_lock_alt"></i>
#error('password')
<strong style="color: red">{{$message}}</strong>
#enderror
</div>
<div class="clearfix add_bottom_15">
<div class="checkboxes float-left">
<input id="remember-me" type="checkbox" name="check">
<label for="remember-me">Remember Me</label>
</div>
<div class="float-right"><a id="forgot" href="javascript:void(0);">Forgot Password?</a></div>
</div>
<div class="text-center">
<button type="submit" class="btn_login">Log In</button>
</div>
<div class="text-center">
Don’t have an account? Sign up
</div>
<div id="forgot_pw">
<div class="form-group">
<label>Please confirm login email below</label>
<input type="email" class="form-control" name="email_forgot" id="email_forgot">
<i class="icon_mail_alt"></i>
</div>
<p>You will receive an email containing a link allowing you to reset your password to a new preferred
one.</p>
<div class="text-center"><input type="submit" value="Reset Password" class="btn_1"></div>
</div>
</div>
</form>
Try this
You need to some custom changes yourself in code.
$('#frmLogin').on('submit', function (event) {
event.preventDefault();
var formData = $(this).serialize();
$.ajax({
type: 'POST',
url: '/login',
data: formData,
success: function (res) {
console.log(res); // get resposnse from controller in json
if (res.emailError) {
$('.error-email').show().text(res.errorMsg);
} else {
$('.error-email').hide();
}
if (res.passwordError) {
$('.error-password').text(res.errorMsg);
} else {
$('.error-password').hide();
}
},
error: function (data) {
alert(data);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="frmLogin" method="POST">
#csrf
<div class="sign-in-wrapper">
Login with Facebook
Login with Google
<div class="divider"><span>Or</span></div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" class="form-control" name="email" id="email">
<i class="icon_mail_alt"></i>
<strong style="color: red;display: none;" class="error-email">{{$message}}</strong>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" class="form-control" name="password" id="password" value="">
<i class="icon_lock_alt"></i>
<strong style="color: red;display: none;" class="error-password">{{$message}}</strong>
</div>
<div class="clearfix add_bottom_15">
<div class="checkboxes float-left">
<input id="remember-me" type="checkbox" name="check">
<label for="remember-me">Remember Me</label>
</div>
<div class="float-right"><a id="forgot" href="javascript:void(0);">Forgot Password?</a></div>
</div>
<div class="text-center">
<button type="submit" class="btn_login">Log In</button>
</div>
<div class="text-center">
Don’t have an account? Sign up
</div>
</div>
</form>
im just new in laravel and i dont know whats wrong with my code its not redirecting
public function login(Request $request){
$this->validate($request, [
'email'=> 'required|max:32',
'password'=> 'required|confirmed|max:32|min:8',
]);
if (Auth::attempt(['email'=>$request->email,'password'=>$request->password])) {
return redirect('/welcome');
}
return "Oooops something wrong happen";
}
this my login form
<form action="login" method="post">
<input type="hidden" name="_token" value="{{csrf_token()}}">
<div class="form-group">
<input type="email" name="" value="" class="form-control" placeholder="Enter Your Email">
</div>
<div class="form-group">
<input type="password" name="" value="" class="form-control" placeholder="Enter Your password">
</div>
<div class="form-group">
<input type="submit" name="" value="login" class="btn btn-success btn-lg btn-block">
</div>
and my route
Route::post('/login', 'UserController#login');
Your form is wrong, your name values are empty, and you're missing the confirmation password field
<form action="login" method="post">
{{ csrf_field() }}
<div class="form-group">
<input type="email" name="email" class="form-control" placeholder="Enter Your Email">
</div>
<div class="form-group">
<input type="password" name="passowrd" class="form-control" placeholder="Enter Your password">
</div> <div class="form-group">
<input type="password" name="passowrd_confirmation" class="form-control" placeholder="Enter Your password">
</div>
<div class="form-group">
<input type="submit" value="login" class="btn btn-success btn-lg btn-block">
</div>
</form>
I want to use select and option in laravel 5.3 in simple HTML form. How to use select and option in laravel 5.3 in HTML form?
My coding:
#extends('layout.navigation')
<html>
<head>
</script>
</head>
<div class="row" id="contact_form">
<div class="col-sm-4">
<form action="{{route('online_form')}}" method="post" enctype="multipart/form-data">
{!!csrf_field()!!}
<br/><br/>
<div class="panel panel-default" id="form_panel">
<div class="panel-body">
<p>fill the form </p>
<input type="text" name="username" class="form-control" placeholder="Name" required>
<br/>
<input type="text" name="email" class="form-control" placeholder="Email" required><br/>
<p style="margin-top:20px;font-size:14px">Gender :     <label
class="radio-inline"><input type="radio" style="margin-top:1px" name="gender"
value="Male">Male</label>
<label class="radio-inline"><input type="radio" style="margin-top:1px"
name="gender" value="female">Female<br/></label>
<p style="margin-top:20px;font-size:14px"> Select Language
:    <label class="checkbox-inline"><input type="checkbox"
name="language" value="english">English</label>
<label class="checkbox-inline"><input type="checkbox" name="language"
value="hindi">Hindi</label>
<br/><br/>
<select id="state">
<option value="rajasthan">Rajasthan</option>
<option value="madhya pradesh">Madhya Pradesh</option>
</select>
<input type="submit" name="submit" value="Enter" class="btn btn-primary" >
</form>
</div>
</div>
To get the state value in the controller method, you can use Input facade.
$state = Input::get('state');
You can include the following as a dependency in composer "laravelcollective/html": "~5.0" and then include it in your config/app
Now, you can create your select dropdown using:
echo Form::select('gender', array('Male', 'Female'));
echo Form::select('language', array('English', 'Hindi'));
and so on.
For more information on this collective,
check this out.
I have this:
<form role="form" method="post" action="validar.php" data-toggle="validator">
<h2>¿Te interesa?<br>
Nosotros te llamamos</h2>
<div class="form-group">
<label for="Nombre">Nombre*</label><input data-error="Debes facilitarnos tu nombre" class="form-control" id="Nombre" name="Nombre" type="text" required />
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="Empresa">Empresa</label><input class="form-control" id="Empresa" name="Empresa" type="text">
</div>
<div class="form-group">
<label for="Correo">Correo electrónico*</label><input data-error="Debes facilitarnos tu correo electrónico" class="form-control" id="Correo" name="Correo" type="email" required />
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="Telefono">Teléfono</label><input class="form-control" id="Telefono" name="Telefono" type="tel">
</div>
<div class="form-group">
<label for="Horario">Qué día y hora prefieres</label><input class="form-control" id="Horario" name="Horario" type="text">
</div>
<button type="submit" class="btn btn-image" name="send"><span style="position:relative;top: -20px;">Solicitar información</span></button>
<div class="checkbox">
<label><input type="checkbox" required /><a target="_blank" href="http://www.trisquel.com/privacidad/">Acepto las condiciones</a></label>
</div>
</form>
validar.php recollect all the data (POST) and send and email.
I would like to add ajax/jquery code to show a Sucess Message (f.e: Thxs for all!) bellow the submit buttom when the user clicks in "submit" in the same page that the form and execute validar.php in the index page.
THXS!
// this is the id of the form
$("#idForm").submit(function() {
var url = "validar.php"; // the script where you handle the form input.
$.ajax({
type: "POST",
url: url,
data: $("#idForm").serialize(), // serializes the form's elements.
success: function(data)
{
$("message").text("Success Message");
}
});
return false; // avoid to execute the actual submit of the form.
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form role="form" id="idForm" method="post" action="validar.php" data-toggle="validator">
<h2>¿Te interesa?<br>
Nosotros te llamamos</h2>
<div class="form-group">
<label for="Nombre">Nombre*</label><input data-error="Debes facilitarnos tu nombre" class="form-control" id="Nombre" name="Nombre" type="text" required />
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="Empresa">Empresa</label><input class="form-control" id="Empresa" name="Empresa" type="text">
</div>
<div class="form-group">
<label for="Correo">Correo electrónico*</label><input data-error="Debes facilitarnos tu correo electrónico" class="form-control" id="Correo" name="Correo" type="email" required />
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="Telefono">Teléfono</label><input class="form-control" id="Telefono" name="Telefono" type="tel">
</div>
<div class="form-group">
<label for="Horario">Qué día y hora prefieres</label><input class="form-control" id="Horario" name="Horario" type="text">
</div>
<button type="submit" class="btn btn-image" name="send"><span style="position:relative;top: -20px;">Solicitar información</span></button>
<div class="checkbox">
<label><input type="checkbox" required /><a target="_blank" href="http://www.trisquel.com/privacidad/">Acepto las condiciones</a></label>
</div>
<span id="message"></span>
</form>
Use jquery to serialize your form and post it. Give your form an id so you can reference it(like myForm)
var serializedForm = $("#myForm").serialize();
Then post it with an Ajax call(read the jquery ajax docs).
In the success callback of the Ajax call you do the following.
$('#contactDiv').hide();
$('#successDiv').show();
So you'll need to create some divs around the form and another around the success message.