collecting output and form submission on a different page? - javascript

I'm looking for a way to gather the output(in text) on a webpage after a form submission.
Is there a way to maybe see the http response of a form submission in Javscript?
Otherwise, I would like to know if there's a nice way to somehow, say parse or collect outputs of multiple webpage(same page) form submissions. I know it's not possible (or too complicated) to save a file with the output in Firefox using Javascript.
So an option for me is to set up another webpage that will accept form submissions and somehow output the http response or webpage after submitting a form on a different page.
I was trying to do all this in Greasemonkey but I can't figure out a way to collect the output of multiple form submissions(of the same page) for analysis after finishing. What I have so far is filling out the right form and submitting(though it seems to keep going in a loop forever because every time you submit the form you land back on the same page and the Greasemonkey script executes the form submission over and over again), but I'm stumped at how to somehow collect the results.
I have not used macros like iMacros before so perhaps that might be a more suitable approach?
Thanks! Open to any suggestions and hope to hear any help! Muchhhh appreciated! :) Thanks again!

I've not any experience with Greasymonkey, but an AJAX call is relatively easy when using jQuery (but I don't know whether jQuery works with Greasemonkey).
http://jsfiddle.net/9peGW/
$.ajax({ url: "/",
type: "GET",
data: $('#theform').serialize(), // returns like '?test=val&test2=val2'
// using the elements of the form
success: function(text, state, xhr) {
alert(text.substring(0, 200));
// alert first 200 response characters
// (so that it fits in the alert box)
alert(xhr.getResponseHeader("Content-Type"));
// alert the Content-Type response header
}
});
Note though that AJAX requests only work for the same domain as it is called from, but perhaps this is not applicable through Greasymonkey (I really don't have experience with that).

İt is too easy at İmacros. You can search for a tag and extract information that you need. Do not try jQuery. It is too complicated for this job, I know :)

Related

pass data using value of div (security)

is it safe to send the data(text) of div to the server via ajax? or get the url of an <a> tag and use it?
ex.
<div id="get-value">Some Value</div>
<button id="send" data-url="process.php"></button>
javascipt
$('#send').click(function() {
$.ajax({
url: this.dataset.url,
dataType: 'json',
type: 'post',
data: {
value: $('#get-value').text(),
}
});
});
What if I edit the text in the div and the data-url of button in the developer tools and click the button after?
It is safe to do this.
When working with Javascript and AJAX, you are subject to this inherent problem: it can always be modified. The best way to minimize the issue is to make sure that no secure operations occur on the client, and instead let the Javascript do the display and submit.
In this case, you can leave it as it is. As long as you are sanitizing the user input on the server side then you are doing most all you can (aside from obfuscation, which is rarely a good idea in Javascript).
In my opinion, and I'm no security expert but this is how I deal with things, you should always validate and sanitise user input on the server side. If a user can submit data, they can tamper with it, so it is not safe until you have cleaned it up and made sure it is safe on the server.
I don't know what you are using for your server side, but most frameworks these days have built in ways of sanitising user input before committing it to, say, a database. I would look into the documentation of your server side language/framework to find out the best way to handle incoming user input safely.
is it safe to send the data(text) of div to the server via ajax? or get the url of an tag and use it?
Yes.
Note, however, that since it is coming from the browser, it is user input and should be treated as such. You can't assume that data you gave to the browser with the expectation that it would be sent back to the server isn't going to be tampered with.
Don't use such for things like authorisation. You can't trust the browser to tell you if the user is an admin or not. You need to have proper authentication and then do the authorization for the user on the server.
Don't use it without suitable escaping for the purpose. e.g. Don't stick it into SQL without using a bound argument. Don't stick it in HTML without converting special characters to entities (or using a HTML parser with a white list filter to clean out XSS risks).

Display form result in same page with only client-side script possible?

I have a bit of a tricky work problem I hope to get some help with.
To handle various forms and storing entries, we use an in-house tool which I cannot modify. Basically what happens is:
I enter he URL the original page, and the URL of the destination page after successful submission.
The tool spits out some HTML and Javascript code, the most important of which is a unique URL, let's call it (redactedURL), that goes after the action attribute.
When the form is submitted, the page will refresh to one of two possible destination URLs: the one I inputted if success, or (redactedURL) if error.
I can download all the entries from the tool afterward.
The HTML is quite simple. checkform() is a simple validation script.
<form action="(redactedURL)" name="enenForm" method="POST" onSubmit="return checkForm()">
The issue with this is that I can't style the (redactedURL) error page, which is quite ugly. I am wondering if there is anyway I could
Suspend automatic display results of form submission
Determine the destination URL, and based on that, write out a custom thank you/error message (since I cannot access the server-side script, this seems to be the only solution to determine if the submission is successful or not).
Make sure that tool still properly stores all the entries.
Any help would be much appreciated. Thanks!
Don't use a form. Instead use AJAX. I think this SO Question will provide a start. Basically you use JavaScript to submit data to a server using XMLHttpRequest. The returned HTML is a string which you could either modify or (better yet) normalize and add to the DOM.
For an advanced example jQuery-Mobile does this concept when you click a link instead it gets the HTML from the server as an AJAX request copies the HTML inside the <body> and inserts it into the DOM.
Search for tutorials about AJAX and jQuery (or your prefered JS library). Like this one.

