prevent page posting back and set a hidden field value - javascript

Using jquery, I want to prevent a postback and set a hidden field value.
JavaScript
<script type="text/javascript">
function HideImage() {
$("#divclose").hide();
$("#hdnClose").val("0");
return false;
}
</script>
Aspx Page
<div id="divclose">
<asp:imagebutton id="closeImage" runat="server" imageurl="close.gif" onclientclick="return HideImage()" imagealign="Right" />
<input type="hidden" id="hdnClose" value="0" />
<div>
The page is refresh when set:
$("#hdnClose").val("0");

Related

assign values from javascript and get values from c#

On the btn1 click:
<input type="hidden" runat="server" id="HTxtPath" />
or
<asp:HiddenField runat="server" ID="HTxtPath" />
<input id="btn1" type="button" value="save" onclick="Save()">
function Save() {
document.getElementById('HTxtPath').value = "~/path/Order.pdf";
}
Upto here the values assigning to the hidden text, then
On the btn2 click:
<input id="btn2" runat="server" type="button" value="save" onclick="Get()">
C#:
String data = HTxtPath.Value;
Here i m not getting the value
Pls help me
The easiest way I can do is to make the hidden input and asp.net hidden control instead of normal html input
used asp hidden field to store value
asp:HiddenField ID="hdnResultValue" Value="0" runat="server"
document.getElementById("hdnResultValue").value = 123;
following line read hidden field value
string codeBehindValue = hdnResultValue.Value;

Why button doesnt fire javascript function

I have no idea why the button click function is not firing in Javascript, am I missing something? I tried:
aspx.page
<input type="button" id="tglBtn" onclick="changeName(this) " runat="server" />
or
<input type="button" id="tglBtn" OnClientClick="changeName(this);" runat="server" />
or
<input type="button" id="tglBtn" OnClientClick="changeName(this);return false;" runat="server" />
Javascript
function changeName(obj) {
alert("hey");
if ($(obj).attr("Value") == "Open") {
$(obj).val("Close");
}
else {
$(obj).val("Open");
}
}
Actually it work so fine to me.
Here is my code:
<script src="js/jquery.min.js" type="text/javascript"></script>
<input type="button" id="tglbtn" onclick="changeName(this)" runat="server" />
<script type="text/javascript">
function changeName(obj) {
alert("hey");
if ($(obj).attr("Value") == "Open") {
$(obj).val("Close");
}
else {
$(obj).val("Open");
}
}
</script>
Do you have jQuery? If you dont have just add a jQuery..
I think you made a mistake... now try this...
<asp:Button id="tglBtn" OnClientClick="return changeName()" runat="server"><asp>
The OnClientClick is work on asp.net controls (not on html controls that you have apply the run on server).
So the first line is only left.
<input type="button" id="tglBtn" onclick="changeName(this) " runat="server" />
This line is run, but at the same time you make Post Back, so you probably not have the time to see the results of javascript. Of course you may have some other javascript bugs, if you open your browser console you can see if the javascript runs with out errors.
Use ASP:Button instead.
see below code
<asp:Button runat="server" id="tglBtn" onclientclick="return changeName()" Text="submit" />
//in head section
<script language="Javascript">
function changeName()
{
alert("I am in function");
document.getElementById("tglBtn").value = "New name";
return false;
}
</script>
it will resolve your issue

Disabling form inputs/selects/etc on.submit, data is not sent to an iframe

