simple form within server form in asp.net?
I have a strange situation...(strange for beginners like me not for experts:)
In my pages from my web site I have:
<form runat="server">
<!--some user controls-->
<form action="http://gramma.us1.list-manage.com/subscribe/post?u=64d2cf63fb98f334f406892db&id=f3181fb3be" method="post">
<!-- rest of newsletter code -->
</form>
<!--other user controls-->
</form>
As you see, that nested form is from some generated code from mail chimp newsletter subscribing html code.
Of course, this does not work. (the page is successfully rendered but the form posting does not work)
The question is:
- which is the work-around to make this nested form to work? I cannot use multiple
runat="server"forms in my page to separate the main form from the nested one...
UPDATE:
The entire code from mail chimp...
<div id="mc_embed_signup">
<form action="http://gramma.us1.list-manage1.com/subscribe/post?u=64d2cf63fb98f334f406892db&id=f3181fb3be" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" style="font: normal 100% Arial, sans-serif;font-size: 10px;">
<fieldset style="-moz-border-radius: 4px;border-radius: 4px;-webkit-border-radius: 4px;border: 1px solid #ccc;padding-top: 1.5em;margin: .5em 0;background-color: #fff;color: #000;text-align: left;">
<legend style="white-space: normal;text-transform: capitalize;font-weight: bold;color: #000;background: #fff;padding: .5em 1em;border: 1px solid #ccc;-moz-border-radius: 4px;border-radius: 4px;-webkit-border-radius: 4px;font-size: 1.2em;"><span>join our mailing list</span></legend>
<div class="indicate-required" style="text-align: right;font-style: italic;overflow: hidden;color: #000;margin: 0 9% 0 0;">* indicates required</div>
<div class="mc-field-group" style="margin: 1.3em 5%;clear: both;overflow: hidden;">
<label for="mce-EMAIL" style="display: block;margin: .3em 0;line-height: 1em;font-weight: bold;">Adresa de e-mail <strong class="note-required">*</strong>
</label>
<input type="text" value="" name="EMAIL" class="required email" id="mce-EMAIL" style="margin-right: 1.5em;padding: .2em .3em;width: 90%;float: left;z-index: 999;">
</div>
<div id="mce-responses" style="float: left;top: -1.4em;padding: 0em .5em 0em .5em;overflow: hidden;width: 90%;margin: 0 5%;clear: both;">
<div class="response" id="mce-error-response" style="display: none;margin: 1em 0;padding: 1em .5em .5em 0;font-weight: bold;float: left;top: -1.5em;z-index: 1;width: 80%;background: FBE3E4;color: #D12F19;"></div>
<div class="response" id="mce-success-response" style="display: none;margin: 1em 0;padding: 1em .5em .5em 0;font-weight: bold;float: left;top: -1.5em;z-index: 1;width: 80%;background: #E3FBE4;color: #529214;"></div>
</div>
<div><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn" style="clear: both;width: auto;display: block;margin: 1em 0 1em 5%;"></div>
</fieldset>
<a href="#" id="mc_embed_close" class="mc_embed_close" style="display: none;">Close</a>
</form>
</div>
<script type="text/javascript">
var fnames = new Array(); var ftypes = new Array(); fnames[0] = 'EMAIL'; ftypes[0] = 'email'; fnames[1] = 'FNAME'; ftypes[1] = 'text';
try {
var jqueryLoaded = jQuery;
jqueryLoaded = true;
} catch (err) {
var jqueryLoaded = false;
}
var head = document.getElementsByTagName('head')[0];
if (!jqueryLoaded) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js';
head.appendChild(script);
if (script.readyState && script.onload !== null) {
script.onreadystatechange = function () {
if (this.readyState == 'complete') mce_preload_check();
}
}
}
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://downloads.mailchimp.com/js/jquery.form-n-validate.js';
head.appendChild(script);
var err_style = '';
try {
err_style = mc_custom_error_style;
} catch (e) {
err_style = 'margin: 1em 0 0 0; padding: 1em 0.5em 0.5em 0.5em; background: ERROR_BGCOLOR none repeat scroll 0% 0%; font-weight: bold; float: left; z-index: 1; width: 80%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; color: ERROR_COLOR;';
}
var head = document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet) {
style.styleSheet.cssText = '.mce_inline_error {' + err_style + '}';
} else {
style.appendChild(document.createTextNode('.mce_inline_error {' + err_style + '}'));
}
head.appendChild(style);
setTimeout('mce_preload_check();', 250);
var mce_preload_checks = 0开发者_如何学Python;
function mce_preload_check() {
if (mce_preload_checks > 40) return;
mce_preload_checks++;
try {
var jqueryLoaded = jQuery;
} catch (err) {
setTimeout('mce_preload_check();', 250);
return;
}
try {
var validatorLoaded = jQuery("#fake-form").validate({});
} catch (err) {
setTimeout('mce_preload_check();', 250);
return;
}
mce_init_form();
}
function mce_init_form() {
jQuery(document).ready(function ($) {
var options = { errorClass: 'mce_inline_error', errorElement: 'div', onkeyup: function () { }, onfocusout: function () { }, onblur: function () { } };
var mce_validator = $("#mc-embedded-subscribe-form").validate(options);
$("#mc-embedded-subscribe-form").unbind('submit'); //remove the validator so we can get into beforeSubmit on the ajaxform, which then calls the validator
options = { url: 'http://gramma.us1.list-manage.com/subscribe/post-json?u=64d2cf63fb98f334f406892db&id=f3181fb3be&c=?', type: 'GET', dataType: 'json', contentType: "application/json; charset=utf-8",
beforeSubmit: function () {
$('#mce_tmp_error_msg').remove();
$('.datefield', '#mc_embed_signup').each(
function () {
var txt = 'filled';
var fields = new Array();
var i = 0;
$(':text', this).each(
function () {
fields[i] = this;
i++;
});
$(':hidden', this).each(
function () {
if (fields.length == 2) fields[2] = { 'value': 1970 }; //trick birthdays into having years
if (fields[0].value == 'MM' && fields[1].value == 'DD' && fields[2].value == 'YYYY') {
this.value = '';
} else if (fields[0].value == '' && fields[1].value == '' && fields[2].value == '') {
this.value = '';
} else {
this.value = fields[0].value + '/' + fields[1].value + '/' + fields[2].value;
}
});
});
return mce_validator.form();
},
success: mce_success_cb
};
$('#mc-embedded-subscribe-form').ajaxForm(options);
});
}
function mce_success_cb(resp) {
$('#mce-success-response').hide();
$('#mce-error-response').hide();
if (resp.result == "success") {
$('#mce-' + resp.result + '-response').show();
$('#mce-' + resp.result + '-response').html(resp.msg);
$('#mc-embedded-subscribe-form').each(function () {
this.reset();
});
} else {
var index = -1;
var msg;
try {
var parts = resp.msg.split(' - ', 2);
if (parts[1] == undefined) {
msg = resp.msg;
} else {
i = parseInt(parts[0]);
if (i.toString() == parts[0]) {
index = parts[0];
msg = parts[1];
} else {
index = -1;
msg = resp.msg;
}
}
} catch (e) {
index = -1;
msg = resp.msg;
}
try {
if (index == -1) {
$('#mce-' + resp.result + '-response').show();
$('#mce-' + resp.result + '-response').html(msg);
} else {
err_id = 'mce_tmp_error_msg';
html = '<div id="' + err_id + '" style="' + err_style + '"> ' + msg + '</div>';
var input_id = '#mc_embed_signup';
var f = $(input_id);
if (ftypes[index] == 'address') {
input_id = '#mce-' + fnames[index] + '-addr1';
f = $(input_id).parent().parent().get(0);
} else if (ftypes[index] == 'date') {
input_id = '#mce-' + fnames[index] + '-month';
f = $(input_id).parent().parent().get(0);
} else {
input_id = '#mce-' + fnames[index];
f = $().parent(input_id).get(0);
}
if (f) {
$(f).append(html);
$(input_id).focus();
} else {
$('#mce-' + resp.result + '-response').show();
$('#mce-' + resp.result + '-response').html(msg);
}
}
} catch (e) {
$('#mce-' + resp.result + '-response').show();
$('#mce-' + resp.result + '-response').html(msg);
}
}
}
</script>
<!--End mc_embed_signup-->
I find the tidiest way to do this is to remove the mail chimp form from your page, and just have an asp.net form with the same fields as what the mail chimp had. Then, on the button click event do something like:
Response.Redirect("MailChimp.aspx?email={0}&name={1}", txtEmail.Text, txtName.Text)
Then, on MailChimp.aspx, have a form with the mail chimp action URL, and fill the fields like so:
<input type="text" name="email" value='<%=request("email")' />
Then have some javascript on the page to submit the form on page load.
- You can have the second form hidden and displayed outside the form runat server. You'll still have the controls displayed where they should be and with javascript you can populate the hidden form and post it. Of course this is very fiddly.
- Check whether the inner form will accept get request and use backend code to do Respone.Redirect with the parameters in the query string
- Check if you really need the form to wrap the whole page. If you can get the form runat server to wrap only the controls that really need it (ones with controls that need to postback their values (textboxes, button, etc))
- You can have an iframe and have the inner form live in the iframe.
None of these methods is very pretty unfortunately.
You can also redirect directly to mailchimp from your postback, prividing the subscribe=1 for a new subscription:
Response.Redirect(string.Format("http://[YOUR URL]/subscribe/post" +
"?u=31da5df49c6d1901c0fca018f&id=c7bb5267ef&EMAIL={0}" +
"&subscribe=1", address));
This may be late, but I just got the embedded mailchimp code working on my asp.net website.
I removed the form tags, and replaced their input button with this:
<asp:Button runat="server" PostBackUrl="http://[YOUR URL]/subscribe/post?u=64d2cf63fb98f334f406892db&id=f3181fb3be" Text="Subscribe"/>
It works perfectly for me. (I should note I was using the non-javascript version of the embedded code).
加载中,请稍侯......
精彩评论