I am trying to submit a mailchimp form from within my DNN (DotNetNuke) site. Typically, you just remove the form tags and put some javascript in the onclick event of the submit button...like here. This works and you can see as such here.
But, I am using this popup module, as I want this form to pop up when someone comes to the site. And in this configuration it does not work. It will submit the form to the designated URL, but no form data is passed. This page is here.
A couple of observations:
When you view the page source, the popup form is within the form tags, yet a this.form returns null in the script.
When you inspect the submit button element in Chrome, you see that the html form is then OUTSIDE the form tags.
So maybe there is some javascript with this popup module that is moving the DOM element on page load???
I created a js function to call on the input button submit; code is as follows:
function submitSubscription(clickedElement){
$form = $('body').find('form');
$form.attr('action', 'http://InciteResults.us2.list-manage1.com/subscribe/post?u=6d82b6a028c94cc75005eb4fe&id=1c7ceabac4');
$form.submit();
}
Note: in this function clickedElement.form is returning null.
Because your content is not in a <form>, you're going to put it inside a <form> in order for your script to work. You can either dynamically create a <form> element, or move your content back inside the main <form> when you submit. Try something like this:
function submitSubscription(clickedElement){
var $form = $('<form></form>', { action: 'http://InciteResults.us2.list-manage1.com/subscribe/post?u=6d82b6a028c94cc75005eb4fe&id=1c7ceabac4' });
$('#mc_embed_signup').wrap($form);
$form.submit();
}
Related
Built a form with HTML, CSS, Javascript linked to a Google Sheet. Built in VSCode.
TWO QUESTIONS:
1/ A pop-up box is supposed to pop up on form submission saying "Application Submitted!" if filled out with required fields. The pop-up box is not showing up -- but the data is being processed into the linked Google Sheet. The application instead just reloads.
2/ If filled out incorrectly, a pop-up box is supposed to pop up saying "Error!". However, even if filled out incorrectly, the data is being processed into the linked Google Sheet without this pop-up (and then reloading the page like above). It's like the Javascript is overriding the HTML code such as requiring email to be in an email format, etc.?? The HTML worked prior to writing in the Javascript linking to the Google Sheet.
JAVASCRIPT:
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<script>
function SubForm (){
$.ajax({
url:'[NOTE: URL IS HERE]',
type:'post',
data:$("#survey-form").serializeArray(),
success: function(){
alert("Application Submitted!")
},
error: function(){
alert("Error!")
}
});
}
</script>
ALSO THE HTML FOR THE BUTTON:
<button onclick="SubForm()" class="btn submit" type="submit" value="Let's Bop!" />Let's Bop!</button>
I think there are two things to observe here.
First,
Let's see what is the form action? or the action="" part of your form? Since you are using a button type='submit' and assuming this is inside your form, the form will submit and perform the action part.
If this is the case then you need your form to stop doing default behavior on submit so that the page stays and give time to your ajax to finish up so that alert can appear.
Second,
Let the form handle onSubmit, and remove onClick from the button as it is a submit button let it submit the form, but handle the onsubmit event. Even in this case, we will have to stop the form to perform its default behavior.
Here is a codepen you can refer https://codepen.io/vbrmnd/pen/eYjbRgw
I have a wordpress page that is using a modal (jQuery UI Dialog) window with a form in it. The modal works fine, however it has a form in the window with this form tag (content is loaded from a DIV):
<form id="inline_ddateform" onSubmit="javascript: return pCalc(this);">
When the form is submitted the main page reloads and the variables are coming back in the main site URL.
Before form submit: www.site.com
After form submit: www.site.com?m=4&c=8
How can I bring the variables into the form in the modal with the values that JS is returning? It's needed to display some info in the modal.
Use the function here: http://papermashup.com/read-url-get-variables-withjavascript/
It has a function that gets url variables for you. Copy it into your project then use like so:
var variables = getUrlVars()
var m = variables["m"]
alert(m);
Then you can use that where you like.
I have a Form like this in asp Classic ..
<form method="post" name="AddItemForm" id="AddItemForm" action="/files/includes/CartControl.asp" style="display:inline;">
// bunch of Hidden Fields.
Then a SUBMIT button.
action of the form takes all the hidden fields and then after processing them redirects user to a CART page.
now what I want to do is....I want user to click on ADD TO CART button, however I want user to stay on the product page while form submits to a new window (not a javascript new window...something like lightbox/colorbox/fancybox DIV etc).
I looked into many jQuery plugins but could not get a satisfied answer...which plugin is BEST for my case? any simple example?
basicly I want to submit to a new overlay div and within that DIV redirect user to a new page to show Product Info.
Thanks
It seems that you are looking for some functionality for asynchronous form submission. There is this jQuery AJAX Form plugin that provides AJAX functionality for forms. You will have something like:
$('#AddItemForm').submit( function() {
// Submit asynchronously
$( this ).ajaxSubmit( function() {
// Form processing is done
// Redirect to the shopping cart page
});
// Show a modal or a fancy "please wait" message
// Prevent default submission
return false;
});
You can find some info in this answer, the code from one of the answers:
$('input#submitButton').click( function() {
$.post( 'some-url', $('form#myForm').serialize(), function(data) {
... do something with response from server
},
'json' // I expect a JSON response
);
});
In "do something with response" you can take the data or url and load it into an overlay div.
If it's a URL, you can use jquery .load :
$('#result').load('ajax/test.html');
If it's html (or data which you wrap in html), just do
$('#result').html(theHTML)
the simplest way (in my view) is to add target attribute to the form which will open new window while the current page won't chage...
I have a mobile quiz, that I load 10 form questions into hidden divs, and after each question is answered, I fade and hide the question and unhide the next question, after they go through the 10 questions, how do I get it to post the actual data to the script waiting on the server ...form method=post action=process_quiz.php.. I am not really sure where/how to add that final submit button (obviously in the last div) but to work with the Javascript code to post the form data.
$(document).ready(function()
{
$('.btnNext').click(function()
{
$(this).parents('.questionContainer').fadeOut(500, function()
{
$(this).next().fadeIn(500);
});
});
$('.btnPrev').click(function()
{
$(this).parents('.questionContainer').fadeOut(500, function()
{
$(this).prev().fadeIn(500);
});
});
});
$("#mySubmit").click(function(){
$("#myForm").submit();
});
As long as the form has the following attributes defined:
<form action="process_quiz.php" method="post">
The documentation for jQuery form .submit() function is located here:
http://api.jquery.com/submit/
It doesn't really matter where the button is located, or if it is even a submit button with the code above. If it is an actual submit button located within the form DOM element then it will automatically submit the form on click without you needing to specify it.
Can I pass post variables and reload a page on clicking an hyperlink?
To be clear I have something like this.
Click
If javascript is enabled,
I think I can use "event.preventDefault()" to suppress passing as GET variable.
So now onclick, name should be passed as post variable instead of get.
If javascript is disabled,
Then the above should work.
You could do it, by creating a new form element, pointing it at the href and calling .submit() on it.
<a class="postlink" href="test.php?name=test">Click</a>
<script type="text/javascript">
$('.postlink').click(function() {
var form= document.createElement('form');
form.method= 'post';
form.action= this.protocol+'//'+this.hostname+this.pathname;
$.each(this.search.slice(1).split(/[&;]/g), function() {
var ix= this.indexOf('=');
if (ix===-1) return;
var input= document.createElement('input');
input.type= 'hidden';
input.name= decodeURIComponent(this.slice(0, ix));
input.value= decodeURIComponent(this.slice(ix+1));
form.appendChild(input);
});
document.body.appendChild(form);
form.submit();
return false;
});
</script>
Or you could just do an AJAX request instead and reload() the page afterwards if you prefer.
However, I'm not sure why you'd want to do this. What use is a link that's usually POSTed, except when it's not? (Not just when JS is disabled/unavailable or when it's a search engine, but also when the user middle-clicks the link or tries to right-click-bookmark it or whatever.)
If all you want is something that behaves like a button to submit a POST form, better to actually use a real form and submit button, and then use CSS to restyle it to look like a link if that's what you want it to look like.
Very good hint....
I was first trying to send the form data via an Ajax Post call and reloading the page afterwards, but it was not working properly:
var biq_select_val = jQuery('#biq_search_select').val();
jQuery.post(window.location.href,
{ biq_amazon_item_list_search: biq_select_val},
function() {window.location.reload();}
);
Now I am using just a:
jQuery('#biq_amazon_item_list_search_form').submit();
and it is working fine.
I have some 10 links on a page. When user clicks on those links ajax-reload must take place.
To be clear I have something like this.
one
Two
If javascript is enabled,
Onclick, ajax load must take place.
If javascript is disabled, Then the above should work.
Basically I am using name to limit some values of my search page.