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!
Related
Can someone please tell me what happens behind the scenes in the following case (i.e. explain the whole technical process)?
<form method="get" action="#">
<input type="text" name="d" value="flowers">
<button type="submit">send</button>
</form>
In this case after one has clicks on “send” a new webpage opens saying: "You have searched for "flowers" " and an image of some flowers below.
In the browser tab right after the URL of the newly opened page there is
“/?s=flowers”. What is that?
Thank you in advance for your answers!
When you click Send, the page data specified in the form information and values is passed to the server via HTTP.
The /?s=flowers is the GET data being passed back to the server. Although, based on the form code you've provided, the "name" of that value is d. So the URL would actually have /?d=flowers
The PHP or server side language then handles that information to do specific tasks. It can access the info using the name "d". This method of sending data is called GET, there are also other ways of doing this. The most common, POST, does not display the data in the URL and send the data through HTTP headers.
The code you've shown has an action of "#" which means the HTTP method is being sent the same page. Meaning this page code would have some PHP located in it. This can also be done by using a seperate file, such as action='send.php'
I am creating an application largely based on the template provided with WebMatrix 2.
Everything is working great, although I'm having some issues creating a "logout" link in my header.
Currently I have the following link:
Sign Out
Which in turn, directs to this page:
#{
WebSecurity.RequireAuthenticatedUser();
if (IsPost) {
// Verify the request was submitted by the user
AntiForgery.Validate();
// Log out of the current user context
WebSecurity.Logout();
// Redirect back to the return URL or homepage
var returnUrl = Request.QueryString["ReturnUrl"];
Context.RedirectLocal(returnUrl);
} else {
Response.Redirect("~/");
}
}
But when I click this link, it does nothing, and I'm still logged in. Where am I going wrong?
The problem is that by default logout links are (and should be) validated POST requests, this is to prevent XSS attacks of logging your users out by redirecting them to the logout page.
Thanks to this code:
if (IsPost) {
// Verify the request was submitted by the user
AntiForgery.Validate();
.. you will need to create a form for logging out, like so:
<form method="post" action="~/account/logout.cshtml">
#AntiForgery.GetHtml()
<input type="submit" value="Logout" />
</form>
Of course, you can use JavaScript to have a normal link submit that form, thus making it look like a normal link to the end user, only they're protected!
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
});
});
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;
});
I am not a big web programmer, and have a friend who wants me to help him with something.
He wants to be able to have a form that once it is submitted changes to say something like "Thanks for submitting" and have the form info disappear. He wants it to be easy for anyone to use, so he can give it to various people to use on their sites.
I was thinking I could use javascript to do it, but not really 100% sure. I want to avoid anything that isn't HTML as much as possible so that it will be usable by as many people as possible.
Thanks.
What is supposed to happen to the information in the form? Doesn't matter?
If you want it to be pure HTML there's only one good solution: Write one HTML page with the form, and another almost identical one with the success message in place and the form data hidden. Simple.
On the submitting side:
<h1>Email Subscription:</h1>
<form action="successForm.html">
<input type="text" name="emailAddress" />
<button type="submit">Send Info</button>
</form>
On the receiving side (successForm.html)
<h1>Email Subscription:</h1>
<p>Great job, you submitted!</p>
However, if you need something to change on the very same page, you're going to have to use something non-HTML. HTML just won't make any decisions about what to display. It is dumb... it just displays.
It's very easy to use JavaScript to detect when the form was submitted, and then hide the elements you need to hide, and show the success message:
<!-- Goes in the <head> or in a seperate script -->
<script type="text/javascript">
var theSubmitButton = document.getElementById('formSubmit');
theSubmitButton.onclick = function() {
var theFormItself =
document.getElementById('theForm');
theFormItself.style.display = 'none';
var theSuccessMessage =
document.getElementById('successMessage');
theSuccessMessage.style.display = 'block';
}
</script>
<!-- Goes in the body -->
<h1>Email Subscription:</h1>
<p id="successMessage">You submitted the form, good job!</p>
<form id="theForm" action="successForm.html">
<input type="text" name="emailAddress" />
<button id="formSubmit" type="submit">Send Info</button>
</form>
Of course, this example is oversimplified. It doesn't do anything with the data, and it doesn't follow best practices, or check that the data is valid in any way. I'm just trying to give a basic idea of how to use JavaScript for this purpose. If you're not a programmer, then coming up with a small, distributable piece of software might be a good job for someone else.
However, you still need some mechanism to store, email or otherwise DO something with the form. Add an edit to your question and I'll be happy to clarify my answer with a specific example.
(Another note, I didn't try to run that Javascript, so if you see an error, please just note and I'll fix it)
Try the jquery form plugin. This will achieve what you're after in an elegant way with minimal coding. In addition to this you'll need to download jquery.
This is a javascript solution, however it's safe to assume that everyone is using a javascript capable browser.
The standard way to do this is to submit the form to a different page (submit.php, for example), which provides a new page with the thankyou message. No javascript, no DHTML.
You could use javascript to replace the innerHTML of a huge div containing everything, or remove all the elements, but I'd advise against it.
There's 2 options:
Old school forms:
Person clicks submit and form data gets sent server side via GET or POST,
the page loads again and displays "Thanks for submitting"
New school javascript AJAX
Person clicks submit and javascript submits form data to server side via AJAX and removes the form elements to then add "Thanks for submitting"
Anything else is some hybrid of both these techniques.
I know you want to avoid anything other than html but this simple php code may help. You could use php within the page
fill out form and press submit to send data to form handler
In form handler, have data processed and then redirect back to the form page with a header('Location: yourwebaddresshere?form=submited');
Then in the original form page, add a php IF statement above the form code:
$url = "http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
if(strpos($url, 'form=submited')) {
echo 'Your thank you message here';
exit(); // Use this to stop code after this statement from loading
}