I have a form. I need to activate when click the submit button. how can id do this in laravel blade.
my form
<form action="{{ route('backend.tasks-send-email.store') }}" method="POST">
{{ csrf_field()}}
<label for="propertyName">Email To</label>
<input class="form-control" id="editteamName" name="teamName" type="text" id="teamName" required="true" value="" disabled>
<label for="maker-content">Message</label>
<textarea id="maker-content" name="emailContent" ></textarea>
<button type="submit" class="btn btn-primary" id="submit">button</button>
</form>
Javascipt codes
$(document).on('click', '[#submit]', function (e) {
e.preventDefault();
var data = $(this).serialize();
swal({
title: "Are you sure?",
text: "Do you want to Send this email",
type: "warning",
showCancelButton: true,
confirmButtonText: "Yes, send it!",
cancelButtonText: "No, cancel pls!",
}).then(function () {
swal(
'Success!',
'Your email has been send.',
'success'
)
});
return false;
});
Try this one. in you're form add id attribute.
in your javascript when form with this id attribute is submit the sweet alert is activated.
Form
<form action="{{ route('backend.tasks-send-email.store') }}" method="POST" id="form">
{{ csrf_field()}}
<label for="propertyName">Email To</label>
<input class="form-control" id="editteamName" name="teamName" type="text" id="teamName" required="true" value="" disabled>
<label for="maker-content">Message</label>
<textarea id="maker-content" name="emailContent" ></textarea>
</form>
javascript
$(document).on('submit', '[id^=form]', function (e) {
e.preventDefault();
var data = $(this).serialize();
swal({
title: "Are you sure?",
text: "Do you want to Send this email",
type: "warning",
showCancelButton: true,
confirmButtonText: "Yes, send it!",
cancelButtonText: "No, cancel pls!",
}).then(function () {
$('#form').submit();
});
return false;
});
Related
I am using SweetAlert2. I want when user click on Reset button a popUp of SweetAlert appears for confirmation. I had done this already.
HTML
<form id="storyForm" action="ephp/storyPublish.php" method="POST">
<input type="text" name="userName" />
<input type="Email" name="userEmail" />
<button type="submit">Publish</button>
<button type="reset" class="model_img" id="sa-warning">Reset</button>
</form>
JS
$("#storyForm").on('reset', function(e) {
var form = $(this);
e.preventDefault();
swal({
title: "Are you sure?",
text: "Do you really want to reset?",
type: "warning",
showCancelButton: true,
confirmButtonColor: '#DD6B55',
confirmButtonText: 'Go on!',
cancelButtonText: "Ops no!",
}).then(function(isConfirm) {
swal({
title: 'Success!',
text: 'Invoice created! Go to the invoice tab to pay it.',
type: 'success'
}, function() {
form.reset();
});
},function(dismiss) {
if(dismiss == 'cancel') {
swal("Cancelled", "Invoice not created!", "error");
}
});
});
PopUp is appearing but form is not reseting, what's wrong with this Javascript?
Here is the Fiddle
Hi I was able to get your form to reset but not using your form.reset() function, I was able to get it to work by giving the inputs ids and then handling the reset using sweetalerts result.
HTML
<form id="storyForm" action="ephp/storyPublish.php" method="POST">
<input type="text" name="userName" id="userName" /> <!--added the id here-->
<input type="Email" name="userEmail" id="userEmail" /> <!--added the id here-->
<button type="submit">Publish</button>
<button type="reset" class="model_img" id="sa-warning">Reset</button>
</form>
JavaScript
$("#storyForm").on('reset', function(e) {
var form = $(this);
e.preventDefault();
swal({
title: "Are you sure?",
text: "Do you really want to reset?",
type: "warning",
showCancelButton: true,
confirmButtonColor: '#DD6B55',
confirmButtonText: 'Go on!',
cancelButtonText: "Ops no!",
}).then((result) => {
if (result.value) {
$("#userName").val("");
$("#userEmail").val("");
swal(
'Reset!',
'Your form has been reset.',
'success'
)
/*swal({
title: 'Success!',
text: 'Invoice created! Go to the invoice tab to pay it.',
type: 'success'
});*/
// result.dismiss can be 'cancel', 'overlay',
} else if (result.dismiss === 'cancel') {
swal("Cancelled", "Invoice not created!", "error");
}
});
});
NOTE - I commented out your Success swal as it wasn't adding an invoice but if you want it to do so just un comment it and remove the sweetalert above it.
Here is a jsFiddle
I hope this helps good luck!
I make button action on every data from table row. every row produces using foreach laravel blade template. the event will trigger a Javascript action to delete the data. but on my case the button only work on first row data.
here my Javascript and html code :
function hapusFaskes(kode){
var kodeStr = kode.toString();
var mes = confirm('Yakin Faskesnya mau di Hapus?');
alert(kode);
if (mes == true){
$.ajax({
headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
url:'{{url('deleteFaskes')}}'+'/'+kode,
type:'get',
success: function (r){
console.log(r);
alert(r);
location.reload();
}
});
}
}
<tbody id="hasil-tabel">
#foreach ($faskes as $val)
<tr>
<td>{{$val->kode}}</td>
<td>{{$val->nama}}</td>
<td>{{$val->jenis}}</td>
<td>{{$val->alamat}}</td>
<td>{{$val->notelp}}</td>
<td>{{$val->jambuka}}</td>
<td>
<a href="{{url('editfaskes').'/'.$val->kode}}" class="btn btn-default" >Edit</a>
Hapus
</td>
</tr>
#endforeach
</tbody>
I don't know if there are something wrong on my code, if you know something wrong, please inform me and that will be a big help for me if you know something wrong on my code. thanks
Try using the below code with form action along with sweet alert for confirmation.
<form action="{{ url('deleteFaskes/'. kode) }}" method="POST" class="btn-inblock-laravel">
{!! method_field('delete') !!}
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<a class="btn btn-danger btn-icon btn-xs tip" type="button" onclick="commonDelete(this)"><i class="icon-remove3"></i></a>
</form>
// include sweet alert js in assets folder
<script src="{{ asset('assets/js/sweetalert.min.js') }}"></script>
<script>
function commonDelete(element) {
swal({
title: "Are you sure?",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
},
function () {
element.parentElement.submit();
setTimeout(function () {
swal({
title: "Deleted!",
text: "",
type: "success",
showConfirmButton: false
});
}, 2000);
});
}
</script>
function confirmdelete()
{
return swal({ title: 'Are you sure?',
text: 'You will not be able to recover this imaginary file!',
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!',
closeOnConfirm: false },
function() {
swal( 'Deleted!',
'Your file has been deleted.',
'success' );
});
}
<form action="<?=$site_url?>admin/islemler/delete.php" method="post" class="form-inline" onsubmit="return confirmdelete()">
<input type="button" id="<?=$calismalarimiz['id']?>" class="btn btn-warning btn-xs guncelle" value="Güncelle"/>
<input type="hidden" name="sil<?=$calismalarimiz['id']?>" value="<?=$calismalarimiz['id']?>"/>
<input type="submit" id="sil<?=$calismalarimiz['id']?>" class="btn btn-danger btn-xs" value="Sil"/>
</form>
if I click submit button, sweetAlert is show, but before clicking confirm or cancel button, form post delete.php
I'm having a problem where the Ajax is not triggering the respected event.
I have two forms, one visible and one hidden.
In the visible form, the user can enter an email address.
When the user clicks the submit button of the visible form, the default submit is prevented, and through Ajax the email is validated.
If the email address is not valid, an error message will appear.
If the email address IS valid, the submit button of the hidden form should be clicked using JS (in the ajax-success function).
Here is more code for reference:
HTML
Visible Form
<form accept-charset="utf-8" id="contactForm1" style="margin-top:;" action="https://app.getresponse.com/add_contact_webform.html?u=IzDa" method="post">
<input class="wf-input wf-req wf-valid__email" type="text" name="email" data-placeholder="yes" id="email" value="Enter Your Email Here"
onfocus="if (this.value == 'Enter Your Email Here') {this.value = '';}"
onblur="if (this.value == '') {this.value = 'Enter Your Email Here';}"
style="margin-top:0px;" />
<br />
<input type="submit" class="wf-button" name="submit1" value=" " style="display:inline !important; margin-top:-10px !important;" />
</form>
Hidden Form
<form method="post" id="aweber" class="af-form-wrapper" action="http://www.aweber.com/scripts/addlead.pl">
<div style="display:none;">
<input type="hidden" name="meta_web_form_id" value="947846900" />
<input type="hidden" name="meta_split_id" value="" />
<input type="hidden" name="listname" value="awlist3599001" />
<input type="hidden" name="redirect" value="http://www.aweber.com/thankyou.htm?m=default" id="redirect_37ecf313df3b6f27b92c34c2c00ef203" />
<input type="hidden" name="meta_adtracking" value="ibb_test" />
<input type="hidden" name="meta_message" value="1" />
<input type="hidden" name="meta_required" value="email" />
<input type="hidden" name="meta_tooltip" value="" />
</div>
<div id="af-form-947846900" class="af-form"><div id="af-body-947846900" class="af-body af-standards">
<div class="af-element">
<label class="previewLabel" for="awf_field-66127140">Email: </label>
<div class="af-textWrap"><input class="text" id="awf_field-66127140" type="text" name="email" value="" />
</div><div class="af-clear"></div>
</div>
<div class="af-element buttonContainer">
<input name="submitaw" id="submitaw" class="submitaw" type="submit" value="Submit" tabindex="501" />
<div class="af-clear"></div>
</div>
</div>
</div>
<div style="display:none;"><img src="http://forms.aweber.com/form/displays.htm?id=nCzsHCxsnAwM" alt="" /></div>
</form>
JS
Ajax for visible form
$('#contactForm1').click(function(e) {
e.preventDefault();
var email = $('#email').val();
var self = this;
$.ajax({
type: 'POST',
dataType: 'JSON',
url: 'check.php',
data: {
email: email
},
success: function (data) {
if (data.status == 'success') {
self.submit();
} else {
alert('The e-mail address entered is not valid.');
}
}
});
});
So here's how the scenario would be:
User enters email address, and clicks the submit button.
Ajax-call checks whether it's a valid email.
If the email is valid, the Ajax success function of the visible form
first sets the email value of the hidden form
and then triggers the submit button of the hidden form
As said before, STEP 3 isn't working.
use complete instead success
$('#contactForm1').click(function(e) {
e.preventDefault();
var email = $('#email').val();
var self = this;
$.ajax({
type: 'POST',
dataType: 'JSON',
url: 'check.php',
data: {
email: email
},
complete: function(data) {
if (data.status == 'success') {
self.submit();
} else {
alert('The e-mail address entered is not valid.');
}
}
});
});
I am building a new application using dataTables. The tables are called when a menu item is clicked. When I open one of the tables (customers) for the first time, then click the +add button the dialog fires as expected (Which is to say it fires only once).
If I open the customers table a second time and click the +add button, the dialog fires twice. The same happens with the users table. (The same thing happens when using the users table.) Any following call raises the total number of the dialogs that will be created.
How can I set the dialog to fire only once for each newly added table?
(I am working on a localhost with MAMP. If a working example is needed I can upload the application to the server.)
I am using:
jquery 1.7.1
DataTables 1.9.0
jquery.dataTables.editable 2.3.3
jeditable 1.6.2
Yesterday I was busy till 4:00 am. I really can not find any solution.
It likes I am the only one facing this problem.
6 hours on Google couldn't also give me any answer.
Please I need some help.
The dialogbox HTML:
<div class="add_delete_toolbar" />
<!-- Custom form for adding new records -->
<form id="formAddNewUser" action="#" title="Add new user">
<input type="text" name="id" id="id" rel="0" readonly/>
<br /> <br />
<label for="title">Title</label><br />
<select name="title" id="title" class="required input_field" rel="1">
<option selected></option>
<option value="Mister">Mister</option>
<option value="Madam">Madam</option>
</select>
<br /> <br />
<label for="vnaam">Name</label><br />
<input type="text" name="vnaam" id="vnaam" class="required input_field" rel="2" />
<br /> <br />
<label for="anaam">Surname</label><br />
<input type="text" name="anaam" id="anaam" class="required input_field" rel="3" />
<br /> <br />
<label for="adres">Username</label><br />
<input type="text" name="username" id="username" class="input_field" rel="4" />
<br /> <br />
<label for="postcode">Password</label><br />
<input type="text" name="password" id="password" class="input_field" rel="5" />
<br /> <br />
<label for="plaats">Email address</label><br />
<input type="text" name="email" id="email" class="input_field" rel="6" />
<br /> <br />
</form>
the table jquery script:
<script>
$(document).ready(function() {
oTable2= $('#gebruikers').dataTable({
"bProcessing": false,
"bServerSide": true,
"sAjaxSource": "../ajx/gebr/ss_users.php",
"bJQueryUI": true,
"sPaginationType": "full_numbers",
}).makeEditable({
sAddNewRowFormId: "formAddNewUser",
sAddNewRowButtonId: "btnAddNewUser",
sAddNewRowOkButtonId: "btnAddNewUserOk",
sAddNewRowCancelButtonId: "btnAddNewUserCancel",
sUpdateURL: function(value, settings)
{
//return(value); //Simulation of server-side response using a callback function
},
sAddURL: "../ajx/gebr/add_user.php",
sAddHttpMethod: "GET",
sDeleteHttpMethod: "GET",
sDeleteURL: "../ajx/gebr/remove_user.php",
sUpdateURL: "../ajx/gebr/update_user.php",
"aoColumns": [
{
},
{
cssclass: "required" ,
indicator: 'Saving title...',
tooltip: 'Click to select a title',
loadtext: 'loading...',
type: 'select',
onblur: 'cancel',
data: "{'':'Please select...', 'Mister':'Mister','Madam':'Madam'}",
submit:'SAVE'
},
{
cssclass: "required" ,
indicator: 'Saving name...',
tooltip: 'Click to edit name',
type: 'text',
onblur: 'cancel',
loadtext: 'loading...',
submit:'SAVE'
},
{
cssclass: "required" ,
indicator: 'Saving name...',
tooltip: 'Click to edit name',
type: 'text',
onblur: 'cancel',
loadtext: 'loading...',
submit:'SAVE'
},
{
indicator: 'Saving username...',
tooltip: 'Click to edit username',
type: 'text',
onblur: 'cancel',
loadtext: 'loading...',
submit:'SAVE'
},
{
indicator: 'Saving password...',
tooltip: 'Click to edit password',
type: 'text',
onblur: 'cancel',
loadtext: 'loading...',
submit:'SAVE'
},
{
indicator: 'Saving email...',
tooltip: 'Click to edit email',
type: 'text',
onblur: 'cancel',
loadtext: 'loading...',
submit:'SAVE'
}
],
oAddNewRowButtonOptions: { label: "Add...",
icons: {primary:'ui-icon-plus'}
},
oDeleteRowButtonOptions: { label: "Remove",
icons: {primary:'ui-icon-trash'}
},
oAddNewRowFormOptions: { title: 'Add a new user',
show: "blind",
hide: "explode",
modal: true
} ,
sAddDeleteToolbarSelector: ".dataTables_length"
});
});
The menu calling the table:
$('#new_user').click( function(evt){
//prevent loading the data if already loaded
if ($(document).find('#gebruikers').length == 0) {
//remove tabs active class
$(".tabs_links ul li").removeClass("active");
$("#response").load("pages/tmp_users.php");
}
evt.preventDefault();
});
It sounds like the bindings have been created multiple times. Before recreating a new instance of the datatable, destroy the old one. For example:
// where datatable is the global variable you have used to contain the datatable
if (datatable != null) datatable.fnDestroy();
There may be a more performant way of doing this, but try this first.