run click function before submiting default again in jquery - html

im trying to prevent the default action on a button then run my function and after my function is done then run default again, however i dont know how to build my jquery correctly.
here is what i have
/* somewhere else .with--abo class does something that prevents my click function from working */
/* so now when ever i click it i prevent it from running default before my click function */
$(".with-abo").click(function(event) {
event.preventDefault()
$("#sure").click();
$(".table--add-product").submit();
});
$("#sure").click(function(){
$("#confirm").toggleClass("is--hidden");
$("#twpConfirm").click();
});
$("#twpConfirm").click(function(){
alert("deleted")
});
#confirm{
color:red;
}
.is--hidden {
display: none !important;
}
#sure{
margin-top: 10px;
background-color:red;
width:40px;
border: 1px solid;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" title="Sdsd" class="table--add-product add-product--form block-group">
<input type="hidden" name="twpAboAdd" value="1">
<button type="submit" class="btn with-abo is--primary block is--icon-right">
add item to subscription
<i class="icon--arrow-right"></i>
</button>
<input type="hidden" name="__csrf_token" value="iSTHZQdHHpP5iCcNM0u6NvPPHroipp"></form>
<div id="sure" class="btn is--small column--actions-link" title="">
<i class="icon--cross">delete item</i>
</div>
<div class="panel--td column--actions">
<div id="sure" class="btn is--small column--actions-link" title="">
<i class="icon--cross"></i>
</div>
<div id="confirm" class="is--hidden">
<span>
are you sure?
<button id="twpConfirm" type="submit" class="btn column--actions-link">
<i class="icon--check"></i>delete
<input type="hidden" name="noSurcharge" value="1">
</button>
</span>
</div>
<input type="hidden" name="__csrf_token" value="iSTHZQdHHpP5iCcNM0u6NvPPHroipp">
</div>
basically when i click [add item to subscription] i want to automatically click the [delete] button. but how my function is built i trigger the click and then run default again before my trigger function is done.
i was hoping that something like this would work:
$(".with-abo").click(function(event) {
event.preventDefault()
$("#sure").trigger("click", function(){
$("#confirm").toggleClass("is--hidden");
$("#twpConfirm").click();
});
$(".table--add-product").submit();
});
but this is so wrong and dont know how go around it. any suggestion is appreciated.

Related

How to select a box with jQuery but not select the form inside the box?

