I have a standard aspx page with which I need to add another standard HTML form into and have it submit to another location (external site), however whenever I press the submit button the page seems to do a post back rather than using the sub-forms action url.
A mock up of what the form relationships is below. Note in the real deployment the form will be part of a content area of a master page layout, so the form needs to submit independantly from the master page form.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<form id="subscribe_form" method="post" action="https://someothersite.com" name="em_subscribe_form" >
<input type="text" id="field1" name="field1" />
<input id="submitsubform" type="submit" value="Submit" />
</form>
</div>
</form>
</body>
</html>
It's an interesting problem. Ideally you only want the 1 form tag on the page as other users have mentioned. Potentially you could post the data via javascript without having 2 form tags.
Example taken from here, modified for your needs. Not 100% sure if this will work for you but I think this is how you'll have to approach it.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
function postdata()
{
var fieldValue = document.getElementById("field1").value;
postwith("http://someothersite.com",{field1:fieldValue});
}
function postwith (to,p) {
var myForm = document.createElement("form");
myForm.method="post" ;
myForm.action = to ;
for (var k in p) {
var myInput = document.createElement("input") ;
myInput.setAttribute("name", k) ;
myInput.setAttribute("value", p[k]);
myForm.appendChild(myInput) ;
}
document.body.appendChild(myForm) ;
myForm.submit() ;
document.body.removeChild(myForm) ;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div>
<input type="text" id="field1" name="field1" />
<asp:Button ID="btnSubmitSubscribe" runat="server" Text="Submit" OnClientClick="postdata(); return false;" />
</div>
</div>
</form>
</body>
</html>
If javascript is not a viable option - you can use .Net's HttpWebRequest object to create the post call in code behind. Would look something like this in the code behind (assuming your text field is an asp textbox:
private void OnSubscribeClick(object sender, System.EventArgs e)
{
string field1 = Field1.Text;
ASCIIEncoding encoding=new ASCIIEncoding();
string postData="field1="+field1 ;
byte[] data = encoding.GetBytes(postData);
// Prepare web request...
HttpWebRequest myRequest =
(HttpWebRequest)WebRequest.Create("http://someotherwebsite/");
myRequest.Method = "POST";
myRequest.ContentType="application/x-www-form-urlencoded";
myRequest.ContentLength = data.Length;
Stream newStream=myRequest.GetRequestStream();
// Send the data.
newStream.Write(data,0,data.Length);
newStream.Close();
}
If you add an ASP.NET button to the form, and set its PostBackUrl property to the external site, then all the form data will be posted to that URL.
There is a very nice tricky solution for this problem.
You can insert a </form> tag before your <form> to close the asp.net form which causes the problem. Do not forget to add a <form> tag after your html form. It may cause the editor to give you an exception, but do not worry, it will work.
Nested forms are not possible in HTML according to the W3C. You can achieve your intended result using JavaScript or with jQuery as explained by Peter on a blog called My Thoughts.
In my experience, Appetere Web Solutions has the best solution. Simple and elegant...and it's not a hack. Use the PostBackUrl.
I just tried it and everything works as expected. I didn't want to use Javascript because I didn't want to include it in my Master Page for every page that uses it.
I had the same situation as Ross - except that my input types were all of the "hidden" varitey.
Cowgod's answer got me thinking about nested forms within my .aspx page. I ended up "un-nesting" my 2nd form OUT of the main .aspx form ( ) and placed it (along with my js script tags) just under the body tag - but before the main .aspx form tag.
Suddenly, everything was submitting as it was supposed to. Is this a hack?
ASP.NET allows you to have multiple forms on one page, but only one can be runat=server. However I don't think you can nest forms at all.
You might have to make a new master page, one without a form tag on it so the form will work on that one page only. This is not a good solution, unless you can place the form outside the master pages' form, and use javascript to submit the second form, but that's hardly better. There really is no good solution for what you are trying to achieve, and if so I'd like to hear it. I don't think you can do a POST call from a code-behind, can you? I'm sure there's some way. But that's probably the only solution: from code.
Related
I am hating asp.net...
I have a really simple web site. In my master page I have a form runat="server".. I need it because in some page I have server side controls (login control for example, or my custom control)..
Now I have a simple page, with a really simple form. And in this page, I would like to use angularjs..
What I want is that (simply) when I submit this angularjs form, I arrive on the server just when the form is valid.
In this page I have tried different solution but no solution works!
The problem I think is that I have a (angularjs) form (in the page, this is not runat="server") that is nested in asp.netform (in the master page, runat="server")..
Here what I tried:
1) remove the asp.net form from the master page and add different asp.net form just where i need, but in some page i had more than one form with `runat="server" and this is not possible:
two form runat=server
2)remove the angularjs form, don't do a submit, but manage a simple ng-click event, but in this way I go on server always, even if form is not valid...
3)leave the angularjs form a do a submit, but in this way I obtain an "invalid postback error"... I have tired this solution but it does not work:
Invalid postback error
What I simply want is to use angularjs and go on server just when form is valid... How can I do? Thank you..
UPDATE:
My MasterPage is:
<body>
<form runat="server">
...
<asp:ContentPlaceHolder ID="content" runat="server"></asp:ContentPlaceHolder>
...
</form>
</body>
My Page is:
<asp:Content ID="Content3" ContentPlaceHolderID="content" runat="server">
<script type="text/javascript" src="/Scripts/angular.min.js"></script>
<script type="text/javascript" src="/Scripts/angular-resource.min.js"></script>
<script type="text/javascript">
(function (angular) {
var public_area = angular.module("public-area", ['ngResource']);
public_area.factory("PresentaUnAmicoService", function ($resource) {
return {
piani_tariffari: $resource("/api/PresentaUnAmico/")
};
});
public_area.controller("PresentaUnAmicoController", function ($scope, PresentaUnAmicoService) {
$scope.sendInvitation = function ()
{
var invitation =
new PresentaUnAmicoService
.piani_tariffari($scope)
.$save();
}
});
})(angular);
</script>
<div data-ng-app="public-area" data-ng-controller="PresentaUnAmicoController">
<form name="presenta_amico-form" novalidate>
<table class="three_column" data-ng-class="{ 'ng-submitted' : submitted }">
... //Here there is my form
<button type="button" class="button link" id="btnSendInvitation" runat="server" data-ng-click="submitted=true" ng-submit="sendInvitation()">
<span><b>INVIA EMAIL</b></span> <img class="middle" src="/Styles/img/continue_24x24.png" />
</button>
...
</table>
</form>
</div>
</asp:Content>
I Know, It's not correct have a form inside another form.. but I am looking for a solution...
What you need in order to nest form is to use
eg:
<form runat="server">
<ng-form name="myFormName" ...>
//Your Code
</ng-form>
</form>
have a look here
In my project I have to give user option to put a security question and answer to this question, so I have two textboxes one for question and another one for the answer, I want to use ASP.net custom validators to do this task so if question textbox is empty answer textbox will be disabled and when question textbox is not empty answer textbox is enabled.
A validator is not fired if the textbox is empty. But you can set the attribute ValidateEmptyText="true" on your CustomValidator to bypass this.
JavaScript is good enough here:
<html>
<head>
<script type="text/javascript">
var minimumQuestionLength = 20;
function checkQuestionBox()
{
var questionLength=document.getElementById("question").value.length;
if(questionLength < minimumQuestionLength)
{
return false;
}
return true;
}
</script>
</head>
<body>
<h1 id="myHeader">Test</h1>
<p>Question: <input type="text" id="question"/><br />
Answer: <input type="text" id="answer" onkeypress="return checkQuestionBox();"/>
</p>
</body>
</html>
Fairly simple. You can also disable "answer" on start and then enable once the question is correct, if you prefer that option. Also simple JavaScript.
I feel as though this this is a simple question, but can't find an answer anywhere. We've got an interface we're trying to move to an ASP.NET control. It currently looks like:
<link rel=""stylesheet"" type=""text/css"" href=""/Layout/CaptchaLayout.css"" />
<script type=""text/javascript"" src=""../../Scripts/vcaptcha_control.js""></script>
<div id="captcha_background">
<div id="captcha_loading_area">
<img id="captcha" src="#" alt="" />
</div>
<div id="vcaptcha_entry_container">
<input id="captcha_answer" type="text"/>
<input id="captcha_challenge" type="hidden"/>
<input id="captcha_publickey" type="hidden"/>
<input id="captcha_host" type="hidden"/>
</div>
<div id="captcha_logo_container"></div>
</div>
However all the examples I see of ASP.NET controls that allow for basical functionality - i.e.
public class MyControl : Panel
{
public MyControl()
{
}
protected override void OnInit(EventArgs e)
{
ScriptManager.RegisterScript( ... Google script, CSS, etc. ... );
TextBox txt = new TextBox();
txt.ID = "text1";
this.Controls.Add(txt);
CustomValidator vld = new CustomValidator();
vld.ControlToValidate = "text1";
vld.ID = "validator1";
this.Controls.Add(vld);
}
}
Don't allow for the detailed layout that we need. Any suggestions on how I can combine layout and functionality and still have a single ASP control we can drop in to pages? The ultimate goal is for users of the control to just drop in:
<captcha:CaptchaControl ID="CaptchaControl1"
runat="server"
Server="http://localhost:51947/"
/>
and see the working control.
Sorry for the basic nature of this one, any help is greatly appreciated.
Although you may want to look into user controls, the following page has an example of doing this using a web control. http://msdn.microsoft.com/en-us/library/3257x3ea.aspx The Render() method does the output of the actual HTML for the control.
There are a couple of ways to do it. You can make a custom control, or a user control. I think you will find it easier to do a user control. It lets you lay out parts of your control as you would a regular page. Here is some example documentation: http://msdn.microsoft.com/en-us/library/26db8ysc(VS.85).aspx
By contrast a custom control typically does all of the rendering in code (as your example you show). It is harder to make your first control in this way.
I am writing a form using jQuery and encounter some difficulties.
My form works fine in static page (html).
However, when I use the form in dynamic page(aspx), the form does not behave correctly.
I cannot append items to the form and call the form.serialize function.
I think the error occurs when a form is inside another form (.aspx code needs to enclosed by a form tag).
What should I do?
Let me give a simplified version of my code:
<form name="Form1" method="post" id="Form1">
some content
<form name="form_inside">
<input name="fname" type="text" />
</form>
</form>
jQuery code:
$("#form_inside").append($("<input type='text' name='lname'>"));
When the user submits,
$("#form_inside").serialize();
// it should return fname=inputfname&lname=inputlname
I want to append element to "form_inside" and serialize the form "form_inside".
The form "Form1" is required by the aspx and I cannot remove it.
Could you just serialize the fields inside Form1?
I don't know anything about ASP, but it seems that you're not doing a straightforward "submit" anyway - so does it really matter if the fields aren't within their own separate form?
You could possibly group the fields you're interested in within a <div> or something, e.g.:
<div id="my-interesting-fields">
...
</div>
then substitute #form-inside with #my-interesting-fields where appropriate - is that helpful at all?
Edit
OK, a quick glance at the jQuery code suggests that serialize() depends on the form's elements member.
I suppose you could hack this in a couple of different ways:
Copy all elements from #my-interesting-fields into a temporary <form> that you dynamically create outside Form1, then call serialize() on that. Something like:
$("#Form1").after("<form id='tmp-form'></form>").
append("#my-interesting-fields input");
$("tmp-form").serialize();
Or, create an elements member on #my-interesting-fields, e.g.
$("#my-interesting-fields").elements = $("#my-interesting-fields input");
$("#my-interesting-fields").serialize();
I haven't tried either of these, but that might give you a couple of ideas. Not that I would necessarily recommend either of them :)
Because you can't have nested <form> tags you'll need to close off the standard dotnet form tag like below:
<script type="text/javascript">
$(document).ready(function() {
$("#form_inside").append($("<input type='text' name='lname'>"));
$("#submitBtn").click(function() {function() {
var obj = $("#form_inside *");
var values = new Array();
obj.each(function(i,obj1) {
if (obj1.name && !obj1.disabled && obj1.value) {
values.push(obj1);
};
});
alert(jQuery.param(values));
}); });
});
</script>
<form id="form1" runat="server">
<div>
<div id="form_inside" name="form_inside"> <input name="fname" type="text" /><input type="button" id="submitBtn" /></div>
</div>
</form>
jQuery.param on a array of form elements will give you the same results as .serialize()
so you get all elements in div $("#form_inside *) then filter for elements then on the result jQuery.param will give you exactly what you need
Google custom search code is provided as a form tag. However, Asp.net only allows a single form tag on a page. What is the best way to implement their code so you can include it on an aspx page (say as part of a Masterpage or navigation element).
You can have multiple form tags on an ASP.NET page. The limitation is on server-side (runat="server") form tags.
You can implement two form tags (or more) as long as only one has the runat="server" attribute and one is not contained in the other. Example:
<body>
<form action="http://www.google.com/cse" id="cse-search-box"> ... </form>
<form runat="server" id="aspNetform"> ... </form>
<body>
You may be able to have multiple form tags, but note that they cannot be nested. You'll run into all kinds of weirdness in that scenario (e.g., I've seen cases where the opening tag for the nested form apparently gets ignored and then its closing tag winds up closing the "parent" form out).
You'll need to remove the form tag and use javascript send the query. Have a look at
http://my6solutions.com/post/2009/04/19/Fixing-Google-Custom-Search-nested-form-tags-in-asp-net-pages.aspx
I have included the before and after code as well. So you can see what I've done to integrate it with blogengine .net.
You could use Javascript:
<input name="Query" type="text" class="searchField" id="Query" value="Search" size="15" onfocus="if(this.value == 'Search') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'Search'; }" onkeydown="var event = event || window.event; var key = event.which || event.keyCode; if(key==13) window.open('http://www.google.com/search?q=' + getElementById('Query').value ); " /><input name="" type="button" class="searchButton" value="go" onclick="window.open('http://www.google.com/search?q=' + getElementById('Query').value );" />