I am attempting to submit form data from within a javascript popup window.
The popup opens fine and displays all elements as expected. When I click the asp:button, before inputting anything, it performs required field validation as expected. All of that is working just fine.
The problem I am having is in getting the OnClick to work and submit the form data.
To say I am a beginner to javascript/JQuery is an understatement, so requesting a bit of hand-holding on this one. Thanks in advance for the help.
<asp:Button ID="submitRes" CssClass="button" runat="server" ClientIDMode="Static" Text="Submit This Form Data" OnClick="Submit_Click" />
$( document ).ready(function() {
$(document).on("click", ".divPopupAdd", function(event){
showPopup()
});
function showPopup(){
$("#popup_add").dialog({
show: { effect: "blind", duration: 200 },
resizable: false,
modal: true,
width: 750,
height: 450,
open: function(){
$('#<%=submitRes.ClientID %>').click();
}
});
}
});
Ok, this is how you post back - click a button to run your code behind.
We going to lay this out step by step.
We assume, that you click a button on your form, and it launches the jQuery dialog? Beyond important here that this “is” in fact your flow in this form.
So, I’m going to assume user clicks a button, and the dialog is launched.
(and avoid that document on-ready. Please dump it).
Now the dialog is displayed. In that dialog, we assume user enters data, does whatever, and THEN either clicks a button for ok, or clicks a button to cancel?
Next up:
You CAN NOT do/use an asp.net button for a post back in that dialog. It WILL NOT work – end of story!
And if you did get the post back to work, it would mess up your current page “dom” that is holding the current web page, and also that of the dialog. It just does not work – don’t do it, ok?
(so no post backs in that dialog!!)
But we can still happy make this work!!!
So, how do we setup a button in the dialog?
Lets assume you need to click a button inside the dialog?
Button MUST be client side JavaScript (js).
That button will:
Close the dialog, and THEN do the post back.
So, we thus need this flow:
Display dialog on button click (client side js).
User does whatever in that dialog.
User now clicks on a button (say ok, or cancel).
We CAN and will for the sake of going crazy? We will drop on the form and use standard asp.net buttons. There is really no need to adopt HTML “input” buttons. (You can, but no real need here).
I am going to use BOTH built in jQuery buttons and ALSO two standard buttons in that dialog (the reason is many, but that way YOU can choose either way, and learn this. (boy, do I with someone had laid out how this works for me!!!). So, I going to save you much pain and suffering here.
So, lets start from the top:
Our button code to pop the dialog.
The asp button will be this:
<asp:Button ID="showdialog" runat="server" Text="Show the dialog"
OnClientClick="showpop();return false;"/>
Note close in above!!!!
We use OnClientClick=showpop();return false.
This will thus run js code, and NOT do a post back. The return = false is VERY important here, since if you leave that out, then the standard asp button will post back like it “normally” does. And we break our new rule!! – no post backs inside the dialog!!.
Ok, so that is the button to launch the dialog.
The js code to launch the popup is similar to what you have.
Eg this:
function showpop() {
var mydiv = $('#popdialog');
mydiv.dialog({
autoOpen: false, modal: true, title: 'My cool dialog, width: '30%'
});
// Open the dialog
mydiv.dialog('open');
}
Now, again for this example, we assume that you dropped some standard asp buttons in that dialog. But, OFTEN you want to use the built in dialog buttons. So let’s do BOTH for this example.
So, the above code thus becomes this:
function showpop() {
var mydiv = $('#popdialog');
mydiv.dialog({
autoOpen: false, modal: true, title: 'My cool other page', width: '30%',
position: { my: 'top', at: 'top+150' },
buttons: {
'ok': mycustomok,
'cancel': mycustomcancel
}
});
// Open the dialog
mydiv.dialog('open');
}
Note the two built in buttons we added. (ok, and cancel).
Note how I also broke out the 'setup' and THEN the one line that pops the dialog.
And in our pop up div, we also have two custom buttons. As noted, I am including both custom and built in dialogs. This will take you “hours” to get nice examples of this, and now you can choose either road.
So, our div has some text, and two custom buttons, and a simple text box.
The div looks like this:
<div id="popdialog" runat="server" style="display:none">
<h2>My cool pop dialog</h2>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br />
<asp:Button ID="MyOk" runat="server" Text="My custom ok"
OnClientClick="mycustomok();return false;"/>
<br />
<asp:Button ID="MyCancel" runat="server" Text="My custom cancel"
OnClientClick="mycustomcancel();return false;"/>
</div>
The only real thing to note in above is the style=”display:none” for the WHOLE “div”. This will thus hide the div, and it will not display when the page loads.
So, when we click on the button, it will show the dialog. You will see this:
So, we have our two custom buttons, and the two jQuery but in buttons. If you don't want the built in ones then use my first sample code. As I stated, your choice as to which buttons you want, like, or feel to use here. The main point is that BOTH sets of buttons do the SAME thing.
So, for this example, you click “ok”, or “my custom ok”.
Either way? We want our post back to run for that choice.
And for my custom cancel, or the built in cancel, we want code behind (server code) to run for that cancel choice. Do keep in mind you often don't need any code - but JUST the dialog to close and cancel and do nothing.
So, the two js stubs we have for this are:
function mycustomok() {
// first, close the dialog
$('#popdialog').dialog('close');
#('#HiddenOk').click();
}
function mycustomcancel() {
// first, close the dialog
$('#popdialog').dialog('close');
$('#HiddenCancel').click();
}
As noted, if you use BUILT IN buttons for the dialog, then you do NOT need the “close” of the dialog I have above. But your using (we assume) custom buttons, and not the built in jQuery ones.
And as noted, based on either choice, we will do a post back and run code behind. As I stated, the short way, easy way is to drop two hidden buttons on the form, they will look like this, and of course our outside the above div
<asp:Button ID="HiddenOk" runat="server" Text="hidden ok"
style="display:normal"/>
<asp:Button ID="HiddenCancel" runat="server" Text="hidden cancel"
style="display:normal"/>
Note careful (note BEYOND carefull here).
I have display = normal for the two buttons. The reason is that then with the designer you can double click on the button, and write your code behind. When you are DONE and have both code behind stubs written, then change the above display:normal to display:none to hide them. So we left the buttons visible for easy development. Once you wired up the code behind (simply double click on the buttons in the designer), then you are jumped to the code behind editor, and can write that code.
I have this for now:
Protected Sub HiddenOk_Click(sender As Object, e As EventArgs) Handles HiddenOk.Click
Debug.Print("dialog ok code run")
End Sub
Protected Sub HiddenCancel_Click(sender As Object, e As EventArgs) Handles HiddenCancel.Click
Debug.Print("dialgo cancel code")
End Sub
Of course you write whatever you need. As noted, you may well not need any code for the cancel button – you can leave that out of this design if you wish.
So, with the two code subs automatic wired up for you (this is why we all love asp.net forms, right???).
The “click” button trick as noted is rather nice. It solves a LONG list of issues, and does so with great ease.
You get the needed post back.
You get to run your own cute little code stub behind.
You don't have to write up ajax calls to do this!!!
So this follows the whole asp.net design pattern in which you drop buttons on a form, click them, and you get to run that nice little short code behind stub. And it all wired up automatic for you.
Thus in summary:
Don’t try + attempt post backs in the dialog – you REALLY can’t do this.
And you find they don’t work anyway! So buttons on that dialog WILL run “js” code.
you can use asp buttons if you want, just remember the extra return=false part.
If you must set/send some information to the server in that dialog before you close? Well, that is a different question and answer. But the jQuery "ajax" method works REALLY nice, and you can directly call functions in your existing web page code behind, and do so with next to no effort. You don't even have to know how to setup web methods - asp.net will do all the dirty work. but lets leave that example for another day.
Try the above idea - the "click" button trick in js really is the magic key to making this all oh so very easy to write and setup.
If you wish to call the JavaScript popup from Backend side you can use ClientScript.RegisterStartupScript
Syntax:
ClientScript.RegisterStartupScript(Type type, string key, string script, bool addScriptTags)
Parameters
Type: The type of the startup script to register. This is of type 'Type'
key: The key of the startup script to register. This is of type String
script: The startup script literal to register. This is of type String
addScriptTags: A Boolean value indicating whether to add script tags. This is of type bool - true or false.
You can write like this:
protected void Button_clilck(Object sender, EventArgs e){
ClientScript.RegisterStartupScript(GetType(), "Key","showPopUp(),true);
}
And if you want to call your pop up method from Front End side you can simply call the JS method in asp:button by writing OnClientClick
<asp:Button ID="submitRes" CssClass="button" runat="server" ClientIDMode="Static" Text="Submit This Form Data" OnClick="Submit_Click" OnClientClick="showPopup" />
Background: I have a form on a single page with several div's that start out with only the first div showing and all others hidden. As you make a selection, the next form div is dynamically built and displayed based on the choices in the previous div. All previous form divs are still displayed. You progressively end up with more of the form fields showing as you progress through the choices. I have not put the whole code up here for brevity.
I am using JavaScript for this. I am NOT using jQuery intentionally as I am still working on being completely comfortable in JavaScript before I start relying on a library.
My Problem: I want to hide the submit button at the end of the form until the last form div is revealed. Everything I am trying is not working and I've exhausted things I have found on the web. It should be really simple, but apparently their must be something special about a submit button that is not in my JavaScript knowledge yet.
What I've Done: Below is what I think should work, but does not (I have kept the code limited to the issue at hand, however if someone thinks it is deeper then this I will happily edit and add more code). The onclick() function is working properly for otherDiv. i.e. when you click on the 2nd to last Div, OtherDiv is displayed as expected. It should also reveal the submit button, but does not (and the submit button is not hidden in the first place).
The problem is as simple as for whatever reason, the submit button is not given the style of "none" on page load and also is not give the style of "block" when the onclick() event happens.
I see in my console the below error that shows when I use GetElemntsByName to target the submit button as shown below, but am not sure why I am getting it. I understand the error, just not why my targeting of the submit button with GetElementsByName is throwing the error.
I have also tried this targeting the submit button by Id with GetElementById and while the console error below goes away then, I still do not get the submit button hidden.
I have shown the code below with the GetElementsByName error because I want to understand that error as well as solving my hidden submit button problem.
Console
TypeError: pdfButton.style is undefined
if(pdfButton) {pdfButton.style.display = 'none'};
HTML
<form id="buildShopDrawing" name="BuildShopDrawing" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<input type="submit" name="buildPDf" id="buildPDf" class="buildPDFbutton" value="Build the Shop Drawings PDF">
</form>
Javascript
function preparePage() {
// Set common divs to var for ease of use
var pdfButton = document.getElementsByName('buildPDF');
// hide: submit button until last form is revealed
for (var i = 0; i < door.length; i++) {
door[i].onclick = function() {
if(this.checked) {
otherDiv.style.display = 'block';
pdfButton.style.display = 'block';
}
};
};
//hide form divs on initial page load
if(pdfButton) {pdfButton.style.display = 'none'};
} //end preparepage
// Do not execute JavaScript until page is loaded
window.onload = function() {
preparePage();
};
As always, your help is appreciated!
You have a typo. id="buildPDf" != ('buildPDF')
(And as others pointed out, use getElementById)
You need to use document.getElementById instead of getElementsByName that return a collection, it mean you can access element by its index only.
I need to show loading image in asp.net page on submit event. I searched for a lot of ideas here and there but did not found a perfect solution for me. Still, I was able to write one myself. Though, one such is here show loading image while the page is loading but I dont think it'll look for page validation.
JS that I call at page submit.
$(document).ready(function () {
$(this).submit(function () {
$("#overlay").fadeIn(30);// Call (Show) loading box by default.
if (Page_ClientValidate() != null) //Check if there is a validation on page.
{
if (!Page_ClientValidate()) {//If Validation returns false then hide the loading box
$("#overlay").hide();
}
}
});
});
Here is my loading div:
<div style="display: none" id="overlay">
<div id="modalprogress">
<div id="theprogress">
<img alt="Loading... Please wait" src="../App_Themes/Theme1/images/processing.gif">
</div>
</div>
</div>
This div remains hidden by default. As soon as a submit button is clicked, it calls for Page_ClientValidate() method that is used for validation of page. Works fine for me but has few issues.
A button with a different or no ValidationGroup will fire this Page_ClientValidate() of other ValidationGroup present on page, and then shows the error message in validation summary, though it submits the page, but:
It shows the validation summary that is irrelevant/ for a moment (until the requested page is returned).
In case a button with a ValidationGroup is pressed, and a validation error occurs, it would then suppress all the submits/javascript methods that follow.
Any way to call the same in DropDown or CheckBox methods AutoPostBack Events?
Note#: I am trying to avoid the update panel thing, and other ajax call ideas as of now. Just need some optimization in the above code.
You have to determine the selector.
As example, use certain class (showLoadingImg) for the button where loading image need to show, doing this you avoid rest of the button click.
$('.showLoadingImg').submit(function () {
$("#overlay").fadeIn(30);// Call (Show) loading box by default.
if (Page_ClientValidate() != null) //Check if there is a validation on page.
{
if (!Page_ClientValidate()) {//If Validation returns false then hide the loading box
$("#overlay").hide();
}
}
});
I have one span that contain a button when you click it button disappear and the span appear and show this text "wait..."
Im doing this with appendchild, so i write a code for it to stop appending new childs, the script is fine and worked but something else happen...
when i click on the button it disappear and the text appear but the LogIn wont happen anymore.
here's the code:
<script type="text/javascript">
function enterSystem() {
document.getElementById("btnLogin").style.display = 'none';
var span = document.getElementById('brain13');
while ( span.firstChild ) {
span.removeChild(span.firstChild);
}
span.appendChild( document.createTextNode("Wait...") );
}
</script>
HTML SIDE:
<span id="brain13" onclick="enterSystem();">
<asp:Button ID="btnLogin" runat="server" OnClick="btnLogin_click" />
</span>
the problem is that onclick for the button"btnLogin_click" stop working.
thanks for any suggestion.
I think that the span gets the click event first, and given that your login button is inside it, he gets removed before he can handle it. Try putting your login button outside the span.
Also, while jQuery is tagged, I assume we can do some logical abstraction with something like this:
$('#brain13').click(function(){
$('#btnLogin').hide();
$(this).html('<p>Waiting...</p>');
});
See this working FIDDLE.
your chunck of code works on document load i.e. first time the page is loaded, you should be writing that in a function and calling that function wherever or whenever you want to remove child
I have a javascript method that creates a bunch of elements on click. When I call it from a button, it only stays on the screen for the duration of that click. when I enter the exact same code into the console, however, it stays on the page until I reload or navigate away (which is exactly what I want).
JavaScript code: (it's the only method in the js file)
function post() {
var postTitle = document.createElement('h3');
var nodeTitle = document.createTextNode('Immigration is good.');
postTitle.appendChild(nodeTitle);
etc....
Where I'm calling it in the html:
<input type="submit" id="post-button" value="Post" onclick="post()">
The script tag is in the header of the html page.
How do I get it to stay on the page past the duration of the click? Any ideas why it's being immediately obliterated?
You still need to cancel the form's submission. A return false; from post, if it exists, won't work because the onclick attribute is calling post() but not returning anything.
You could change it to onclick="return post();", but it would be better to attach the handler directly, and to the submit event of the form and not the click event of the button (people do use Enter sometimes!):
document.getElementById('some-form').onclick = post;
Look at what the button does. It is posting!
When you click the button it is redirecting you back to the page you are currently on! It seems like it is showing up and disappearing what is actually happening though is that the page is refreshing.
There are a couple of options to do what you want. Submitting via Ajax or having your server respond with a hashbang/cookie set to direct the page to do as you wish.