How can i disable inputs/selects/file inputs etc on submit event if the target of the form is an iframe?
Here's the link of a "working" example of the issue i'm having.
Here you can see the code.
<?php
if (isset($_REQUEST['iframe'])) {
if (isset($_POST['name_1'])) {
echo 'POST PIENO<br />';
} else {
echo 'POST VUOTO<br />';
}
echo '<pre>'.print_r($_POST, true).'</pre>';
die();
}
?>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript" language="javascript"></script>
<script>
function disableOnSubmit() {
$(this).attr('disabled', true);
$('#button2').attr('disabled', false);
$('#form').submit(function(e){
$(this).find('input').attr('disabled', true);
});
}
function enableOnSubmit() {
$(this).attr('disabled', true);
$('#button1').attr('disabled', false);
$('#form').find('input').attr('disabled', false);
$('#form').unbind();
}
$(document).ready(function(){
$('#button1').click(disableOnSubmit);
$('#button2').click(enableOnSubmit);
});
</script>
</head>
<body>
<input type="button" id="button1" value="Disabled on Submit" />
<input type="button" id="button2" disabled value="Enabled on Submit" />
<form action="<?=$_SERVER['PHP_SELF']?>?iframe" method="post" id="form" target="iframe">
<input type="text" name="name_1" value="value_1" />
<input type="text" name="name_2" value="value_2" />
<input type="text" name="name_3" value="value_3" />
<input type="hidden" name="iframe" value="true" />
<input type="submit" value="submit" />
</form>
<iframe src="<?=$_SERVER['PHP_SELF']?>?iframe" name="iframe" />
</body>
</html>
If inputs are disabled as per the HTTP specification the data will not form part of the POST/GET request. Instead you are probably looking for the readonly attribute -- this will disable the inputs and still post the data.
17.12 Disabled and read-only controls: http://www.w3.org/TR/html401/interact/forms.html#h-17.12
In this example, the INPUT element is disabled. Therefore, it cannot receive user input nor will its value be submitted with the form.
<INPUT disabled name="fred" value="stone">
Edit
Your submit event is firing BEFORE the form is submitted, inside that function your disabling the inputs which means once it's exited that function, and when it goes to submit, those inputs are disabled therefore the data is not sent.
There is not a simple way to detect when a form is submitted (aside from using ajax and a complete event handler) -- however you could simulate this by listening to the load event on the iframe, and then disable the parents input elements.
$('iframe').on('load', function() {
$(this.ownerDocument.body).find('input').attr('disabled', true);
});
However if your trying to stop multiple submissions, this won't help as your form submit request would have already been handled by the time the load event fires.
If the above is your goal, I would suggest to just disable the submit button once the form is submitted (and maybe add a loading icon to show to the user something is happening etc).

Trying to disable CSS buttons using ASP hidden value and javascript

