I am trying to attach an event handler to form.submit on asp.net rendered pages with no success. I want to intercept every postback, and doc. says that I should be able. Am I doing something wrong?
$(document).ready(function() {
$("form").submit(function() {
alert('Form submit');
debugger;
});
});
Don't know if you are still looking for it, but here is the solution I have. I don't think it works with event canceling if using, say, stopPropagation() but it will let you run some script before submitting the form.
<script type="text/javascript">
$(function () {
var oldSubmit = __doPostBack;
var newSubmit = function (eventTarget, eventArgument) {
alert('custom submit function');
return oldSubmit(eventTarget, eventArgument);
};
__doPostBack = newSubmit;
});
</script>
This is something I did on a legacy WebForm application:
//trigger jquery form submit event handlers on __doPostBack
$(function() {
var oldPostBack = __doPostBack;
__doPostBack = function() {
$("form").triggerHandler("submit");
oldPostBack.apply(this, arguments);
};
});
This allows you to wire "submit" events using jQuery the way you normally would:
$("#myForm").submit(function() { alert("submitted!"); });
Typical doPostBack hijacking, but only once. It triggers "submit" handlers on any form elements before doing the old postback. This is necessary because, while asp.net does call the onsubmit function attached to the form dom object, it doesn't look like jquery's events work that way.
asp.net webforms are generally enveloped in only one big form (hence the term web forms).
if I'm not mistaken, all links and submit buttons call __doPostBack manually, so it bypasses the calling form submit and delegates that responsibility to the __doPostBack function.
you would probably need to overwrite this function.
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['aspnetForm'];
if (!theForm) {
theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
though I'm trying to understand your "debugger;" line in your function. perhaps it should be this?
$(document).ready(function() {
$("form").submit(function() {
alert('Form submit');
});
});
Related
If I have a template like this
<template name="my_form">
<form name="my_form">
<input name=" ....
</form>
</template>
I'd like to listen to the submit event of "my_form".
I tried this:
Template.my_form.events({
'submit form': function( event ){ // also tried just 'submit'
console.log( 'Submitting form!' );
event.preventDefault();
event.stopPropagation();
return false;
}
});
But no luck. It appears the event handler doesn't get registered. Is there something I'm missing?
p.s. I am aware that I can handle a form "submission" by listening to the submit button click event, but I need to use the form submit event in this specific scenario.
Doesn't seem like you are missing something. I was not able to reproduce your problem. When hitting return while the textinput has focus the console prints 'Submitting form!' as expected.
My code, just two files:
form.html:
<head>
<title>form</title>
</head>
<body>
{{> my_form}}
</body>
<template name="my_form">
<form name="my_form">
<input></input>
</form>
</template>
form.js
if (Meteor.isClient) {
Template.my_form.events({
'submit form': function( event ){ // also tried just 'submit', both work for me!
console.log( 'Submitting form!' );
event.preventDefault();
event.stopPropagation();
return false;
}
});
}
You can use general listener for it.
$("my_form").submit(function (e) {
e.preventDefault();
});
You can create a single submit form event, and you conditionally check the event target field. Call appropriate Meteor method based on the collection you are inserting into.
Template.detailsViewTemplate.events({
'submit form': function(ev){
ev.preventDefault();
var detail_input_field = template.$('#detail_entry');
var message_input_field = template.$('#message_entry');
if(detail_input_field != undefined){
var detailFormData = {
detail: $(ev.target).find('[name = detail]').val(),
parentId: $(ev.target).find('[name = parentId]').val(),
checkboxStatus: ''
}
Meteor.call('addDetail', detailFormData);
$('.form-group').children().val('');
} else if(message_input_field != undefined){
var newMessageData = {
listId: this.params_id,
message: $(ev.target).find('[name = message]').val()
}
Meteor.call('addMessage', newMessageData);
$('.form-group').children().val('');
}
}
}
I have a .aspx page which contains form. I am setting another page at the action event of the form. Now I want to send data from one aspx form to another aspx form via post method. How can I access those data on second form??? I am sending data through JQuery.
<script language="javascript" type="text/javascript" >
//debugger;
// $(document).ready(function() {
// alert('hello there');
//});
function test() {
$("#test").load("test.aspx").toggle();
// alert($("#frm").serialize());
// var txt = '<%= Hidden1 %>';
var txt = document.getElementById('<%= Hidden1.ClientID %>').value;
alert(txt);
// return false;
$.post("test.aspx", document.getElementById("<%= frm.ClientID %>").serialize, function(data) {
alert(data);
});
/*$.post("test.aspx",
{
name: txt
},
function(data) {
alert(data);
});*/
return false;
}
</script>
Use : Request.Form["username"]
where "username" are the Names of the controls on the posting page.
There is another way, you can set a button's post back url property to the url of the second page, and in the second page you can get all the elements of the first page from the Page.PerviosPage object
Example
TextBox txt =
(TextBox)Page.PreviousPage.FindControl("serverNameText");
I am creating an ASP.NET custom control.
I want to set the body onload event of the ASPX page where the control resides.
Please note I cannot rely on the body tag in the ASPX page having runat="server".
any ideas??
Cheers.
Inline javascript! Just incase you can't use jQuery
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function')
{
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
} } }
addLoadEvent(initialize);
link to read http://www.webreference.com/programming/javascript/onloads/
Credits goto http://simonwillison.net/
If you include jQuery in your project you can use this:
jQuery(document).ready(function ()
{
// page load code here
});
You can run these multiple times on a page, ie handy within a control
Try this,
<script type="text/javascript">
window.onload = initialize();
function initialize() {
//your stuff
}
</script>
I have an asp.net button on the page. I am trying to do this:
$("#btn").click(function(e) {
e.preventDefault();
alert('hi');
}
But the alert never shows up. I have to use an ASP.NET button only and not a HTML one.
Try to have the method return false as well and in your buttons onclick you add the javascript. Like this:
$("#btn").click(function(e) {
e.preventDefault();
alert('hi');
return false;
}
or add it as an onclientclick function like this:
function ClickFunction() {
alert('hi');
return false;
}
<asp:Button OnClientClick="return Clickfunction();" />
Make sure you reference the ClientID of the button, not the "normal" ID.
$("#<%= MyControl.ClientID %>").click(function() {
alert(...);
return false;
}
Also make sure this is inside a document.ready() handler:
$(document).ready(function() {
$("#<%= MyControl.ClientID %>").click(function() {
alert(...);
return false;
}
});
Ok I got the answer over here
Using jQuery to Prevent ASP.NET Server Side Events from Occuring
I was missing the $(document).ready(function() . So silly of me!
I have the following javascript:
$(document).ready(function() {
$('#<%= DropDownList1.ClientID %>').change(function() {
$('#<%= TextBox1.ClientID %>').disabled = $('#<%= DropDownList1.ClientID %>').selectedIndex != 1;
});
});
When I change the index of the dropdown, nothing happens. I have tried to replace the code with:
$(document).ready(function() {
$('#<%= DropDownList1.ClientID %>').change(function() {
alert($('#<%= DropDownList1.ClientID %>').id);
});
});
This generates an alert that says 'undefined'. If I remove the .id-part I get an alert that says [object Object] so I guess it has got something. What am I doing wrong?
One key thing to realize in jQuery is that what is returned by the $(selector) is a jQuery object, not the DOM object. If you want to get the value for the select box from the jQuery object, you can use the val() function as in:
$("#element").val();
If you want to access the dom element from the jQuery object, that is easy, too. You can use the following:
$("#element")[0]; // equivalent to $("#element").get(0)
That should help you solve your problem.
$(document).ready(function()
{
$('#<%= DropDownList1.ClientID %>').change(function()
{
// replace 'your value' with the value of dropdown selectedIndex 1
if ($('#<%= DropDownList1.ClientID %>').val() == 'your value')
$('#<%= TextBox1.ClientID %>').removeAttr('disabled');
else
$('#<%= TextBox1.ClientID %>').attr('disabled', 'disabled');
});
});