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
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
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);"/>
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();
});
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 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.