I am using the ASP.NET PasswordRecovery method, and have a couple of CSS buttons to submit the form OR cancel the request.
I also grab the users email address to pass along to the successtext value of PasswordRecovery method, set the ASP hiddenvalue to success, and then try to use javascript to disable the buttons based on this value.
The problem is that this hiddenfield value seems to be set to "success" on initial page load, even though when viewing the source of the rendered page shows NO value.
There is probably a better approach to this, but I have tried several different ways, and this is successful up the point that I cant change the view state of the buttons.
<script runat="server">
protected void resetuserpassword_SendingMail(object sender, MailMessageEventArgs e)
{
e.Message.IsBodyHtml = true;
e.Message.Subject = "Password Assistance";
TextBox txtUserName = (TextBox)resetuserpassword.UserNameTemplateContainer.FindControl("UserName");
string UserEmailID = Membership.GetUser(txtUserName.Text.Trim()).Email;
resetuserpassword.SuccessText = "Password sent to ";
resetuserpassword.SuccessText += UserEmailID;
ValueHiddenField.Value = "Success";
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolderArea" Runat="Server">
<script type="text/javascript">
window.onload = disableButtons;
function disableButtons() {
var element = document.getElementById('ContentPlaceHolderArea_ValueHiddenField');
if (typeof(element) != 'undefined' && element != null) {
if (document.getElementById('ContentPlaceHolderArea_ValueHiddenField').value = 'Success') {
var submitBtnElement = document.querySelector("#submitBtn");
var cancelBtnElement = document.querySelector("#cancelBtn");
submitBtnElement.style.display = "none";
cancelBtnElement.style.display = "none";
}
}
}
function clickSubmit() {
document.getElementById("ContentPlaceHolderArea_resetuserpassword_UserNameContainerID_SubmitButton").click();
}
function clickCancel() {
window.location.replace("~/Login.aspx");
}
</script>
<asp:hiddenfield id="ValueHiddenField" value="" runat="server"/>
<asp:hiddenfield id="ValueHiddenField" value="" runat="server"/>
<asp:PasswordRecovery ID="resetuserpassword" runat="server"
MailDefinition-BodyFileName="~/ResetPasswordEmailTemplate.html"
OnSendingMail="resetuserpassword_SendingMail"
successtext="Password sent to email address on record."
Width="300px" Font-Names="Arial" Font-Size="Small" UserNameTitleText="" >
<InstructionTextStyle Font-Names="Arial" Font-Size="Small" />
<MailDefinition BodyFileName="~/ResetPasswordEmailTemplate.html"></MailDefinition>
<UserNameTemplate>
<div><asp:Label ID="UserNameLabel" runat="server" AssociatedControlID="UserName" style="display:none;"></asp:Label></div>
<div style="font: arial, verdana, sans-serif;font-size: 13px;padding-bottom: 5px;font-weight: bold;">Please Enter your Username</div>
<div><asp:TextBox ID="UserName" runat="server" style="width: 180px;"></asp:TextBox></div>
<div><asp:RequiredFieldValidator ID="UserNameRequired" runat="server" ControlToValidate="UserName" ErrorMessage="User Name is required." ToolTip="User Name is required." ValidationGroup="PasswordRecovery1">*</asp:RequiredFieldValidator></div>
<div><asp:Literal ID="FailureText" runat="server" EnableViewState="False"></asp:Literal></div>
<div style="display: inline;" ><asp:Button ID="SubmitButton" runat="server" CommandName="Submit" Text="Submit" ValidationGroup="PasswordRecovery1" style="display: none;" /></div>
</UserNameTemplate>
</asp:PasswordRecovery>
<div>
<div id="submitBtn" onclick="clickSubmit()">Submit</div>
<div id="cancelBtn" onclick="clickCancel()">Cancel</div>
</div>
</asp:Content>
Your javascript if statement is assigning the value 'Success' to the Hidden Field (single equals sign).
if (document.getElementById('ContentPlaceHolderArea_ValueHiddenField').value = 'Success') {
...
}
Change it to this (double equals sign):
if (document.getElementById('ContentPlaceHolderArea_ValueHiddenField').value == 'Success') {
...
}

How to retrieve hidden field value using javascript?

I've asp.net web site , I used master page for the design. I've child page which is placed in the contentplaceholder. On the child page i used one hidden field as -
<input id="Hidden1" type="hidden" value="This is hidden text"/>
I want to display the hidden field value using alert() function from javascript on the page load event. How to do this?
I tried following thing in my script but it is not working-
(function msgShow() {
var e1 = document.getElementById('Hidden');
alert(e1.value);
})();
Thanks.
window.alert(document.getElementById("Hidden1").value);
Make sure this code is executed after the DOM is ready.
With jQuery you do like this:
$(document).ready(function() {
alert($('#Hidden1').val());
});
without jQuery you do:
alert(document.getElementById('Hidden1').value);
Just like with any other element, you can get it with document.getElementById('Hidden1').value
Refer the code given below to know how to get
<html>
<body>
<script type="text/javascript">
function printIt(){
alert(document.getElementById('abcId').value);
alert(document.formName.elements['abcName'].value);
}
</script>
<h1>Access Hidden value in JavaScript</h1>
<form name="formName">
<input type="hidden" id="abcId" name="abcName"
value="I am Hidden value"/>
<input type="button" value="Get Value" onclick="printIt()" />
</form>
</body>
</html>
document.getElementById('Hidden1').value;
and alert the return value
<script type="text/javascript">
function dis() {
var j = document.getElementById("<%= Hidden1.ClientID %>").value;
alert(j);
}
</script>
<input id="Hidden1" type="hidden" runat="server" value="Hello" /><br />
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="return dis();" />
With pure JavaScript:
var value = document.getElementById(id).value;
Also be sure not to reference a DOM element before it exists - like I just did and spent an hour trying to figure why even HelloWorld would not work.

Categories

Resources