I have a bootstrap popover element with a form inside.
I do a preventDefault() when the form is submitted but it doesn't actually prevent the submit.
When I don't use the popover and a modal instead it works perfectly.
Here is my HTML:
<div class="hide" id="popover-content">
<form action="api/check.php" class="checkform" id="requestacallform" method="get" name="requestacallform">
<div class="form-group">
<div class="input-group">
<input class="form-control" id="domein" name="name" placeholder="domein" type="text">
</div>
</div><input class="btn btn-blue submit" type="submit" value="Aanmelden">
<p class="response"></p>
</form>
</div>
Here is my JavaScript file where I create the popup (main.js)
$('#popover').popover({
html: true,
content: function() {
return $("#popover-content").html();
}
});
And this is where I do my preventDefault() in an other JavaScript file
$(".checkform").submit(function(e) {
e.preventDefault();
var request = $("#domein").val();
$.ajax({
// AJAX content here
});
});
Why the preventDefault() isn't working?
You're trying to append event handler for .checkform before adding it to DOM. You need to load second javascript file after loading contents html or append event globaly:
$("body").on("submit",".checkform", function(e){
e.preventDefault();
var request = $("#domein").val();
$.ajax({
...
});
You can read more about events binding on dynamic htmls here
Try it like this please:
$(document).on('submit', '.checkform', function(e){
e.preventDefault();
var request = $("#domein").val();
$.ajax({
...
});
It is possible that the popover isn't loaded on page load and is getting generated just when it is needed so you need the document selector.
Because whenever the popover is opened a new dom fragment is created on the fly you may take advantage on this to attach events or manipulate the html itself like you need.
From bootstrap popover docs you need to listen for this event:
inserted.bs.popover: This event is fired after the show.bs.popover event when the popover template has been added to the DOM.
So, my proposal is to avoid the event delegation and attach the event directly to the correct element:
$(function () {
// open the popover on click
$('#popover').popover({
html: true,
content: function () {
return $("#popover-content").html();
}
});
// when the popover template has been added to the DOM
// find the correct element and attach the event handler
// because the popover template is removed on close
// it's useless to remove the event with .off('submit')
$('#popover').on('inserted.bs.popover', function(e){
$(this).next('.popover').find('.checkform').on('submit', function(e){
e.preventDefault();
var request = $("#domein").val();
// do your stuff
$('#popover').trigger('click');
});
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>
<button type="button" class="btn btn-default popover-content" role="button" id="popover">
Click to open Popover
</button>
<div id="popover-content" class="hidden">
<form action="z.html" id="requestacallform" method="GET" name="requestacallform" class="checkform">
<div class="form-group">
<div class="input-group">
<input id="domein" type="text" class="form-control" placeholder="domein" name="name"/>
</div>
</div>
<input type="submit" value="Aanmelden" class="btn btn-blue submit"/>
<p class="response"></p>
</form>
</div>
Thanks for the responses, I was using Meteor and had the same problem. I used #Marcel Wasilewski's response like so...
Template.voteContest.onRendered(function() {
$(document).on('submit', '.keep-vote', function(event){
// Prevent default browser form submit
event.preventDefault();
// Clear all popovers
$("[data-toggle='tooltip']").popover('hide');
});
});
Related
I am trying to get a JS event listener working and not sure if it is or isn't working. I have added an event listener to the form, but even with 'preserve log' enabled, I cannot get a message in my console to confirm my code is working.
I ran a script to target the form id on mouseenter, and this worked fine, so I know the form id can be targetted, but with the 'submit' event, I am not seeing anything in the console.
I have ensured that my script is running after the plugins script.
The form is from a WordPress plugin and I have included the bare bones of the html here.
<form method="post" id="tribe-tickets__registration__form" action="myurl/checkout" data-provider="tribe_wooticket">
<div class="tribe-tickets__registration__grid"></div>
<div class="tribe-tickets__registration__footer">
<div id="tribe-tickets__notice__attendee-registration">
<div class="tribe-common-b2 tribe-tickets-notice__content"></div>
</div>
<button class="tribe-common-c-btn tribe-common-c-btn--small tribe-tickets__item__registration__submit"
type="submit">Save & Checkout</button>
<button class="tribe-common-c-btn" type="submit">Save & Checkout</button>
</div>
</form>
jpformsubmit = document.getElementById('tribe-tickets__registration__form');
jpformsubmit.addEventListener('submit', postGift);
function postGift(e) {
console.log('Helloooo there!!!');
}
I also tried
window.onload = () => {
document.getElementById('tribe-tickets__registration__form').addEventListener('submit', postGift);
};
function postGift(e) {
console.log('Helloooo there!!!');
}
Try adding e.preventDefault() to your postGift() function.
Without it, the form submits, the page reloads, and the console log is cleared.
window.onload = () => {
document.getElementById('tribe-tickets__registration__form')
.addEventListener('submit', postGift);
};
function postGift(e) {
/* add this to prevent submit */
e.preventDefault();
console.log('Helloooo there!!!');
}
<form method="post" id="tribe-tickets__registration__form" action="myurl/checkout" data-provider="tribe_wooticket">
<div class="tribe-tickets__registration__grid"></div>
<div class="tribe-tickets__registration__footer">
<div id="tribe-tickets__notice__attendee-registration">
<div class="tribe-common-b2 tribe-tickets-notice__content"></div>
</div>
<button class="tribe-common-c-btn tribe-common-c-btn--small tribe-tickets__item__registration__submit" type="submit">Save & Checkout</button>
<button class="tribe-common-c-btn" type="submit">Save & Checkout</button>
</div>
</form>
Issue when getting recently clicked button id. Form submit button decorated with fontawesome icons.
Operation:
On body click get button id
Submit form
Concept:
Mouse pointer over button click is working
Issue:
Mouse pointer exactly over button image(example:round arrow icon) click
not working.
Browser Console returning undefined
Any tweaks to make this work? Normally user will attracted by images and they will click over icons only. how fix this?
JSfiddle
Don't use body, only set it to the buttons then.
$(function() {
$('button').on('click', function(e) {
var buttonClicked = $(this).attr('id');
console.log(buttonClicked);
});
});
Working example.
I'm not sure if you want to do more work on the button click. So you could submit the form manually too in the callback. Just change the buttons to type="button" instead of submit and extend the callback:
$(function() {
$('button').on('click', function(e) {
var buttonClicked = $(this).attr('id');
console.log(buttonClicked);
// do your work
// submit the form manually
$("form").submit();
});
});
Working example.
If all you want is the ID of the button that was clicked, why attach the event to the body? I can maybe understand event delegation, but you only have two buttons here. Bind the click handler to both buttons. See http://jsfiddle.net/jvsxo8s0/4/
$(document).ready(function() {
$('button').on('click', function(e) {
target = $(e.target);
buttonclicked = target.attr('id');
console.log(buttonclicked);
e.preventDefault();
});
});
Dont know why you need the id, but you can use the submit() function from jQuery and serialize the form data.
$(function() {
$('#setpolicyform button').on('click', function(e) {
e.preventDefault();
// get button id
var buttonId = $(this).attr('id');
// form data
var formData = $('#setpolicyform').serialize();
console.log(formData);
// check the clicked id
if(buttonId === 'save') {
console.log('save');
} else {
console.log('send');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<form role="form" method="POST" action="#" name="setpolicyform" id="setpolicyform">
<div class='box-body pad'>
<div class="form-group">
<div class="lnbrd">
<textarea class="textarea form-control" placeholder="Enter text ..." name="policyta" style="width: 510px; height: 200px;"></textarea>
</div>
</div>
</div>
<div class="box-footer clearfix">
<button type="button" class="btn btn-danger pull-right" id="save"><i class="fa fa-save"></i> SAVE</button>
<button class="btn btn-success" type="button" id="send"><i class="fa fa-arrow-circle-right fa-lg fa-fw"></i>Send</button>
</div>
</form>
</div>
Use this
$(document).ready(function() {
$('body').on('click', function(e) {
target = $(e.target);
buttonclicked = target.closest("button").attr('id');
console.log(buttonclicked);
});
});
Updated Fiddle is here http://jsfiddle.net/jvsxo8s0/6/
I created a search form, which opens a search field when clicked on search-icon.
So I've turned off the search function so the icon is clickable.
var $searchBtn = $search.find('button');
$searchBtn.on('click', function(e) {
e.preventDefault();
});
But now if I return the search function when I've clicked on the search icon
$('.icon-search'.on('click', function(e)
{
$searchBtn.unbind('click');
});
I can't click on the cross anymore to close the searchfield because it has got the search function again.
So my question is:
is it possible to put on my .icon-cross a e.preventDefault(); on click without it completing the searchfunction first?
HTML Code:
<form method="GET" action="search" class="form-inline">
<div class="input-group">
<input type="search" name="query" id="query" class="form-control" placeholder="'Uw zoekopdracht...">
{/if}">
<span class="input-group-btn">
<button class="btn btn-default icon-search" type="submit"></button>
</span>
</div>
</form>
You use the same button to do two things. You options are to use two different buttons and toggle their display. No worrying about what code is attached since they are separate.
You can add one click event that can handle both tasks
$searchBtn.on('click', function(e) {
e.preventDefault();
if ($(this).hasClass("icon-search")) {
//search logic
} else {
//cross logic
}
});
or you can use event delegation to handle the clicks (which is doing the above check under the covers);
$searchBtn.parent()
.on('click', ".icon-search", function(e) {
//search logic
})
.on('click', ".icon-cross", function(e) {
//cross logic
});
I have the following DOM structure.
<div class="purchase-section">
<div class="purchase">
<input type="submit" id="add-to-cart" class="btn" name="add" value="Add to Cart"> <span class="rc-or">Or</span>
<button class="btn rc-button" id="btn-buy-now" onclick="event.preventDefault(); window.location='https://example.com?productId=681';">Buy Now - 3 installment</button>
</div>
</div>
The button element is added by a script which runs after the page has loaded. I need to change the onclick handler for this button. I tried following but it doesn't work.
$(document).ready(function() {
$('.purchase-section').on('change', '.purchase', function(){
$("#btn-buy-now")[0].onclick = null;
$("#btn-buy-now").click(function() { alert("done") });
});
});
Can anyone please help me with this?
Use $("#btn-buy-now").removeAttr("onclick"); to remove onclick completely and then delegate event to dynamically added element.
$("static_parent").on("event", "dynamic_element", function () {
});
$(".purchase").on("click", "#btn-buy-now", function () {
/* code */
});
Try this:
$(document).ready(function() {
$(".purchase-section").find("#btn-buy-now").removeAttr('onclick');
$(".purchase-section").find("#btn-buy-now").click(function(e) {
e.preventDefault();
alert("done");
});
});
However, it depends on when this element is loaded. You will need to ensure your button is already in the DOM before this script executes, otherwise this may not be effective.
I'm using bootstrap and I want to create a form in a popover. I've done this but I can't type in the textfield of the form. Does anyone know why?
*update It's inside a modal. Outside the modal it works but inside it doesn't...
*update2 Almost there I think. When I open modal and popover, I can't type in the textfield. After I close modal, popover is still open and then I can type in the textfield. So there must be some z-index between the textfield and popup. Real sloppy but I tried input{z-index:9999;} but it didn't work
<a href="#" class="add_nr" data-nummer-id="nr_1" rel="popover">
<div id="add_number" class="popover">
<div class="addnr" id="nr_1">
<form class="form-inline">
<div class="controls">
<input type="text" placeholder="Artist">
</div>
<div class="controls">
<input type="text" placeholder="Number">
</div>
cancel
<button type="submit" class="btn">add number</button>
</form>
</div>
</div>
$(function(){
$('.add_nr').on('click', function(event){
var $this = $(this);
event.preventDefault();
$('.add_nr').not($this).popover('hide');
$this.popover('show');
}).popover({
trigger: 'manual',
placement: 'bottom',
content: function(e) {
var $this = $(this),
nr_id = $this.data('nummer-id');
return $('#' + nr_id + '.addnr').html();
}
})
});
When a Modal is launched it maintains focus upon itself, preventing the elements in the form from obtaining focus. A simple workaround would be to disable the listener when the modal launches:
$('body').on('shown','.modal', function() {
$(document).off('focusin.modal')
});
For anyone coming to this issue (popovers with forms not working modals) and who are using Bootstrap 4, you can fix this by using data-modal="false" on the button/controller that opens the modal. E.g.:
<button type="button" class="btn" data-toggle="modal" data-target="#new" data-focus="false">
If you're opening your modal using JS, you can pass in a focus option. Full docs on the options here