I'm am attempting to add a new row to a table by clicking an add row button. However, clicking the add row button simply refreshes the page.
I have tried multiple ways to stop this such as preventDefualt and return false, all to no avail.
<script type="text/javascript">
$(function() {
$('#btn-add-item').on('click'),
function(e) {
e.preventDefault();
alert("works");
return false;
}
});
</script>
<button class="btn btn-primary btn-sm" id="btn-add-item"><i class="fa fa-plus"></i> Add item</button>
You have to close the click handler properly, check the location of end parenthesis.
Below is the snippet with correct format:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#btn-add-item').on('click', // <-- removing end paranthesis after "click" event will close the function
function(e) {
e.preventDefault();
alert("works");
return false;
}); // <-- adding end paranthesis here
});
</script>
<button class="btn btn-primary btn-sm" id="btn-add-item"><i class="fa fa-plus"></i> Add item</button>
Related
I'm using following codes in a JSP page.This is my function to change button text by a button click in JavaScript.
How do I change the button to click?
<!-- btn1 -->
<button class="btn btn-primary btn-round" id="btnvisibility">
<i class="material-icons">visibility</i>
visibility
</button>
<!-- btn2 -->
<button class="btn btn-primary btn-round" id="btnvisibility">
<i class="material-icons">visibility_off</i>
visibility off
</button>
<script>
$(document).ready(function () {
$("#btnvisibility").on("click", function () {
$(".visibility").toggle("slow");
if ($(this).val() == "visibility")
$(this).val("visibility off");
else
$(this).val("visibility");
});
});
</script>
The html seems to be broken. Only use 1 button, never reuse an id attribute.
It is not completely evident what you want to achieve, but you probably want to add a visibility state to your button and visualize it with an embedded icon and show a matching text.
Importing the material design font, you would only need to change these texts. Your button also needs state to conveniently inform the handler what to do (this could also be derived from the current structure of the element but it would be unneccessarily complicated).
Example html
<!DOCTYPE html>
<!--
https://stackoverflow.com/questions/61189795/change-button-in-javascript-when-clicked
-->
<html>
<head>
<title>Adorning buttons with material icons</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
<script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function () {
$("#btnvisibility").on("click", function ( eve ) {
let b_isVisible = this.classList.contains("_btn-visible")
, s_buttontext
, s_text
;
if (b_isVisible) {
s_buttontext = 'visibility off';
s_text = 'visibility_off';
this.classList.remove("_btn-visible");
} else {
s_buttontext = 'visibility';
s_text = 'visibility';
this.classList.add("_btn-visible");
}
$("span", this).text(s_buttontext);
$("i", this).text(s_text);
$(this).val(s_buttontext);
});
});
</script>
<style type="text/css">
</style>
</head>
<body>
<button id="btnvisibility" class="btn btn-primary btn-round _btn-visible">
<i class="material-icons">visibility</i>
<span>visibility</span>
</button>
</body>
</html>
Explanation
The css class _btn-visible encodes the visibility state for the button.
The textual id for the icon to visualize the visibility state is the textual content of the i element inside the button. This text is changed upon a click.
The button label is remaining text inside the button. For easier referencing it is wrapped in a span element. This text is also changed upon a click.
I think this is what you're looking for.
HTML
<!-- btn1 -->
<button class="btn btn-primary btn-round" id="btnvisibility">
<i class="material-icons">visibility</i>
visibility
</button>
<button class="btn btn-primary btn-round" id="btnvisibility">
<i class="material-icons">visibility_off</i>
visibility off
</button>
JS
$(document).ready(function(){
$("#btnvisibility").click(function(){
$(this).text($(this).text() == 'visibility' ? 'visibility off' :
'visibility');
});
});
I have an MVC application where I use more views, partial views.
In one partial view I have two buttons:
<button type="submit" id="btnSilviPrioInvoiceShow" class="btn btn-success" onclick="javascript:test()">#Resources.Common.ShowInvoice</button>
<button type="submit" id="btnSilviPrioInvoiceGenerate" class="btn btn-success btnSilviPrioInvoiceGenerate">#Resources.Common.Generate</button>
I need to put some logic in javascript when I click these buttons, but it seems the onclick event is not raised, it does nothing when I click the buttons.
The buttons are in a partial view, in the "parent" view I have added the code:
$("#btnSilviPrioInvoiceGenerate").on("click", function (e) {
e.preventDefault();
console.log("asas");
//var companyId = $('input[name=IssuerCompanyId]:checked').val();
var action_url = '#Url.Action("GenerateInvoiceDamage", "TimberMonitor", new { Area = "", id = #ViewBag.Id })';
window.location = action_url;
this.disabled = true;
});
I have tried to add this code inside the
$(document).ready(function () {
I have tried to add to add outside the
$(document).ready(function () {
from the "parent" view.
If I try to use the method that it is defined in the onclick event from the button,
function test()
{
console.log("test");
}
I get the error that test is not defined. If I put the javascript code in the partial view it is working with
$("#btnSilviPrioInvoiceShow").on("click", function (e) {
, but all the javascript code is in the "parent" view, so I thought it would be better to add there the javascript code.
Can you advise?
Make your button like following:
<input type="button" id="btnSilviPrioInvoiceShow" class="btn btn-success" onclick="test()">#Resources.Common.ShowInvoice</input>
<input type="button" id="btnSilviPrioInvoiceGenerate" class="btn btn-success btnSilviPrioInvoiceGenerate">#Resources.Common.Generate</input>
As you can see, this example works correctly, remove javascript: label
$("#btnSilviPrioInvoiceGenerate").on("click", function(e) {
e.preventDefault();
console.log("btnSilviPrioInvoiceGenerate clicked");
});
function test() {
console.log("it is test function");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="submit" id="btnSilviPrioInvoiceShow" class="btn btn-success" onclick="test()">#Resources.Common.ShowInvoice</button>
<button type="submit" id="btnSilviPrioInvoiceGenerate" class="btn btn-success btnSilviPrioInvoiceGenerate">#Resources.Common.Generate</button>
I have these buttons:
<button class="btn" id="empty">Empty Cart</button>
<button class="btn" id="submit">Add to Cart</button>
And this in a $(document).ready block in the head:
$("#empty").click(function() {
alert("I give up");
});
$("#submit").click(function() {
// ...
});
Why does #submit work and #empty does not?
It seems there are no problems here! I put it in this code snippet. So if any other problem is here notice me.
$("#empty").click(function() {
alert("I give up");
});
$("#submit").click(function() {
alert("I am submit");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn" id="empty">Empty Cart</button>
<button class="btn" id="submit">Add to Cart</button>
The main reason may prevent to call click is with dynamic elements. In this case, you should use:
$(document).on('click', '#empty', function() {
alert("I give up");
});
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/
Well, in my HTML page I have 6 buttons having values 1,2,3,4,5 and the 6th button has the value "disable".
All I want to do is disable a specific button by clicking the "disable" button using jQuery. For example if I press the 3rd button and then immediately click the disable button, button 3 should be disabled and if i click 4th button and then immediately click the disable button then 4th button should be disabled.
thanx in advance.
Buttons
<button class="btn">1</button>
<button class="btn">2</button>
<button class="btn">3</button>
<button class="btn">4</button>
<button class="btn">5</button>
<button class="btn">6</button>
<button class="dis">Disable</button>
And some jQuery
$('.btn').on('click', function() {
$(this).addClass('active').siblings('button').removeClass('active');
});
$('.dis').on('click', function() {
$('.btn.active').prop('disabled', true);
});
and a
FIDDLE
You can try this,
$('button').on('click',function(){
// your code;
$(this).prop('disabled',true);
});
HTML
<button class="mybutton">1</button>
<button class="mybutton">2</button>
<button class="mybutton">3</button>
<button class="mybutton">4</button>
<button class="mybutton">5</button>
<button class="disable">Disable</button>
SCRIPT
$(function(){
$('.mybutton').on('click',function(){
$(this).addClass('disableMe');
});
$('.disable').on('click',function(){
$('.disableMe').prop('disabled',true);
});
});
Working Fiddle