asp button postback inside div with (display:none) - html

I have a html button that calls an asp button to dopostback, but nothing happens.
<input type='button' value='click me' id='btntoClick'/>
<div id='divServerBtn' style='display:none'>
<asp:button ID='myButton' runat='server' onClick='myOnclickMethod'> </div>
my jquery:
$(function(){
$("#btntoClick").on("click", function(){ $("#myButton").click(); })
});
OR
if I set the div to visible at run time, still clicking the button does nothing, it goes to codebehind but IsPostBack is false
$(function(){
$("#divServerBtn").attr("display", "");
});

Try something like this as a test, then modify your code accordingly. The main thing is to use OnClientClick, not OnClick. It is also important to include "return false;"
Your function:
<script>
function ShowMe() {
$(function() {
$("#divServerBtn").show();
});
}
</script>
Your aspx button and div example:
<div id='divServerBtn' style='display:none'>Me</div>
<br />
<asp:Button ID="Button1" runat="server" OnClientClick="ShowMe(); return false;" Text="Button" OnClick="Button1_Click" UseSubmitBehavior="False" />

Related

How I prevent hiding the div again when click on submit button

When clicking on the checkbox it hides currently displaying DIV & shows hidden DIV. After this hidden div displayed it has a form to submit on button click.
My problem is when i click on this submit button, the form is hiding again. I have tried stopPropagation(), preventDefault() and many ways & problem still exist. When I use preventDefault() then it shows the div without hiding but the submit is disabled.
I saw many questions related this.but nothing works to me. I want to submit form without hiding the div which the form resides. I'm a beginner with jquery.
$(function() {
$("#active").click(function() {
if ($(this).is(":checked")) {
$("#donorTeam").show();
$("#donor").hide();
} else {
$("#donorTeam").hide();
$("#donor").show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="active"> select type
<div id="donor" style="display:block;"></div>
<div id="donorTeam" style="display:none;">
<form>
<button type="submit" id="sub">Add</button>
</form>
</div>
Thanks in advance.
You could try either of these 2 approaches
1.
$(function () {
$('#donorTeam form').on('submit',function (e) {
// Ajax call here
e.preventDefault();
});
});
2 . add onsubmit="return false" to the form attribute
<form onsubmit="return false">
<button type="submit" id="sub">Add</button>
</form>

ng-show to hide a div on form submit

I have following markup in my view
<div ng-show="showTheForm" class='col-md-8'>
<form ng-submit='login()'action="http://localhost/test/signin.php" target='signin' method="post">
<input type="submit" class='alt-btn' id="signin-button" value="Sign in">
</form>
</div>
<div ng-show="!showTheForm" class='col-md-8'>
<iframe height='600px' width='470px' id="signin" name="signin" frameBorder="0"></iframe>
</div>
When I submit the form I run this function within my controller
$scope.login = function() {
//Show the iframe
$scope.showTheForm = false;
}
What I want to happen is the form hides and the div with the iframe becomes visible.
The form hides when I submit but the iframe does not become visible and I'm wondering what I'm doing wrong?
I read about $apply and how it is used to inform angular if a variable is updated. I tried this but it made no effect.
Would anyone have any idea where I'm going wrong?
the definition of function in your controller is wrong.
Change function definition from $scope.login() = function() ==> $scope.login = function()

Is there a way to copy content of a html button to another?

I am trying to copy the content of a button in a html page to another button, I tried the following code, it doesn't work, it can only copy text from one input field to another, how to do the same for buttons ?
<!DOCTYPE html>
<html>
<body>
Field1: <input type=text id=field1 value="Hello World!"><br>
Field2: <input type=text id=field2><br><br>
<button id=BT_1 type=button onclick=myFunction()>ABC</button><br>
<button id=BT_2 type=button onclick=myFunction()>123</button>
<P>
<button onclick="myFunction()">Copy Text</button>
<script>
function myFunction()
{
document.getElementById("BT_2").value = document.getElementById("BT_1").value;
document.getElementById("BT_2").value = document.getElementById("field1").value;
document.getElementById("field2").value = document.getElementById("field1").value;
}
</script>
</body>
</html>
Prefer to have something like the following :
<button id=BT_1 type=button onclick=myFunction(BT_1)>ABC</button>
function myFunction(From_BT)
{
document.getElementById("BT_2").value = document.getElementById(From_BT).value;
}
Is this what you have in mind?
https://jsfiddle.net/jimedelstein/asfh2q2c/4/
The value of the button is not the same as the innerHTML.
Another solution would be to leave your javascript as is, but use
<input type="button" value="Button Text" id="BT_1" onclick='myFunction()' ></input>
See here for an example of both: http://permadi.com/tutorial/jsInnerHTMLDOM/
You can also create a function, let's call it copy_button_text that accepts two parameters the source button and target button, which we would call like so onclick='copy_button_text("BT_1", "BT_2")'. You will see in the fiddle, the myFunction() works, but each button actually uses this function to apply it's text to the other button.

HTML - How to do a Confirmation popup to a Submit button and then send the request?

I am learning web development using Django and have some problems in where to put the code taking chage of whether to submit the request in the HTML code.
Eg. There is webpage containing a form(a blog) to be filled by the user, and upon click on the Save button,there is a pop up asking whether you want to confirm or not. If click on confirm, then the request is sent.
I searched and find this javascript code.
<script type="text/javascript">
function clicked() {
alert('clicked');
}
<input type="submit" onclick="clicked();" value="Button" />
But I guess this is not the correct function as it seems to me that whenever you click on the Button, the request will be submitted. So How can I delay the submit request until user has confirm the submit?
The most compact version:
<input type="submit" onclick="return confirm('Are you sure?')" />
The key thing to note is the return
-
Because there are many ways to skin a cat, here is another alternate method:
HTML:
<input type="submit" onclick="clicked(event)" />
Javascript:
<script>
function clicked(e)
{
if(!confirm('Are you sure?')) {
e.preventDefault();
}
}
</script>
I believe you want to use confirm()
<script type="text/javascript">
function clicked() {
if (confirm('Do you want to submit?')) {
yourformelement.submit();
} else {
return false;
}
}
</script>
Use window.confirm() instead of window.alert().
HTML:
<input type="submit" onclick="return clicked();" value="Button" />
JavaScript:
function clicked() {
return confirm('clicked');
}
<script type='text/javascript'>
function foo() {
var user_choice = window.confirm('Would you like to continue?');
if(user_choice==true) {
window.location='your url'; // you can also use element.submit() if your input type='submit'
} else {
return false;
}
}
</script>
<input type="button" onClick="foo()" value="save">
For a Django form, you can add the confirmation dialog inside the form tag:
<form action="{% url 'delete' %}" method="POST" onsubmit="return confirm ('Are you sure?')">
Another option that you can use is:
onclick="if(confirm('Do you have sure ?')){}else{return false;};"
using this function on submit button you will get what you expect.

OnServerClick event handler not called if using onclick

I have a peculiar problem here and I can't by my life figure out what the solution is. Note that the following code is not dynamically created, but just immediately in my aspx file.
<button type="button" runat="server" id="btnSubmit"
OnServerClick="btnSubmit_Click" onclick="return confirm('Sure?');">
Submit
</button>
This works just fine as long as I don't have the onclick attribute there, i.e. the OnServerClick handler is fired as it should. But when I use the onclick attribute it is not, no matter whether I confirm or decline the confirmation dialog box.
What am I doing wrong?
If you look at the source code generated you will see the following:
onclick="return confirm('Sure?'); __doPostBack('btnSubmit','')"
so what is happening is the _doPostBack is never called. The hacky way to do what you're looking for is the following:
<button type="button" runat="server" id="btnSubmit"
OnServerClick="btnSubmit_Click" onclick="if (confirm('Sure?')) ">
The real correct way would be to use a Web Control:
<asp:Button runat="server"
OnClick="btnSubmit_Click" OnClientClick="return confirm('Sure?')" Text="Submit" />
I had more success with
<asp:Button ID="btnSubmit" runat="server" Text="Save" UseSubmitBehaviour="false"
OnClick="btnSubmit_Click" OnClientClick="if (!confirm('Sure?')) return" />
The accepted answer is not perfect. If you do not use type="button", the web page will do postback even you have clicked cancel. The correct and easiest way is to take advantage of short-circuit evaluation and do this hack: replace ; with && !, like below.
<button runat="server" id="btnSubmit"
OnServerClick="btnSubmit_Click" onclick="return confirm('Sure?') && !">
The output will look like this:
<button id="btnSubmit"
onclick="return confirm('Sure?') && ! __doPostBack('btnSubmit','')">
It gives correct return value because true && !undefined will return true and undefined will be evaluated and false && !undefined will return false and undefined will NOT be evaluated which is exactly what we want.
How about chaging button's type to submit, it works well :
<button type="submit" runat="server" id="btnSubmit"
OnServerClick="btnSubmit_Click" onclick="return confirm('Sure?');">
Submit
</button>
Try this:
<button type="button" runat="server" id="btnSubmit"
OnServerClick="btnSubmit_Click" onclick="if(!confirm('Sure?')) return;">
Submit
</button>
It sounds like the onclick event isn't bubbling through.
You should just be able to use
OnClientClick="return confirm('Sure?');
I don't think the other onClick should be necessary.
Edit:
This method would require you to hook your function to the OnClick event manually.
I am making up attributes this morning so in a futile effort to redeem myself-
Another method would be to insert javascript to catch the event. Something like..
$("form").submit(function() {
var resp = confirm("Save & Submit?");
if (resp) {
serializeStats();
return true;
}
else {
return false;
}
});
I do recall there being a better inline way to do this though.
Caffeine time now.
< button> is an HtmlButton control where OnServerClick is the only server-side click event. OnClick is unrecognized by ASP.NET so it gets passed to the client intact in case you want some client-side javascript code to execute before the postback.
< asp:button> is a WebControl which accomplishes the same thing with the OnClick server-side event and OnClientClick for client-side.
I think you're getting the behavior you see because your confirm('sure?') returns false which stops the postback mechanism. That would explain why it works when you don't have onclick in place.
Front Site
<button id="submit1" runat="server"
onclick="if(confirm('Sure?')) { } else{ return false} ;"
onserverclick="submit_ServerClick" >save</button>
Back Site
protected void submit_ServerClick(object sender, EventArgs e)
{
}