Our website is hosted using EE. I've been tasked to add to our "Contact us" form so that it posts to an external sales lead generation system (hubspot)
We were given an URL to post to, and when I finally found the html for the form in question I noticed that it is already pointing to another sales lead system. I don't want to remove this URL. Is it possible to do two posts at the same time?
<form action="https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST"
http://yoursite.yourportal.hubspot.com/?app=leaddirector&FormName=X
You can't do that with a single request. Use XMLHTTP objects or JQuery.post(); with different URL's and the same data. Simply send multiple requests. Alternatively, you could send one request to your server, where PHP can send it onwards to other pages, as well as other servers, evading the same-origin policy javascript has.
You could give your form an id and instead of having a btton of type submit, you have a regular button with an id(in this example id is submit) and then using jquery do something like so on click of the button:
$("button#submit").click(function() {
$.post("https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8", $("form#id").serialize(), function(data){
//DO something
});
$.post("http://yoursite.yourportal.hubspot.com/?app=leaddirector&FormName=X", $('form#id').serialize(), function(data){
//DO something
});
});
Related
I recently added an HTML-based share on whatsapp button to my mobile web application built via the Django framework:
<a rel="nofollow" target="_blank" href="whatsapp://send?text=https://example.com" data-link="whatsapp://send?text=https://example.com" data-action="share/whatsapp/share">
<button><img src="whatsapp.svg">Share</span></button>
</a>
Now I'd like to track all the clicks on this share button. Being a server-side developer, an obvious way is to POST to a view, log the click, and then redirect from there. Specifically, in the template:
<form method="POST" action="{% url 'whatsapp_share' %}">
{% csrf_token %}
<button><img src="whatsapp.svg">Share</span></button>
</form>
In the view:
def whatsapp_share(request):
if request.method == 'POST':
clicker_id = request.user.id
# log the click and clicker_id, preferably asynchronously
return redirect("whatsapp://send?text=https://example.com")
This looks simple enough. But look at the <a> tag closely in the original snippet at the top. It contains data-link and data-action attributes as well.
How do I include these data-* attributes in the redirect as well?
Secondly, I feel one drawback of using the aforementioned view-based approach is a server roundtrip. Ergo, in the pure HTML case, the client took care of everything, however, with the Django view involved, the server has to be invoked first (adding latency).
Is there an alternative way to do this such that the client doesn't have to wait for the click to be logged? If so, a simple, quick illustrative example to get me started would be a great.
I'd suggest you to leave link as it is. You don't need form.
Simplest solution is to make ajax call to whatsapp_share url. And ypu don't even need POST request as you're not sending any data
add onclick event to element: <a onclick="logWhatsappClick()">> and then:
function logWhatsAppClick() {
$.ajax({
url: your-application.com/log_whatsapp_share,
method: 'GET',
success: function(data){
console.log('Sent log request')
},
error: function() {
console.log('Error')
}
});
}
So when user clicks on your button - application sends log request in background and don't wait for it to complete.
In your django view code do not return redirect, just HTTP 200 OK.
Note, that there is no protection for the case when someone will send these requests from other place rather than from your website. It's easy to implement, but I think that it's not very important for this small feature.
I am currently trying to submit form data to a third party site from our own wordpress based website.
I need it to open in a new blank window or tab. I am able to do this so far using a target="_blank" on the form itself.
The tricky part is I also want the data to save on my own site.
The only way I know how to do this double action is to hook in after the post is saved on my site but this means the form is submitted to my own site and then I use javascript or something to redirect to the third party site but this creates pop up warnings which I can't have in this case...
Does anybody have any ideas around this and if I have not been detailed enough please don't hesitate to ask me more info.
Thanks
Perhaps submit by AJAX first to the local site, then -- on success -- submit the form & navigate them whole page to the other domain?
With jQuery:
<form id='form' method='post' action='http://remote.website.com/send-data-here'>
<input ...>
<input ...>
...
<button type='button' onclick='doubleSubmit();'>Submit</button>
</form>
<script type='text/javascript'>
var LOCAL_URL = "/myForm-receiver.php";
function doubleSubmit() {
var data = $('#form').serialize();
$.post( LOCAL_URL, data, new function(response){
// Successfully posted by AJAX to Local Website;
// -- now POST the form to the destination site,
// -- & navigate to that result page.
$('#form).submit();
});
}
</script>
I'm assuming you want to receive a copy of the data locally, but the user will navigate to the destination domain for the "result page".
Need to submit the data through ajax and saved the data in your data base then redirect to third party url or submit to there use like jQuery(selector).ajax(dataString:--);
may this help you thanks!
I have a page where there are several search / filter button which, when clicked, refresh the contents of a list below through AJAX.
In the process, I'm modifying history (through pushstate) so that the new filtered page is bookmarkable, and so the back button works. I'm also listening for the popstate event, to react to Back.
My code looks more or less like this:
window.addEventListener("popstate", function(ev) {
if (!window.history_ready) { return; } // Avoid the one time it runs on load
refreshFilter(window.location.href, true);
});
refreshFilter: function(newURL, backButtonPressed){
$.ajax({ url: newURL}).done( blah );
if (!backButtonPressed) {
window.history_ready = true;
history.pushState(null, null, newURL);
}
}
This works wonderfully, except for one weird case...
User is in page "A"
They click a link to go to this page that plays with history (let's call it "B")
They run a couple of filters, then press Back a few times, so they're back at the initial state of "B"
They click Back once again, which sends them back to "A"
At this time, if they press Forward, instead of making a request to the server again for Page "B", the browser simply displays a bunch of JSON code as the page contents (this JSOn is the response of one of my AJAX requests to filter stuff)
At least in latest Chrome
Why is this happening and how can I avoid it?
Chrome caches the pages you visit and when you go back or forward it uses the cache to display the page quickly. If the URLs you are using to retrieve JSON from the server by AJAX is the same one Chrome would hit, then it's possible Chrome is picking that page from the cache, which instead of being the nice HTML it's just a JSON dump.
There is a cache option for $.ajax:
$.ajax({ cache: false, url: newURL})
See http://api.jquery.com/jquery.ajax/
#pupeno is right, but to give a more solution oriented answer, you need to differentiate the JSON from HTML in the routes your server has.
I know two ways of doing this:
1) If you call /users you get HTML, if you call /users.json you get JSON.
2) If you call /users you get HTML, if you call /api/users you get JSON.
I like 1 a lot better, but it depends on the web framework if whichever is used by default or wether you configure that yourself.
1 is used in Ruby on Rails, 2 is used in other frameworks too.
First let me set the situation.
I am writing a simple client html page and a simple server side program.
In detail, the page has a submit button to POST some data to the server program.
The problem is that any time I test the page to push the submit button ,the browser displays the new page which displays only the return message my server program returned.
How can I modify the html or the server side program so that the browser keeps the page unchanged before after the submit button is pushed.
I know an easiest way ; letting the sever program returns the same string as the client html page.
Thank you in advance.
In a regular form submission, your page will be whatever the server sends back. The form's action might be the same page, and then your server-side code can read the value of any input fields, and set the values in the response back to what they were in the request. This should result in the page looking the same as it did before the submit button was pressed. However, the page has "changed" in the sense that it was reloaded.
Alternatively, your form can make an Ajax request, which means that you'd need to use Javascript to intercept and stop the form submission, and then use additional coding to send the Ajax request, and then receive and process the response.
What you want is probably a postback:
http://en.wikipedia.org/wiki/Postback
1.) AJAX
You could use JavaScript and AJAX to POST the data.
2.) IFrame (not recommended)
You could also create a hidden IFrame and set the target attribute of the form to it.
What you want to do doesn't seem to be very clear.
If you want to submit your POST data without loading a new web page, you can use Ajax. It may be simple to do it in jQuery, and even simpler if you serialize your form data.
$('form').submit(function() {
$.post('your-post-url',$(this).serialize(),function(data) {
alert('Data posted!');
});
return false;
});
Is there a way to specify a form either through type or action url to not open the response? In other words I would like to send the info to the server, but not do anything on the client. I know I can use ajax and ignore the response, but I would like to avoid adding all the js to my code if possible.
Edit: I didn't mean to limit myself to the html form. In my case server side solutions were also acceptable.
Have the server return HTTP 204 (No Content) after the form submission. According to the HTTP 1.1 spec:
10.2.5 204 No Content
The server has fulfilled the request
but does not need to return an
entity-body, and might want to return
updated metainformation. The response
MAY include new or updated
metainformation in the form of
entity-headers, which if present
SHOULD be associated with the
requested variant.
If the client is a user agent, it
SHOULD NOT change its document view
from that which caused the request to
be sent. This response is primarily
intended to allow input for actions to
take place without causing a change to
the user agent's active document view,
although any new or updated
metainformation SHOULD be applied to
the document currently in the user
agent's active view.
The 204 response MUST NOT include a
message-body, and thus is always
terminated by the first empty line
after the header fields.
This sounds like exactly what you want.
try this:
<iframe id="invisible" ...
<form target="invisible" ...
I found that name attribute should be specified as well (I tested in IE11). E.g:
<iframe id="invisible" name="invisible" style="display:none;"></iframe>
<form method="post" target="invisible" action="url.com/whatever?x=y" id="fileForm" enctype="multipart/form-data">
With ASP.NET you could have a page that processes the form post and simply end the response right away, this will leave the user at the same page.
However, no response to the user at all is not the best user experience.....