I'm doing a record with a modal boostrap laravel performing validation. sending data via jquery ajax realize it. the problem I have is that pressing the submit button closes the modal. how you could do to keep open modal until the end of the validacion ?? Thank you
modal:
<!--- Register Modal -->
<div class="modal fade" id="Register" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Registro</h4>
</div>
<div class="modal-body">
<form class="form" role="form" id="new-user" data-token="{{ Session::token() }}" method="post" >
{{ csrf_field() }}
<div id="error">
<!-- error will be showen here ! -->
</div>
<div class="form-group{{ $errors->has('name') ? ' has-error' : '' }}">
<label for="name">Nombre completo: </label>
<input id="name" type="text" class="form-control" name="name" value="{{ old('name') }}">
#if ($errors->has('name'))
<span class="help-block">
<strong>{{ $errors->first('name') }}</strong>
</span>
#endif
</div>
<div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
<label for="email">Correo electronico: </label>
<input id="email" type="email" class="form-control" name="email" value="{{ old('email') }}">
#if ($errors->has('email'))
<span class="help-block">
<strong>{{ $errors->first('email') }}</strong>
</span>
#endif
</div>
<div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">
<label for="pwd">Contraseña:</label>
<input id="password" type="password" class="form-control" name="password">
#if ($errors->has('password'))
<span class="help-block">
<strong>{{ $errors->first('password') }}</strong>
</span>
#endif
</div>
<div class="form-group{{ $errors->has('password_confirmation') ? ' has-error' : '' }}">
<label >Confirmar contraseña:</label>
<input id="cpassword" type="password" class="form-control" name="cpassword">
#if ($errors->has('password_confirmation'))
<span class="help-block">
<strong>{{ $errors->first('password_confirmation') }}</strong>
</span>
#endif
</div>
<!-- <input type="hidden" name="_token" value="{{Session::token()}}"> seguridad -->
<button type="submit" class="btn btn-default" id="Submit" >Registro</button>
<div>
<!-- boton login facebook-->
<div>
Facebook</span>
</div>
<!-- boton login google-->
<div>
Google</span>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
js:
function send(event){
event.preventDefault();
$.ajax({
type: 'post',
url: "{{url('/register')}}",
data: {
name: $('#name').val(),
email: $('#email').val(),
password: $('#password').val(),
cpassword: $('#cpassword').val(),
_token: $('#new-user').attr('data-token')
},
success: function (data) {
$("#error").fadeIn(1000, function () {
$("#error").html('<div class="alert alert-danger"><span class="glyphicon glyphicon-info-sign"></span> ' + data + ' !</div>');
});
}
});
}
I don't know how you call the send() js function... so I don't know if you are preventing form submission. Anyway:
Your modal should not been closed on submit the form, except if the form is really being sent and your page reloads.
To prevent your form from being submitted and the current page to reload:
$('#new-user').submit(function(e) { e.preventDefault; });
And to close the modal in your ajax.success function try to use:
$('#Register').modal('hide');
I would Just give you an easy Validation Example. You can use it your own way
and to hide the modal Just add $("#Your Modal ID ").modal("hide"); if your Modal ID is Register then Use $("#Register").modal("hide"); and it will close
function send(event){
event.preventDefault();
if((!$('#name').val())||(!$('#email').val())||(!$('#password').val()))
{
alert("Please Fill All The Details !")
}
else{
$.ajax({
type: 'post',
url: "{{url('/register')}}",
data: {
name: $('#name').val(),
email: $('#email').val(),
password: $('#password').val(),
cpassword: $('#cpassword').val(),
_token: $('#new-user').attr('data-token')
},
success: function (data) {
$("#error").fadeIn(1000, function () {
$("#error").html('<div class="alert alert-danger"><span class="glyphicon glyphicon-info-sign"></span> ' + data + ' !</div>');
});
$("#Your Modal ID ").modal("hide");
}
});
}
}
Related
My code uses a modal for form display, and I want to make the modal unlock when validation is active.
but after i add some javascript function line, it still doesn't work.
My Modal
<div class="modal fade" id="passwordModal{{Auth::user()->id}}">
<div class="modal-dialog modal-lg-6">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="passwordModal">Update Password</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="{{ route('password.update') }}" method="POST" enctype="multipart/form-data">
#csrf
<div class="content">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<input name="current_password" type="password" id="current_password" placeholder="Curent Password" class="form-control #error('current_password') is-invalid #enderror">
<span class="text-danger" id="current_passwordError"></span>
<div class="invalid-feedback">
#error('current_password')
{{ $message }}
#enderror
</div>
</div>
<div class="form-group">
<input name="password" id="password" type="password" placeholder="New Password" class="form-control #error('password') is-invalid #enderror">
<span class="text-danger" id="passwordError"></span>
<div class="invalid-feedback">
#error('password')
{{ $message }}
#enderror
</div>
</div>
<div class="form-group">
<input name="password_confirmation" type="password" id="password_confirmation" placeholder="Confirm New Password" class="form-control #error('password_confirmation') is-invalid #enderror">
<span class="text-danger" id="password_confirmationError"></span>
<div class="invalid-feedback">
#error('password_confirmation')
{{ $message }}
#enderror
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Update</button>
</div>
</div>
</form>
</div>
</div>
</div>
and my function js
<script>
function openModal() {
$('#passwordModal{{Auth::user()->id}}').modal('show')
}
function storeData() {
var CSRF_TOKEN = $('meta[name="csrf - token"]').sttr('content');
var current_password = $('#current_password').val();
var password = $('#password').val();
var password_confirmation = $('#password_confirmation').val();
$('#current_passwordError').addClass('d-none');
$('#passwordError').addClass('d-none');
$('#password_confirmationError').addClass('d-none');
$.ajax({
type: 'POST',
url: "{{ route('password.update') }}",
data: {
_token: CSRF_TOKEN,
current_password: current_password,
password: password,
password_confirmation: password_confirmation,
},
success: function(data) {
},
error: function(data) {
var errors = data.responseJSON;
if ($.isEmptyObject(errors) == false) {
$.each(errors.errors, function(key, value) {
var ErrorID = '#' + key + 'Error';
$(ErrorID).removeClass("d-none");
$(ErrorID).text(value)
})
}
}
});
}
is my script correct, or is there another way that is more effective.
before I could use ?
is my script correct, or is there another way that is more effective.
before i was able to handle this case in ci-3, but when i used that code in laravel it didn't work, that's why i tried another way and this is the result.
I want to add a button inside my form. it will function as a switch that will hide the elements of 'Sales Price' and show the elements of 'Markup %' and vice versa whenever clicked. (I am planning on doing this in javascript).
however when I add the button, my form gets 422 unprocessable content error.
here is the form inside the modal
<form action="/items/all" enctype="multipart/form-data" method="post" id="add-modal-form">
#csrf
<div class="form-group row border pl-5 m-0">
<label for="item_name" class="col-md-12 col-form-label text-md border pl-0 pl-0 pb-0">Item Name</label>
<input id="item_name" type="text" class="form-control w-50 #error('item_name') is-invalid #enderror" name="item_name" value="{{ old('item_name') }}" required autocomplete="item_name" autofocus>
#error('item_name')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
<div class="form-group row border pl-5 m-0">
<label for="item_net_price" class="col-md-12 col-form-label text-md border pl-0 pb-0">Net Price </label>
<input id="item_net_price" type="text" class="col-md-4 form-control #error('item_net_price') is-invalid #enderror" name="item_net_price" value="{{ old('item_net_price') }}" required autocomplete="item_net_price" autofocus>
#error('item_net_price')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
I want to insert the switch button here
<div class="form-group row border pl-5 m-0">
<label for="markup_percent" class="col-md-12 col-form-label text-md border pl-0 pb-0">Markup %</label>
<input id="markup_percent" type="text" class="col-md-3 form-control #error('markup_percent') is-invalid #enderror" name="markup_percent" value="{{ old('markup_percent') }}" autocomplete="markup_percent" autofocus>
#error('markup_percent')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
<div class="form-group row border pl-5 m-0">
<label for="sales_price" class="col-md-12 col-form-label text-md border pl-0 pb-0">Sales Price </label>
<input id="sales_price" type="text" class="col-md-4 form-control #error('sales_price') is-invalid #enderror" name="sales_price" value="{{ old('sales_price') }}" autocomplete="sales_price" autofocus>
#error('sales_price')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
<div class="form-group row border pl-5 m-0">
<label for="stocks_qty" class="col-md-12 col-form-label text-md border pl-0 pb-0">Stocks Qty</label>
<input id="stocks_qty" type="text" class="col-md-3 form-control #error('stocks_qty') is-invalid #enderror" name="stocks_qty" value="{{ old('stocks_qty') }}" required autocomplete="stocks_qty" autofocus>
#error('stocks_qty')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
<div class="modal-footer">
<button id="submit-btn" type="submit" class="btn btn-primary mr-auto">Add Item</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</form>
here is my jquery
$(document).ready(function(){
$("#add-modal-form").submit(function(e) {
e.preventDefault();
var form = $(this);
var actionUrl = form.attr('action');
var formData = new FormData(this);
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $("meta[name='csrf-token']").attr('content')
}
});
$.ajax({
type: "POST",
url: actionUrl,
data:formData,
cache:false,
contentType: false,
processData: false,
success: function(data)
{
$("#add-modal-form").trigger("reset");
alert(data);
}
});
});
})
I also tried submitting the form via 'submit-btn' (without the switch button) and it returns
Uncaught TypeError: Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'.
$("#submit-btn").click(function(e) {
e.preventDefault();
var form = $('#add-modal-form');
var actionUrl = form.attr('action');
var formData = new FormData('#add-modal-form');//also tried using variable form here```
As I am new in ajax/jquery and javascript, what would be my best course of action?
laravel
I'm struggling to put the result of two concatme fields in another field input.
I would like to put the results of response in the email field input.
The thing I would like to achieve is to make it easier for the user to log in to the system without putting the whole email address john#box.domain.com.
here is the code so far.
#extends('layouts.app')
#section('content')
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
#include('auth/banner')
<div class="panel panel-default panel-shaded">
<div class="panel-body">
#action('login_form.before')
<form class="form-horizontal margin-top" method="POST" action="{{ route('login') }}">
{{ csrf_field() }}
<div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
<label for="email" class="col-md-4 control-label">{{ __('Email Address') }}</label>
<div class="col-md-6">
<!-- SCRIPT -->
<script type="text/javascript">
function concatme()
{
var num1 = document.getElementById("num1").value;
var num2 = document.getElementById("num2").value;
document.getElementById("response").innerText = num1 + '' +num2;
}
</script>
<!-- FIN SCRIPT -->
<!---- INICIO---->
<input type="text" name="num1" class="form-control" id="num1" placeholder="USER">
<input type="text" name="num2" class="form-control" id="num2" value="#box.domain.com" placeholder="Number 2">
<!---FIN-->
<!-- RESUTLADO PREVIEW -->
<p id="response"></p>
<!-- RESULDADO PREVIEW -->
<input id="email" type="email" class="form-control" name="email" value="{{ old('email') }}" required autofocus>
#if ($errors->has('email'))
<span class="help-block">
<strong>{{ $errors->first('email') }}</strong>
</span>
#endif
</div>
</div>
<div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">
<label for="password" class="col-md-4 control-label">{{ __('Password') }}</label>
<div class="col-md-6">
<input id="password" type="password" class="form-control" name="password" required>
#if ($errors->has('password'))
<span class="help-block">
<strong>{{ $errors->first('password') }}</strong>
</span>
#endif
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
<label class="checkbox">
<input type="checkbox" name="remember" {{ old('remember') ? 'checked' : '' }}> {{ __('Remember Me') }}
</label>
</div>
</div>
<div class="form-group">
<div class="col-md-8 col-md-offset-4">
<button type="submit" onclick="concatme()" class="btn btn-primary">
{{ __('Login') }}
</button>
#if (Eventy::filter('auth.password_reset_available', true))
<a class="btn btn-link" href="{{ route('password.request') }}">
{{ __('Forgot Your Password?') }}
</a>
#endif
</div>
</div>
</form>
<p>Hola</p>
#action('login_form.after')
</div>
</div>
</div>
</div>
</div>
#endsection
I think its working but you are not able to see it because you have use form and called javascript function on submit button.
What happens is its sending request to given route and refreshing page thats make paragraph tag to empty again. Remove type submit from submit button and then confirm if its working or not.
validations not working for checking empty fields
while clicking create button no message is alerting
and console is clear not showing any error
my Jquery code:
var assign_report_form = $('#assign_report_form');
$('#create').on('click', function(){
var source_id = $('#src_id option:selected').text();
var username = $('#username').val();
var email = $('#email').val();
var query_name = $('#query_name').val();
var channel = $('#channel').val();
var condition = $('#condition').val();
if((source_id =="")||(username == "")||(email == "")||(query_name == "")||(channel == "")||(condition == "")){
$('#error_message').show().delay(5000).fadeOut();
}
else{
// var data = {'source_id': source_id,
// 'username':username,
// 'email':email,
// 'query_name':query_name,
// 'channel': 'email',
// 'condition': condition
// }
// console.log('data',data)
$.ajax({
url:'/add_report/',
type:'POST',
data:{'source_id': source_id,
'username':username,
'email':email,
'query_name':query_name,
'channel': 'email',
'condition': condition
},
success: function(res){
if(res =='success')
// $('#Add_modal').modal('toggle');
// $('#success_message').show().delay(5000).fadeOut();
// $("input[type=text],input[type=email],select").val("");
// }
// else{
// $('#error_message').show().delay(5000).fadeOut();
// }
console.log('form saved..')
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(errorThrown)
}
})
event.preventDefault();
}
});
});
validations not working for checking empty fields
while clicking create button no message is alerting
and console is clear not showing any error
Here is the html code:
<button type="button" data-toggle="modal" data-target="#Add_modal" class="btn btn-secondary" id="add_row" style="margin-right: 10px;">Add</button>
<!-- Add New Report Model -->
<div class="modal fade" id="Add_modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h3 class="modal-title" id="lineModalLabel">Assign New Report</h3>
</div>
<div class="modal-body">
<!-- content goes here -->
<div class="alert alert-warning" id="#error_message" style='display:none;'>
<strong>Error!</strong>Please fill Empty fields
</div>
<form id="assign_report_form">
{% csrf_token %}
<!-- <input type="hidden" id="src_id" value="{{ source_id }}"/> -->
<div class="form-group">
<label for="username">Source ID</label>
<select id="src_id" class="form-control" name="source_id">
{% for source in sources %}
<option value="{{source_id}}" selected>{{ source.id }}</option>
{% endfor %}
</select>
</div>
<div class="form-group">
<label for="username">Username:</label>
<input type="text" class="form-control" name="username" id="username" placeholder="Username">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" name="email" id="email" placeholder="Email">
</div>
<div class="form-group">
<label for="queryname">Query_Name</label>
<input type="text" class="form-control" name="query_name" id="query_name" placeholder="Query_Name">
</div>
<div class="form-group">
<label for="channel">Channel</label>
<input type="text" class="form-control" name="channel" id="channel" placeholder="Channel">
</div>
<div class="form-group">
<label for="condition">Condition</label>
<input type="text" class="form-control" name="condition" id="condition" placeholder="Condition">
</div>
<input type="button" id="create" class="btn btn-primary" value='Create'/>
</form>
</div>
</div>
</div>
In your html code you need to omit the "#" in id="#error_message" and write id="error_message" instead.
You should always use $('<dropdown selector>').val();, like in your case.
var source_id = $('#src_id option').val();
This will work always for select elements.
I want to close the modal when the callback is success. Before I use ng-click with data-dismiss="modal" to close my modals.
How to solve this?
html
<form ng-submit="vm.trigTimeOut()">
<h6>
<label>
<strong>Time Out </strong>
</label>
</h6>
<h6>
<strong>{{ vm.time.timeOut | date: 'hh:mm:ss a' }}</strong>
</h6>
<h6 class="mb-1 row timelist">
<img ng-src="{{ vm.photo.photo || 'http://www.cdn.innesvienna.net//Content/user-default.png'}}" alt="img" class="img-circular-big">
<p class="selectedName text-capitalize">
<strong>{{ vm.userlistData2.firstname + " " + vm.userlistData2.lastname }}
</strong>
</p>
</h6>
<div class="form-group">
<label for="exampleInputEmail1">
<strong>Password
<span style="color: red">*</span>
</strong>
</label>
<input type="password" name="password" class="form-control form-control-danger" id="password" placeholder="Password" required
ng-model="vm.userData2.password">
<small id="emailHelp" class="form-text text-muted">Enter your password</small>
</div>
<button type="submit" class="btn btn-danger btn-raised btn-block" ng-disabled="credentials.$invalid">
<strong> proceed</strong>
</button></form>
controller
userService.timeOut(vm.time).then(function(data) {
if (data.data.success) {
console.log('success');
userService.updateUserV2(updateData).then(function(data) {
getUsers();
//close modal here
logger.success('Successfully Timed Out!');
vm.userData2 = {};
});
} else {
console.log('error');
}
});
NOTE: I'm not using ui-bootstrap.