i have used onClick method to confirm update for my Bootstrap form. but when i click create button it popup the confirm message without going to validation.
wht i want is if user click create button first it will show the required field validation and after all success only confirm popup should display..
please advice
<form data-toggle="validator" class="form-horizontal" role="form" method="POST"
action="{{ action('Admin\UserController#store') }}">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<div class="form-group">
<div class="col-md-12">
<label class="control-label popup-label">Full Name</label>
<input required type="text" class="form-control" name="full_name"
value="{{ old('full_name') }}">
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<label class="control-label popup-label">Username</label>
<input required type="text" class="form-control" name="username"
value="{{ old('username') }}">
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<label class="control-label popup-label">Password</label>
<input pattern=".{5,10}" required title="5 to 10 characters"
type="password" class="form-control"
name="password" value="{{ old('password') }}">
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" onclick="return confirm('Do you want to create this admin?');">Create</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</form>
Your create button is of submit type, its default action is to submit the form. Make it of type button and use the below function:
<button type="button" class="btn btn-primary" onclick="createBtn();">Create</button>
<script>
function createBtn(){
if(confirm('Do you want to create this admin?')){
document.getElementsByTagName("form")[0].submit();
}
}
</script>
I presume you are using the Bootstrap Validator plugin: http://1000hz.github.io/bootstrap-validator/
This plugin provides a way to know when the form has been validated by providing you with an event you can listen on.
('#form').validator().on('validate.bs.validator', function (e) {
console.log('validated.');
// perform confirm and other post-validation tasks...
confirm('Do you want to create this admin?');
}
Related
I have created a modal. Inside a modal is a form. I have used this modal in Two pages.
When i click on submit in the modal-form on the second page it redirects to the first page.
I don't want that to happen. I want it to redirect to its own page.
<form action="{{route('asd')}}" method="post">
<div class="form-group row">
<label for="procurement_name" class="col-md-3 col-form-label text-md-rigth">PROCUREMENT MODE
</label>
<input id="procurement_name" type="text" name="procurement_name" class="col-md-9 form-control" form="sub-form" required>
</div>
<div class="form-group row justify-content-around">
<button type="submit" class="btn btn-primary btn-block" form="sub-form" style="font-size: 25px;">SAVE PROCUREMENT MODE</button>
</div>
</form>
Try like this
just add one hidden input
<input type="hidden" name="redirectUrl" value="www.google.com">
and base upon that you can redirect from controller
<form action="{{route('asd')}}" method="post">
<input type="hidden" name="redirectUrl" value="www.google.com">
<div class="form-group row">
<label for="procurement_name" class="col-md-3 col-form-label text-md-rigth">PROCUREMENT MODE
</label>
<input id="procurement_name" type="text" name="procurement_name" class="col-md-9 form-control" form="sub-form"
required>
</div>
<div class="form-group row justify-content-around">
<button type="submit" class="btn btn-primary btn-block" form="sub-form" style="font-size: 25px;">SAVE
PROCUREMENT MODE</button>
</div>
</form>
inside Controller
retrun redirect($request->redirectUrl) // then you can redirect
Thanks Everyone but i have solve my problem..
switch ($request->redirectUrl){
case 'procurement':
return redirect(route('procurement.index'));
break;
default:
return redirect(route('purchaseOrder.create'));
break;
}
How to get a formId that is generated by using a jsp using jquery?
<c:url var="updateSubUserDetails" value="/employer/recruiters/updateSubUserDetails"/>
<form id="updateform${subUser.employerId}" action="${updateSubUserDetails}" method="post" >
<div class="modal-body">
<input type="hidden" name="subUserId" value="${subUser.employerId}"/>
<div class="form-group">
<input type="text" id="subUserName${subUser.employerId}" name="subUserName" class="form-control " value="${subUser.firstName}" placeholder="Edit Sub User Name"/>
</div>
<div class="form-group">
<input type="text" id="subUserEmail${subUser.employerId}" name="subUserEmail" class="form-control " value="${subUser.emailId}" onchange="checkMail(${subUser.employerId})" placeholder="Edit Email"/>
</div>
<span id="avialabilityMessage${subUser.employerId}"></span>
<div class="form-group">
<input type="text" id="subUserMobile${subUser.employerId}" name="subUserMobile" class="form-control " value="${subUser.mobileNumber}"placeholder="Edit Contact No"/>
</div>
<sec:csrfInput/>
<div class="modal-footer">
<input type="button" id="muEditButtonID" onclick="updateSubUserDetails(${subUser.employerId})" class="btn btn-warning btn-lg glyphicon glyphicon-ok-sign" value="Update">
</div>
</div>
</form>
How to get above dynamically generated form id in javascript jquery? Please assist me.
//if you sure there is only one form
document.forms[0]
//else
document.querySelector('[id^="updateform"]')
so, if you want to get id just add .id
//if you sure there is only one form
document.forms[0].id
//else
document.querySelector('[id^="updateform"]').id
I am trying to send two files/images in a form but request is stalled. It is always pending. In my local VM Box it works but on server the problem that i mentioned is occurred. I checked out php version, jQuery version and they are all same with my local. What is the problem?
EDIT 1: Here is form:
<form method="POST" id="package-create-form" action="/admin/packages/pack">
<div class="form-group">
<label for="image" class="bold">IMAGE</label>
<input type="file" class="form-control" id="image" name="image">
</div>
<div class="form-group">
<label for="map-image" class="bold">MAP IMAGE</label>
<input type="file" class="form-control" id="map-image" name="map_image">
</div>
<div class="text-right">
<input type="hidden" name="_token" value="{{csrf_token()}}">
<button type="button" class="btn btn-danger" id="cancel-button"
data-href="/admin/packages/pack"><i class="fa fa-arrow-left"></i>Back</button>
<button type="submit" id="store-btn2"
class="btn btn-primary">Forward<i class="fa fa-arrow-right"></i>
</button>
</div>
</form>
First of all you have to write correct enctype for form.
This is enctype="multipart/form-data" for images. It's required
And second one, if you'd like to upload more than one image, you have to use tag multiple in your input type="file".
To sum up:
<form method="POST" id="package-create-form" action="/admin/packages/pack" enctype="multipart/form-data">
and
<input type="file" class="form-control" id="map-image" name="map_image" multiple>
More about enctype
I have a classic form that submits data to a controller. Nothing special until here.
The thing is I want a second button, let's say "Save and Exit" that I want to also submit and redirect to home page.
How could I do that? I guess this includes a little javascript for checking?
I just can't wrap my head around it. Thank you!
<form method="POST" action="link/here" id="main_form" class="form-horizontal">
<input name="_token" value="JDtRMqc4aRFlK4QFzDPRTxKvNxIj5EnoLOceOUBT" type="hidden">
<div class="box-body">
<div class="form-group">
<label for="url" class="col-sm-3 control-label">Figura</label>
<div class="col-sm-9">
<input class="form-control" id="Figura" name="figura" placeholder="Figura" value="" type="text">
</div>
</div>
<div class="form-group">
<label for="url" class="col-sm-3 control-label">Parcela</label>
<div class="col-sm-9">
<input class="form-control" id="Parcela" name="parcela" placeholder="Parcela" value="" type="text">
</div>
</div>
<div class="form-group">
<label for="url" class="col-sm-3 control-label">Rand</label>
<div class="col-sm-9">
<input class="form-control" id="Rand" name="rand" placeholder="Rand" value="" type="text">
</div>
</div>
<div class="form-group">
<label for="url" class="col-sm-3 control-label">Nr. Locuri</label>
<div class="col-sm-9">
<input class="form-control" id="Locuri" name="locuri" placeholder="Locuri" value="" type="text">
</div>
</div>
<div id="locuri_div" class="col-sm-offset-1"></div>
<div class="pull-right">
<button type="submit" class="btn btn-success">Salveaza</button>
</div>
<div class="pull-left">
Inapoi
</div>
</div>
<!-- /.box-body -->
</form>
your current button :
<button type="submit" name="check" value="0" class="btn btn-success">Save</button>
add a new one:
<button type="submit" name="check" value="1" class="btn btn-success">Save and Exit</button>
then in your save.php do:
if($_POST['check'] == 0){
//redirect to page
}
else{
//redirect to home
}
Give each button a name and a value. In your controller (client-side JS is the wrong tool for this), test the name and then redirect based on that.
For example:
<button name="action" value="save">Save</button>
<button name="action" value="save_and_go_home">Save & Go Home</button>
And then (to use expressjs as an example):
app.post('/here', function (req, res) {
// Do everything else you want to do with the data
// Then
var action = req.body.action;
if (action === "save_and_go_home") {
res.redirect("/");
} else {
res.send('Whatever you were sending before')
}
});
I have a Multi forms that contain some inputs
<form class="form" role="form" onsubmit="completeSave()">
<div class="form-body">
<div class="form-group">
<label>نام محتوا</label>
<input type="text" class="form-control" name="name"
value="{{$media->name}}">
</div>
<div class="form-actions">
<button type="submit" id="{{$media->id}}" class="btn blue">ارایه</button>
</div>
</form>
<form class="form" role="form" onsubmit="completeSave()">
<div class="form-body">
<div class="form-group">
<label>نام محتوا</label>
<input type="text" class="form-control" name="name"
value="{{$media->name}}">
</div>
<div class="form-actions">
<button type="submit" id="{{$media->id}}" class="btn blue">ارایه</button>
</div>
</form>
I want to get value of inputs on submitting form I tried this code but it didnt worked
function completeSave() {
event.preventDefault();
var thisForm = $(this);
console.log(thisForm.find('input[name="name"]').val())
}
it returns undefined in console
you are using jQuery for this case.
You need to import your jQuery then use below function
jQuery can be found at
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
function completeSave(e) {
event.preventDefault();
var thisForm = $(e).find("[name=name]");
console.log(thisForm.val());
}
FORM
<form class="form" role="form" onsubmit="completeSave(this)"> <!-- add this -->
<div class="form-body">
<div class="form-group">
<label>نام محتوا</label>
<input type="text" class="form-control" name="name"
value="{{$media->name}}">
</div>
<div class="form-actions">
<button type="submit" id="{{$media->id}}" class="btn blue">ارایه</button>
</div>
</form>
use this java script code
function completeSave() {
event.preventDefault();
console.log($("#name").val());
}
but add an id on text input as -
<input type="text" class="form-control" name="name" id="name"
value="{{$media->name}}">
HTML forms
<form class="form" role="form" id="form1">
<div class="form-body">
<div class="form-group">
<label>نام محتوا</label>
<input type="text" class="form-control" name="name"
value="{{$media->name}}">
</div>
<div class="form-actions">
<button type="button" id="{{$media->id}}" class="btn blue" onclick="completeSave("form1");">ارایه</button>
</div>
Scripts
function completeSave(formId) {
console.log($("#"+formId+' input[name="name"]').val())
}
Hope it helps :)
fist i assume you are using jquery
solution 1
the keyword this only evaluates to the form if the completeSave function
is called via jquery's submit event, so for this solution, you don't need the completeSave function on the form's HTML tag
$('form').submit(function(event) {
event.preventDefault();
var thisForm = $(event.target);
console.log(thisForm.find('input[name="name"]').val())
})
solution 2
you should pass the event argument to the completeSave function located on onsubmit attribute of form's HTML tag
ex: <form onsubmint="completeSave(event)">
since the this keyword doesn't evaluate to the form, you gotta select it manually
function completeSave(event) {
event.preventDefault();
var thisForm = $(event.target);
console.log(thisForm.find('input[name="name"]').val())
}
and the input[name="name"] will be the one whos form is submited
Please try this one:
For sure you should add unique id to your forms
<form class="form" role="form" id="form1" onsubmit="completeSave(form1)">
<div class="form-body">
<div class="form-group">
<label>نام محتوا</label>
<input type="text" class="form-control" name="name"
value="{{$media->name}}">
</div>
<div class="form-actions">
<button type="submit" id="{{$media->id}}" class="btn blue">ارایه</button>
</div>
</form>
<form class="form" role="form" id="form2" onsubmit="completeSave(form2)">
<div class="form-body">
<div class="form-group">
<label>نام محتوا</label>
<input type="text" class="form-control" name="name"
value="{{$media->name}}">
</div>
<div class="form-actions">
<button type="submit" id="{{$media->id}}" class="btn blue">ارایه</button>
</div>
</form>
and your javascript code could look like this:
function completeSave(form) {
event.preventDefault();
var input = $("#" + form + " :text");
console.log(input.val());
}