Can I attach an action to a buttonclick? - javascript

If i have a button, can I attach an action to it to perform server side processing, or does it have to be wrapped in a form?
For example
<button type="submit" onClick="listco_directory_contents.js"> List </button>
Can this be made to work, or is a form required?

You can't have a type="submit" if it's not in a form, there is nothing to submit. What you can do, is having a <button id="myButton">, then attach an event to it:
var myButton = document.selectElementById('myButton');
myButton.addEventListener('click', function() {
/* do something cool */
}, false);
And the "do something cool" could be an Ajax request so you send data to the server.

You can yes but if your aiming to do server side processes i recommend the jquery way.
<!--this button uses javascript-->
<input type="button" onclick="myfunction()" value="button"/>
<!--this button uses jquery-->
<input type="button" id="myfunction" value="button"/>
<script>
//javascript function using the onclick event
function myfunction(){
alert("an action");
// or any other function u wish to
// do once the button is click
}
//jquery using the id of the button
$(document).ready(function(){
$("#myfunction").click(function(){
alert("another action");
// or any other function u wish to
// do once the button is click
});
});
</script>

You could also just include the js:
<script type="text/javascript" src="listco_directory_contents.js"></script>
and then call whatever function you need from there:
<button onClick="exampleFunction()"> List </button>
Or in case you want to do server side processing with php you can do simply:
<button onClick="$.post('http://example.com/index.php');"> List </button>

$(function(){
$(':submit').on('click',function(){
alert('hi');
})
})
also can be type=submit
$(function(){
$('input[type="submit"]').on('click',function(){
alert('hi');
})
})
DEMO

Related

Input field open in new Tab with OnClick

I have an Input Field. When I click on this field it will add product into the Cart and moves on the Cart Page.
<input type="button" class="bgbutton"
value="Add to Shopping Cart" id="addtocart" name="addtocart"
onkeypress="window.event.cancelBubble=true;"
onclick="if (document.forms['form590'].onsubmit()) { document.forms['form590'].submit(); } return false;"
target="_blank">
I have given the tag target but unfortunately it does not work.
Kindly give me any Solution in JQuery / JavaScript etc.
SOLUTION
Simply I add target attribute in form tag. that's it.
$("form").attr("target", "_blank");
I resolved my issue.
Thanks
Simply you can use anchor tag instead of the button
<a
href="CART_URL" <-- here goes cart url you want to open in the new tab
class="bgbutton"
id="addtocart"
name="addtocart"
onkeypress="window.event.cancelBubble=true;"
onclick="document.forms['form590'].onsubmit() ? document.forms['form590'].submit() :; return false;"
target="_blank"
>Add to Shopping Cart</a>
To open a new tab you can use the following code.
<input type="button" class="bgbutton" value="Add to Shopping Cart" id="addtocart" name="addtocart" onkeypress="window.event.cancelBubble=true;" onclick="window.open('NewPage.aspx', 'NewPage');" >
To move between pages
<input type="button" class="bgbutton" value="Add to Shopping Cart" id="addtocart" name="addtocart" onkeypress="window.event.cancelBubble=true;" onclick="location.href = 'NewPage.aspx';" >
For more details you may want to refer to the following questions:
How to launch another aspx web page upon button click?
How can I make a button redirect my page to another page? [duplicate]
In JQuery you can use the following
<script>
$(document).ready(function () {
$(".bgbutton").click(function () {
window.location.href = "NewPage.aspx";
});
});
</script>
You can carry the variables to the other page through the URL like below.
<script>
$(document).ready(function () {
var name = "coder";
$(".bgbutton").click(function () {
window.location = 'NewPage.aspx?username=' + name;
});
});
</script>
To get the passed values to open up in new tab use the following
<script>
$(document).ready(function () {
var name = "coder";
$(".bgbutton").click(function () {
window.open('NewPage.aspx?username=' + name,"")
});
});
</script>
In order to understand how to retrieve a value from a URL, you might want to refer to the following question: Get url parameter jquery Or How to Get Query String Values In js

button click handler not working

I am trying to attach the ExportPDF to the button exportSelectedPdf on a cshtml file but when I click the button the handler is not working. Any ideas why ?
<input id="exportSelectedPdf" type="button" value="Export to PDF" />
<script type="text/javascript" language="javascript">
function ExportPDF() {
alert("Hi");
var url=#Url.Action("ExportTransactionsAsPdf", "JournalController");
exportSelectedTransactions(url);
}
document.getElementById("exportSelectedPdf").addEventListener("click", ExportPDF());
</script>
use the below code:
<input id="exportSelectedPdf" type="button" value="Export to PDF" />
<script type="text/javascript" language="javascript">
function ExportPDF() {
alert("Hi");
var url=#Url.Action("ExportTransactionsAsPdf", "JournalController")
;
exportSelectedTransactions(url);
}
document.getElementById("exportSelectedPdf").addEventListener("click", ExportPDF);
</script>
You should attach a function reference as "click" listener, not the result of it.
Change:
document.getElementById("exportSelectedPdf").addEventListener("click", ExportPDF());
to the (not immediately call the function, just pass the reference to it):
document.getElementById("exportSelectedPdf").addEventListener("click", ExportPDF);
You are confusing client side with server side. Try this.
var url = '#Url.Action("ExportTransactionsAsPdf", "JournalController")';
and bind event like this
document.getElementById("exportSelectedPdf").addEventListener("click", ExportPDF);
Thanks for your replay. Still can not get the attached button to work. I defined the onclick handler inline and that worked for me.
<input id="exportSelectedPdf" type="button" value="Export Selected Transactions to PDF"
onclick="var url='#Url.Action("ExportTransactionsAsPdf", "Journal", new {area="Journal"})';exportSelectedTransactions(url);"/>

Click function in mootools

I'm looking for the mootools equivalent of the jquery way. I need to link a button click on clicking another button
$('#myButton').click(function(){
// execute some function
});
Is this what you want?
<script type="text/javascript">
function callNewClick()
{
document.getElementById('btnTwo').click();
}
function helloUser()
{
alert('Hello!');
}
</script>
<button id="btnFirst" onclick="callNewClick();"> ClickFirst </button>
<button id="btnTwo" onclick="helloUser();"> Hello </button>
For example, in your code:
$('#myButton').click(function(){
document.getElementById('yourBtnTwoId').click();
});

Change onclick handler of the element added dynamically after the page has loaded

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.

simple append issue with jquery

I have a simple question. My JS code is like this, but when I try to add a new element or content to the <div>, it comes up then goes up quickly. I don't know why.
How can I avoid this?
<head>
$(document).ready(function () {
$('#mybtn').click(function () {
$('#main').append('<button id ="mm" onclick="myfun()">generate code my fun.</button>');
});
});
</head>
<body>
<form id="form1" runat="server">
<button id ="mybtn">generate code</button>
<div id="main"></div>
</form>
</body>
You should stop the button from Submitting the form by setting the button's type to be that of button.
Example :
<button type="button" id="mybtn">generate code</button>
The default type for a <button> element is submit. Which is causing your <FORM> tag to submit.
Try this:
$('#mybtn').click(function (e) {
e.preventDefault();
$('#main').append('<button id ="mm" onclick="myfun()">
generate code my fun </button>');
return false;
});
Try with:
$('#mybtn').click(function (event) {
event.preventDefault();
$('#main').append('<button id ="mm" onclick="myfun()"> generate code my fun </button>');
});
preventDefault : If this method is called, the default action of the event will not be triggered.

Categories

Resources