In my web form I have an ASP Hidden field as such:
<asp:HiddenField ID="HiddenField1" runat="server" OnValueChanged="HiddenField1_ValueChanged" /> I am current setting the value of this field client side as such
document.getElementById("ContentPlaceHolder1_HiddenField1").value = type + pngUrl;
Then I call
document.forms[0].submit(); to post the page.
The changed value of the hidden field successfully posts in both chrome and firefox, but in IE the DOM Viewer says the data is inside the hidden field but on inspection of the post the area for the hidden field is totally empty.
(This is in IE 11)
EDIT: Fixed But example code of the before an after, looking for an explanation on why this fixed it.
Working version
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<script src="webcam.min.js"></script>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<asp:HiddenField ID="HiddenField1" runat="server" />
<div id="CameraDivtest"></div>
<input type="button" id="start" value="startCamera" onclick="videoCall('test')" />
<input type="button" value="take picture" id="picButtonKey" />
</div>
</form>
<script>
var c;
var v;
var con;
function videoCall(type) {
Webcam.set({
width: 600,
height: 420
});
Webcam.attach('#CameraDiv' + type);
function goingGrey() {
Webcam.snap(function (data_uri, canvas, context) {
var pngUrl = data_uri
document.getElementById("<%=HiddenField1.ClientID%>").value = type + pngUrl;
document.forms[0].submit();
});
}
document.getElementById("picButtonKey").addEventListener("click", function (e) {
goingGrey();
});
}
</script>
</body>
</html>
Broken version
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<script src="webcam.min.js"></script>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<asp:HiddenField ID="HiddenField1" runat="server" />
<div id="CameraDivtest"></div>
<input type="button" id="start" value="startCamera" onclick="videoCall('test')" />
<input type="button" value="take picture" id="picButtonKey" />
</div>
</form>
<script>
var c;
var v;
var con;
function videoCall(type) {
Webcam.set({
width: 600,
height: 420
});
Webcam.attach('#CameraDiv' + type);
function goingGrey() {
Webcam.snap(function (data_uri, canvas, context) {
var pngUrl = data_uri
document.getElementById("<%=HiddenField1.ClientID%>").value = type + pngUrl;
});
}
document.getElementById("picButtonKey").addEventListener("click", function (e) {
goingGrey();
document.forms[0].submit();
});
}
</script>
</body>
</html>
Related
I am trying to populate my form in iframe. I need to input a value in textbox and select a value from dropdown menu.
webform1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="admin-lte/js/app.min.js"></script>
<script src="Scripts/jquery-2.1.3.min.js"></script>
</head>
<body>
<style type="text/css">
body {scrolling:no;
}
iframe {position:absolute;
z-index:1;
top:0px;
left:0px;
}
</style>
<form id="form1" runat="server">
<iframe id="frame1" src="WebForm4.aspx" width="100%" height="100%" frameborder="0">
</iframe>
<script>
function getElementWithinIframe() {
var iframe = document.getElementById('frame1');
var innerDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;
var quantity = innerDoc.getElementById("txtQuantity");
quantity.value = "5";
var submit = innerDoc.getElementById("btnQuantity");
submit.click();
}
</script>
</form>
</body>
</html>
webform4
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="ddlProd" runat="server">
<asp:ListItem>Product1</asp:ListItem>
<asp:ListItem>Product2</asp:ListItem>
<asp:ListItem>Product3</asp:ListItem>
<asp:ListItem>Product4</asp:ListItem>
<asp:ListItem>Product5</asp:ListItem>
</asp:DropDownList>
<asp:TextBox ID="txtQuantity" runat="server"></asp:TextBox>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" />
</div>
</form>
</body>
</html>
this doesn't work. What am I missing.?
I've gone through multiple articles but I think I'm not getting it.
Javascript - Get element from within an iFrame
How to pick element inside iframe using document.getElementById
Any help is appreciated.
--
Thanks
In the javascript in the parent you use btnQuantity, while the button in WebForm4.aspx has the ID btnSubmit. So change the script to:
var submit = innerDoc.getElementById("btnSubmit");
Then call the function somewhere, either on a button click or on page load.
<input type="button" onclick="getElementWithinIframe()" value="ClickMe">
<script>
$(document).ready(function () {
setTimeout(function () { getElementWithinIframe(); }, 250);
});
</script>
In html file to redirect a page using Javascript i used like this
window.location.href = "http://www.google.com/";
Its working fine. But when i tried in .aspx it is not working
Below is my code. Thanks in advance
<head runat="server">
<script type="text/javascript">
function PageRedirect() {
window.location.href = "http://www.google.com/";
}
</script>
</head>
<body>
<form runat="server">
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="PageRedirect()"/>
</form>
Try this:
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="PageRedirect(); return false;"/>
This is code for Firefox.
Default.aspx:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script type="text/javascript" src="pop.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="Hidden1" type="hidden" runat="server" />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Popup" />
</div>
</form>
</body>
</html>
Default.aspx.cs:
protected void Page_Load(object sender, EventArgs e)
{
TextBox1.Text = "Hello";
Button1.Attributes.Add("onClick", "javascript:InvokePop('" + TextBox1.ClientID + "');");
}
PopupWin.aspx:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script type="text/javascript" src="pop.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtValue" runat="server"></asp:TextBox><br />
<br />
<input type="button" id="btnReturnValue" value="Return value back" onclick="ReturnValue();" />
</div>
</form>
</body>
</html>
pop.js:
function InvokePop(fname)
{
val = document.getElementById(fname).value;
retVal = window.open("PopupWin.aspx?Control1=" + fname, 'Show Popup Window', 'height=90,width=250,resizable=yes,modal=yes');
retVal.focus();
}
function ReturnValue()
{
var newValue = document.getElementById("txtValue").value;
if ((window.opener != null) && (!window.opener.closed))
{
window.opener.document.getElementById("TextBox2").value = newValue;
}
window.close();
}
In this case I click button on Default.aspx page and open Popup.aspx as popup window. I enter some value to text box in Popup.aspx and press button. The new value appears in second text box on Default.aspx page.
That works, but how can I pass the new value entered in Popup.aspx page to some handler in Default.aspx page and use it further? For example, I can have another ASPX button on Default.aspx page and when I click it I can use the value entered in Popup.aspx page.
Well what you can do is the following:
Add a hiddenField on the first page. Im calling it "hfPopupValue".
In pop.js u are currently doing this:
window.opener.document.getElementById("TextBox2").value = newValue;
You can change this to:
window.opener.document.getElementById("hfPopupValue").value = newValue;
Afterwards you can just read the value from the hiddenField.
This should solve your problem.
Have you thought of using jQueryUI's Dialog, which lets you keep all controls on the same page, meaning cleaner code.
It also doesn't look as nasty as a JavaScript popup window.
If i have an asp control that has a particular Validation grop
<asp:CustomValidator ID="myRequiredValidator" runat="server" ControlToValidate="myDropDown" ClientValidationFunction="myClientSideValidationFunction" ValidateEmptyText="True" Display="None" ValidationGroup="group A"></asp:CustomValidator>
How can i change the group in javascript?
<script type="text/javascript" language="javascript">
function changeValidationGroup(validator) { validator.ValidationGroup("group B"); }
Or something like that?
Thanks
In ASP.NET validation controls become <span> tags when rendered as HTML, simply change the validationGroup attribute of the required span to a new value:
<head runat="server">
<title>Validation</title>
<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript">
</script>
<script type="text/javascript">
function ChangeGroupName() {
var groupName = $("#txtGroupName").val();
if (groupName != '') {
$("#validator").attr('validationGroup', groupName);
}
};
</script>
</head>
<body>
<form id="form1" runat="server">
<input type="text" id="txtGroupName" />
<asp:CustomValidator ID="validator" runat="server" ErrorMessage="Error" ValidationGroup="Group1"></asp:CustomValidator>
<input type="button" value="OK" id="btnChangeGroup" onclick="ChangeGroupName()" />
</form>
</body>
I'm trying to removed the added controls. Here's the mark-up that adds upload controls to the page:
<%# Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Multi File Upload</title>
</head>
<body>
<form id="form1" runat="server" enctype="multipart/form-data">
<p id="upload-area">
<input id="File1" type="file" runat="server" size="60" />
</p>
<input id="AddFile" type="button" value="Add file" onclick="addFileUploadBox()" />
<br />
<br />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<p><asp:Button ID="btnSubmit" runat="server" Text="Upload Now" OnClick="btnSubmit_Click" /></p>
<span id="Span1" runat="server" />
<script type="text/javascript">
function addFileUploadBox()
{
if (!document.getElementById || !document.createElement)
return false;
var uploadArea = document.getElementById ("upload-area");
if (!uploadArea)
return;
var newLine = document.createElement ("br");
uploadArea.appendChild (newLine);
var newUploadBox = document.createElement ("input");
// Set up the new input for file uploads
newUploadBox.type = "file";
newUploadBox.size = "60";
// The new box needs a name and an ID
if (!addFileUploadBox.lastAssignedId)
addFileUploadBox.lastAssignedId = 100;
newUploadBox.setAttribute ("id", "dynamic" + addFileUploadBox.lastAssignedId);
newUploadBox.setAttribute ("name", "dynamic:" + addFileUploadBox.lastAssignedId);
uploadArea.appendChild (newUploadBox);
addFileUploadBox.lastAssignedId++;
}
</script>
</form>
</body>
</html>
Thank.
try parent.removeChild(element);
The following site seems to answer what you are looking for:
http://www.dustindiaz.com/add-remove-elements-reprise/