Intercept and edit ajax data before submit

So I am trying to write a script that will go out and edit the html for all of my tumblr blogs, so i dont have to do it manually.
The problem is that tumblr doesnt really have a form that i can edit, and then submit through JS.. they have a very strange way of compiling the custom html and submitting an ajax request.
So, i was wondering if there was a way to intercept the ajax call before it goes out, edit a field in the data, and then make the submission my self?
I tried something like this:
var submitted = false
$("body").ajaxSuccess(function(evt, request, settings){
j = $.parseJSON(settings.data)
j.custom_theme = "PUT HTML HERE"
if (!submitted)
$.post(settings.url, j, function(data){
console.log(data);
submitted = true;
})
})
But i got a 403 forbidden error.
Does anyone have any ideas?
I'm not sure exactly what you're trying to do, but must this be done with a custom script? It sounds like this will only be used by you, so an extension should work. If so, there is a very useful Firefox extension, in the spirit of Firebug, called Tamper Data. This should be able to do what you want.
It allows you to monitor each request made by the browser, and you can turn on an option that allows you to look at, and edit, every single request before it gets sent.
Well, it's pretty obvious that ajaxSuccess isn't going to work in the way you want it to.
Assign the function which sends the AJAX request a new name and overwrite it. Call the previous function at the end of the new function, i.e. after manipulating the data the way you want.

AJAX Form Submit v/s Standard Form Submit

I am trying to implement GSA(Google Search Appliance) in my app. I want to use the REST(JSON) call that the GSA provides. The point for this question is that, the GSA needs a POST request in order to return the JSON response.
Now when I made a new dummy HTML page with a form and make a POST request with parameters I get a successful response(JSON)
But, when I try using the $.post(...) method to send a POST request to the URL I am not getting the actual response, but some error page.
I just wanted to know is there a difference between a standard submit and an ajax form submit. If yes, is there any workaround for this situation.
Please Help. Thanks in Advance.
If you want to submit the form through ajax but in the conventional way, You should have a look at jquery form plugin . Just make your submit button to type button and on click submit your form thorugh .ajaxSubmit(). I think this will solve your problem.
GSA search protocol is based on HTTP GET. All search parameters need to be passed in via query string. Also, out of box, GSA only returns either HTML or XML results. You could apply an xslt that transforms xml to JSON -- but I'm yet to find one that works really well (i.e., I've found a couple but they don't return valid JSON in all instances).

What's the best way to submit a form to a form script on another site?

I am working on a basic HTML page that requires the user to send details to a script located on a third-party website. What I require is for the user to fill out a form on my web page, and have that information submitted to another third-party form.
I do not wish to return anything to the user, other than whether the submission was successful or not. I also do not want the user to have to go to this third-party site to submit using their form.
It was suggested by the website itself to use an iframe and hold its form on your page, but I was wondering what other, preferably better methods are available to me. It'd be nice if there were some form of jQuery/js code I could use to do such a thing.
It'd be nice if there were some form
of jQuery/js code I could use to do
such a thing.
One way is to use jQuery's $.ajax or $.post methods like this:
$.ajax({
url: url,
success: function(data) {
alert('succeeded');
}
});
Maybe you could try cURL with CURLOPT_POST and CURLOPT_POSTFIELDS?
well it depends if you have control over the other website as well. as in you are able to access the code.
If you are you can use JSONP to pass the values and get a response, but to do it you will have to assign a callback that is sent and then formatted at the front of a JSON object for it to work (they do this for security).
The other option is to use a php ob_start() function. (Note: this will only work if the form you are trying to submit these values to allow $_GET to be used to proccess the form)
ob_start();
include('http://wwww.anotherwebsite.com?key1=value1&key2=value2&key3=value3');
$returnString = ob_get_contents();
ob_end_clean();
So then from here $returnString is the result, which you can basically search (strpos() to see if true is how I would do it) in php to find key words to see if it was successful or not or what ever you need to check for.
But again, this only works if the form on the remote server uses $_GET and not $_POST (or allows both through globals).
I know this is a php solution, but a warning is that for security purposes, there are serious restrictions on what javascript can do cross server.. the best javascript way to do cross server is JSONP, which jQuery does support so you might want to look into that.. but as I mentioned, for it to work you need to have a callback be able to be sent back with the response, and the response needs to be in a jsonp object format.. (basically you either need to 1. have the other server have a jsonp api for you to use or you have control over the other server's server side files to make the changes needed).
Do you want like that? It's simple form submitting to another website. But, I can't check whether it's successfully submitted or not.
<form action="http://www.another.com">
<input name="myInput" type="text">
<input type="submit" value="Submit">
</form>

Categories