Removing search action when clicked (without action being completed) - javascript

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
});

Related

How to Make a button disabled until a hyperlink is clicked

I'm working on a project where a button needs to be disabled until a hyperlink is clicked and a checkbox is checked. I currently have the checkbox part down using jQuery:
$('#tc-checkbox').change(function(){
if($(this).is(":checked")) {
$('#tc-btn').removeClass('tc-disable');
} else {
$('#tc-btn').addClass('tc-disable');
}
});
But I also need to set it up so the class of tc-disable is still on the button until an anchor tag is clicked as well. I've never really done this before where a link needs to be clicked before removing a class and couldn't find what I was looking for as I was Googling for an answer.
Hope the code below helps. I also added console out put so you can track the value. Another option is use custom attribute on link element instead of javascript variable to track if the link is clicked.
var enableLinkClicked = false;
$('#tc-link').click(function() {
enableLinkClicked = true;
console.log("link clicked\ncheckbox value: " + $($('#tc-checkbox')).is(":checked"));
console.log("link clicked: " + enableLinkClicked);
if ($('#tc-checkbox').is(":checked")) {
$('#tc-btn').removeClass('tc-disable');
}
});
$('#tc-checkbox').change(function() {
console.log("checkbox clicked\ncheckbox value: " + $(this).is(":checked"));
console.log("link clicked: " + enableLinkClicked);
if ($(this).is(":checked") && enableLinkClicked) {
$('#tc-btn').removeClass('tc-disable');
} else {
$('#tc-btn').addClass('tc-disable');
}
});
#tc-btn.tc-disable {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<button id="tc-btn">My Button</button>
<br/>
<a id="tc-link" href="javascript:void(0);">Link to enable button</a>
<br/>
<input type="checkbox" id="tc-checkbox" />
If the page is refreshing or taking you to a different page when you click the hyperlink, you will want to look into sessionStorage. When the hyperlink is clicked you will want to set a sessionStorage variable and when the page loads you want to check that variable to see if it is populated. If the variable is populated, enable the button.
Set the variable.
sessionStorage.setItem('key', 'value');
Get the variable
var data = sessionStorage.getItem('key');
If you need to re-disable the button you can clear the session storage and reapply the disabled class.
sessionStorage.clear();
You can learn more about session storage here.
If the page does not refresh you could just set an attr on the link when it is clicked like so.
$('#tc-link').on('click', function() {
$(this).attr('clicked', 'true');
});
Then when the checkbox is checked you can check this in your function.
$('#tc-checkbox').change(function(){
if($(this).is(":checked") && $('#tc-link').hasAttr('clicked')) {
$('#tc-btn').removeClass('tc-disable');
} else {
$('#tc-btn').addClass('tc-disable');
}
});
These are just some solutions I could think of off the top of my head. Hope this helps.
Maybe this is better for you. First you make an .on('click' event listener on the anchor element, then, if the checkbox is checked enable the button. I added the else statement to disable the button if a user clicks the link and the checkbox is not set for an example. In this example you don't need the classes.
But if you needed to keep the the classes then you would replace the $('#tc-btn').prop('disabled', false); with $('#tc-btn').addClass() or .removeClass()
$( '#theLink' ).on( 'click', function(e)
{
e.preventDefault();
if($('#tc-checkbox').is(':checked'))
{
$('#tc-btn').prop('disabled', false);
$('#tc-btn').val('Currently enabled');
}
else
{
$('#tc-btn').val('Currently disabled');
$('#tc-btn').prop('disabled', true);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="tc-checkbox" />
This link will enable the button
<input type="button" id="tc-btn" value="Currently disabled" disabled="disabled"/>
Here a much more simple solution and it handles the state of the button if they uncheck the "I Accept" checkbox. It is pretty easy to implement. I just used Bootstrap to pretty up the example.
//Handles the anchor click
$("#anchor").click(() => {
$("#anchor").addClass("visited");
$("#acceptBtn").prop("disabled", buttonState());
});
//Handles the checkbox check
$("#checkBx").on("change", () => {
$("#acceptBtn").prop("disabled", buttonState());
});
//Function that checks the state and decides if the button should be enabled.
buttonState = () => {
let anchorClicked = $("#anchor").hasClass("visited");
let checkboxChecked = $("#checkBx").prop("checked") === true;
return !(anchorClicked && checkboxChecked);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
View Terms
</div>
</div>
<div class="row">
<div class="col-md-12">
<label class="form-check-label">
<input class="form-check-input" id="checkBx" type="checkbox" value="">
I accept the terms
</label>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button id="acceptBtn" class="btn btn-success" disabled="disabled">
Ok
</button>
</div>
</div>
</div>
A one-liner solution using Javascript could be:
<input type="submit" id="test" name="test" required disabled="disabled">
<label for="test">I clicked the <a target="_blank" href="https://stackoverflow.com" onclick="document.getElementById('test').disabled=false">link</a>.</label>
Change the type "submit" to "button" or "checkbox" accordingly to your needs.

DataTables search on button click instead of typing in input

I would to know if it is possible to move the search function out of an input for a table modified by DataTables. Currently I have a custom input that executes this function:
<script>
$(document).ready(function() {
var oTable = $('#staffTable').DataTable();
$('#searchNameField').keyup(function () {
oTable.search($(this).val()).draw();
});
})
</script>
the input looks like so:
<label for="searchNameField" class="col col-form-label">Name:</label>
<div class="col-sm-11">
<input type="text" class="form-control ml-0 pl-2" id="searchNameField"
placeholder="Name" autofocus/>
</div>
What I would like to do is move this to a button. What I thought might be possible is the following:
<script>
$(document).ready(function() {
var oTable = $('#staffTable').DataTable();
$('#searchButton').click(function () {
oTable.search($(this).val()).draw();
});
})
</script>
with the button looking like so:
<button id="searchButton" type="button" class="btn btn-sm btn-success" style="width: 150px">
<i class="fa fa-search">
Search
</i>
</button>
however when I click on the button this does not work. In typing this question I have realised that this is probably because when I click the button, it does not know where to get the filter text from to actually filter the table.
Is there a way I can have a button click that references the input, that then goes and filters the table?
You're right, you need to redefine $(this), which now refers to the button, not the search box:
$(document).ready(function() {
var oTable = $('#staffTable').DataTable();
$('#searchButton').click(function () {
oTable.search($("#searchNameField").val()).draw();
});
// EDIT: Capture enter press as well
$("#searchNameField").keypress(function(e) {
// You can use $(this) here, since this once again refers to your text input
if(e.which === 13) {
e.preventDefault(); // Prevent form submit
oTable.search($(this).val()).draw();
}
});
});

preventDefault form submit not working in bootstrap popover

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');
});
});

get button id on click with fontawesome icons returns undefined

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/

Close popup div when clicked outside it

I have a button on which when i click, a form opens to be filled by the user. When i click the button again the form closes. This wasn't possible as with one button i wasn't able to perform 2 functions like opening and closing of the form with one button. So, i took 2 buttons. When one button is clicked, it hides and the second button shows and the form is opened and when the second button is clicked, the same button hides and the first button shows and the form closes. I have no problem in this.
Now, I also want that when user clicks anywhere outside the div form, the form should close itself. Help me do this. These are the 2 buttons.
<input type="button" value="Add New" id="NewRow" class="btn1 green" onclick="ToggleDisplay()" />
<input type="button" value="Add New" id="NewRowCopy" style="display: none;" class="btn green" />
This is the form.
<div id="div_fieldWorkers" style="display:none;" class="formsizeCopy">
This is the script.
$(document).ready(function () {
$('#div_fieldWorkers').hide();
$('input#NewRowCopy').hide(); });
$('input#NewRow').click(function () {
$('input#NewRowCopy').show();
$('input#NewRow').hide();
$('#div_fieldWorkers').slideDown("fast");
});
$('input#NewRowCopy').click(function () {
$('input#NewRow').show();
$('input#NewRowCopy').hide();
$('#div_fieldWorkers').slideUp("fast");
});
$("html").click(function (e) {
if (e.target.parentElement.parentElement.parentElement == document.getElementById("div_fieldWorkers") || e.target == document.getElementById("NewRow")) {
}
else
{
$("#input#NewRowCopy").hide();
$("#input#NewRow").show();
$("#div_fieldWorkers").slideUp("fast");
}
I an trying to hide the second button when clicked outside the form.. but not working..
Try
$(document).ready(function () {
$('#div_fieldWorkers').hide();
$('input#NewRowCopy').hide();
$('#NewRow').click(function (e) {
$('#NewRowCopy').show();
$('#NewRow').hide();
$('#div_fieldWorkers').stop(true, true).slideDown("fast");
e.stopPropagation();
});
$('#NewRowCopy').click(function (e) {
$('#NewRow').show();
$('#NewRowCopy').hide();
$('#div_fieldWorkers').stop(true, true).slideUp("fast");
e.stopPropagation();
});
$(document).click(function (e) {
var $target = $(e.target);
if ($target.closest('#div_fieldWorkers').length == 0) {
$("#NewRowCopy").hide();
$("#NewRow").show();
$("#div_fieldWorkers").stop(true, true).slideUp("fast");
}
})
});
Demo: Fiddle

Categories

Resources