I have an Eloqua from with one simple e-mail field on it but I would like to send the data via Ajax to prevent the page from refreshing. I've been looking around on the internet but didn't find anything that's working so far..
Anyone has experience with this?
Thanks.
Ajax probably won't work because of domain restrictions.
You could have a look at blind form links, though:
http://img.en25.com/Web/McAfee/blind-form-link-generator-v2.html
This page generates a link for you, parameters are basically the form field names as set on the form.
This is a simple http request, which will post your data to the form specified.
You can use it as an iframe src, or even an img src. Data will be submitted, page won't reload.
Edit regarding Seb's complaints:
The link was provided as a helper. Please note that the generator creates a link which uses &e= for the email address field value.
I have senn this fail many times, so please use the original form field name set on the eloqua form.
If you are using Eloqua Landing pages or external pages, they will most likely be hosted on a subdomain (Eloqua) or the main domain (external page) of your organization, while all form submits go to a subdomain of eloqua.com.
This means ajax will be blocked. Hence the workaround using the "blind form link" in an iframe, for example.
This link is always the same structure. Example:
http://now.eloqua.com/e/f2.aspx?elqFormName=elq-form-name&elqSiteID=123456&emailAddress=EmailAddress&firstName=value&lastName=value&checkbox=1
You can use now.eloqua.com/e/f2.aspx for all blind form submits.
The parameter "elqFormName" specifies what form the data is being sent to.
"elqSiteID" is necessary to identify your Eloqua instance.
All following parameters refer to the HTML name given for the field on the Eloqua form.
If you send a blind form submit, all processing steps in Eloqua will be triggered, but used in an iframe or img tag for "fake ajax" will not trigger any redirection set on the form in Eloqua.
Related
What is the best way to place 2 identical forms on the same page, but use the same form action and fields for each form? How can I keep response messages in the respective form area from which the data was submitted?
I'd have one form in the footer of my site, and one form in a popup on the home page of my site. I'm using a hidden div and Magnific to open the popup containing the same code from the form that is located at the footer. Essentially, both form do the same thing, and utilize the same form action.
I do not have access to the form action, or the code in the form action page.
Currently, the forms existing on the same "page" are no problem, but when I submit an email on one form, the errors and success messages show up on both the popup form as well as in the footer form.
I've read that this may be possible to do with ajax, but for completeness sake, I want to make sure that I'm building that I'm doing what I can with the form html, before moving on to studying ajax for this.
Sadly there is no nice html/liquid solution for this.
The only way is to use cookies in order to save information which form was submitted and show the error message only for that form instead of the two ones.
AJAX is not a good solution because of the Google Recaptch-a when you submit the form more than once, which is a real pain in the a** since there is no way to disable it and the form will fail if you try to submit it with ajax.
The easiest solution is to use cookies, other option is to rely on an APP for this, but it may be an overkill for this.
Forms in Shopify are... how to put it nicely... dumb... basic... not developer friendly or just not made to be tweaked in any sort of way ( excluding the front-end ).
This question exists in different flavors, but not for AJAX pages.
I use AJAX to pull a single video into my page and I want a custom FB share button for it. Everything I've read so far says that FB pulls the required title and image from meta-tags in the page's < head> section (og:image and og:title).
I've tried to change the meta properties when the AJAX call returns, before rendering the share button. This hasn't worked. It uses the values that were present upon initial page load. I have yet to encounter a single answer to this question.
Are there data attributes I can add to the 'fb-like' div to specify a custom title and image (similar to data-href)?
Danke!
You need an individual URL for each individual piece of content that you want to share. Open Graph objects (and simple shared links “become” such, automatically) are identified by their URL (og:url).
Now if your whole page is built on AJAX, you still need to create such individual URLs somehow – the Facebook scraper tool does not “speak” JavaScript, and relies solely on the OG meta information that the server delivers for any URL it requests.
Since the hash part of an URL is only of relevance client-side (and does not even get send to the server), “typical” AJAX URLs that rely on those to tell the client which piece of content to load in the background are no good here.
So if you want to share two pieces of content (videos) as http://www.example.com/?v=vid1 and http://www.example.com/?v=vid2, then you have to make sure that your server delivers the meta data for each video under its respective URL.
I'm using the SMCF Wordpress plugin on this site: http://fingelly.com/
As you can see it uses ajax to post the form fields to get mailed and then updates the modal.
Some of the nav options at the site take you to a 3rd party IDX (real estate listings) provider. For example click on the tabs marked agents and the url changes to fingelly.idxre.com...
As you can see the html is customizable there... I had tried adding the same simple modal contact form to my template there but encountered a problem because I cannot post using ajax to my wordpress driven site from this other domain.
I understand this limitation is for security reasons to prevent xss. How would you suggest working around it in this case?
For now we've simply removed the contact tab.
If you just need to send information to the server and not worry about the response, you create a hidden iframe on the page and post the data there. You could also make a JSONP call if the data would fit in a GET.
I have a PHP MVC Web App and Apache mod_rewrite rules already working fine, but when I create forms using method="get", the submitted URL looks like
contact/submit?a=b&c=d
I would like my form to submit to
contact/submit/a/b/c/d
Both posting and getting the form work fine on the server side, but when using post method, the back button always asks for reposting the form values and furthermore I want the strings in the URL for SEO. I think JQuery might let me intercept the form submit event and refresh to the url dynamically, but it it seems there must be an easier way to do it that I am missing.
You could use the POST->REDIRECT->GET pattern that Spring Web Flow utilizes. This would allow you to post as you wish and then redirect to contact/submit/a/b/c/d. It would also solve the problem with the back button asking you if you want to resubmit your form data. See this related article.
The GET method uses standard query string arguments to pass form data via an HTTP GET request.
The HTTP GET request is not intended to modify any data on the server. POST is designed for modifying data on the server.
GET may be cached. POST will not.
/a/b/c/d is not a standard format (as in RFC) for passing data. However, for requesting data or URLs to post to, that has become popular.
So, if you are updating server data, just use a POST -> REDIRECT -> /a/b/c/d.
If you are just reading data from the server, then you will need to use a bit of Javascript to read your form values and construct a query string, and then go to it with window.location = ...
Have fun!
I have many forms that use AJAX (w/ jQuery) for validation and data submission. When a form is filled out correctly, I use window.location to redirect the page after I get an acceptable response from the PHP script. On the new page, I use a session variable (set after the AJAX calls) to display the appropriate content. Please tell me if this is standard practice or please give me some suggestions.
Thanks!
Is there a reason you would use a $_SESSION variable to store the post-submission content? Standard practice would be to validate the form via AJAX but submit it in the standard way (i.e. via $_GET or $_POST) after validation. This way you don't need to store anything to a session and you'll likely have less to debug as you'll be submitting the form and displaying its results in the most widely-accepted way.
The benefit of AJAX is typically so that you can submit the form without actually having to do the redirect/refresh. You could get the same functionality by simply having your form POST to the destination URL, redirect to the appropriate place from there or send them back to the form displaying any errors that may have occurred. You could use AJAX to validate the form before the submission to save your users a redirection back to the form to fix their errors, but this is really just a convenience for them. Also, you will have to validate any user data on the server side once it has been submitted, as you can't rely on client-side validation, so you might as well forget the AJAX validation.