I have a code where I want the page to close when the box is clicked with the "box-search" class
But even though I said don't consider the form and the elements inside the form, the form will be closed when the form and input are clicked.
$(".box-search *").not('form, form *').click(function() {
$(".box-search").fadeOut();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box-search">
<div class="container" style="font-size: 40px; color: red;">
<button type="submit" class="close-box-search">Close</button>
<form method="get" action="">
<input type="text">
<button type="submit">Search</button>
</form>
</div>
</div>
I found the answer to my question
To select the parent, but not apply to the child
We use the following code
$(".box-search").click(function (e) {
if( $(e.target).hasClass("box-search") || $(e.target).hasClass("container") || $(e.target).hasClass("close-box-search") ){
hideBoxSearch()
}
});

How to do button parallel

I tried so many ways to parallel for those two buttons.Two buttons are parallel if I remove html.beginform. My problem is that I can't remove html.beginform. Please show me the right direction.
html code:
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6">
#using (Html.BeginForm("ExportExcel", "SalesByBranch", FormMethod.Post#*, new { enctype = "multipart/form-data" }*#))
{
<input type="submit" value="Excel" id="btnExcel" class="btn btn-danger btn-sm form-control" onclick=DataCheck(); style="width:80px;height:30px;" />
}
#using (Html.BeginForm("ExportPDF", "SalesByBranch", FormMethod.Post#*, new { enctype = "multipart/form-data" }*#))
{
<input type="submit" value="PDF" id="btnPDF" class="btn btn-danger btn-sm form-control" onclick=DataCheck(); style="width:80px;height:30px;" />
}
</div>
</div>
Photo
Please reply me.
Wrap the buttons inside a div with the following style:
display: inline-block;
So? http://jsfiddle.net/3aowjLc1/
display:inline block
You must add agin your "script".

Using a tag as submit button

How can I use a tag as submit button in my form (Is just matter of design for me and not functionality)
My form
<form action="{{route('wishlist.store')}}" method="post">
{{csrf_field()}}
<input type="text" name="user_id" value="{{Auth::user()->id}}" hidden>
<input type="text" name="product_id" value="{{$product->id}}" hidden>
<button type="submit" class="wish-list">
<i class="fas fa-heart"></i>
</button>
</form>
All the issue I have is that gray box behind my font icon which is caused by <button> so I need to use <a> tag.
I also tried to change my button with a tag and added something like:
$(document).on("click","#sendwish",function(){
$('form').submit(function(evt){
evt.preventDefault();
var url = $('form').attr("action");
var formData = $('form').serialize();
$.post(url, formData, function(response){
console.log(response);
});
});
});
but it didn't work.
any idea?
Perhaps you can just overwrite default styles on the button?
.wish-list {
background: none;
border: none;
padding: 0;
margin: 0;
}
or if need be:
<button style="background: none; border: none; padding: 0; margin: 0;"></button>
Give your a form an ID as well as the link and call the onclick function to then submit the form.
Let's say you have a form called with an ID of SubmitMe and a span / div with the ID of ClickMe.
Example:
document.getElementById("#ClickMe").onclick = function(){
document.getElementById("#SubmitMe").submit();
}
Just so you know this, this will submit what ever is the action on the "SubmitMe" form.

What cause to button working like a submit button?

I have tow buttons inside my form,
one is a submit and the second is a simple button (like cancel button that close the dialog).
Code:
<dialog id="addSubjectDialog" style="width:20%; height:25%;">
<div style="width:100%; hegit:20%;"><h2 style="font-size:100%;"><fmt:message key="add_subject_dialog_title" /></h2></div>
<form action="addSubject" method="post" >
<div style="width:100%; hegit:20%;">
<h2 style="font-size:100%;"><input id="SubjectName" name="SubjectName" style="font-size:100%;text-align: right;"></input> <fmt:message key="insert_subject_name" /> </h2>
</div>
<div style="height: 60px;margin-top:5% ;">
<fmt:message key="save" var="save"/>
<input type="submit" class="btn btn-success" style=" float: left; width:40%; "value="${save}"></input>
<button id="cancelSubSubjectDialog" class="btn btn-warning" style="float: right; width: 40%;" ><fmt:message key="cancel" /></button>
</form>
</div>
</dialog>
the code of the cancel button is in a script:
<script type="text/javascript">
window.onload = function () {
document.getElementById("cancelSubjectDialog").addEventListener('click', function(e) {
e.preventDefault();
document.getElementById("addSubjectDialog").close();
});
document.getElementById("saveSubjectDialog").addEventListener('click', function(e) {
e.preventDefault();
document.getElementById("addSubjectDialog").close();
});
}
function ShowDialog(dialogName) {
selectList();
document.getElementById(dialogName).showModal();
}
</script>
In the onLoad function I set the cancel button action.
*I have another dialog in my page that do the same things and include cancel and save buttons too, and it's working fine.
When I click on the cancel button the "addSubject" is called;
What is wrong in my code? Why does the action is called if I click on cancel button too?

Click outside button to close popup using toggle

I used toggle to make a search form from a button. But I want click outside any position to close search form, not only using button.
HTML
Search
<div class="search_field" style="display:none;">
<form>
<input name="search" class="search" value="" placeholder="Search Item...." type="text" data-theme="e" />
<input type="submit" value="Search" data-mini="false" data-icon="search" data-iconpos="notext" data-theme="c" />
</form>
</div>
Jquery :
$(function() {
$(".opensearch").on('click', tapHandler);
function tapHandler(event) {
$('.search_field').toggle();
$('.search').focus();
}
});
Demo of JsFiddle
Many thanks for your help.
Use the blur event:
$(".search").on("blur",function(){
$('.search_field').toggle();
});
Updated fiddle: JsFiddle demo
[Edit] You might want to check if the new focus is not on the search icon before hiding the field:
$(".search").on("blur",function(){
setTimeout(function(){
var target = document.activeElement;
target = target ? target.id||target.tagName||target : '';
if(target!="INPUT"){
$('.search_field').toggle();
}
}, 1);
});
Better with the id of the button though....
Example: JsFiddle demo
You can do something like
$(function() {
$(".opensearch").on('click', tapHandler);
//add a click handler to the document object
$(document).on('click', function(e) {
//if the click is happening inside the search_field or opensearch elements then don't do anything
if ($(e.target).closest('.search_field, .opensearch').length == 0) {
$('.search_field').hide();
}
});
function tapHandler(event) {
$('.search_field').toggle();
$('.search').focus();
}
});
.search_field {
padding: 10px 10px 0;
position: relative;
}
.search_field .ui-submit {
bottom: -2px;
position: absolute;
right: 18px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Search
<div class="search_field" style="display:none;">
<form>
<input name="search" class="search" value="" placeholder="Search Item...." type="text" data-theme="e" />
<input type="submit" value="Search" data-mini="false" data-icon="search" data-iconpos="notext" data-theme="c" />
</form>
</div>