I work for a news company, and we want to be able to submit breaking news to reddit easily. I'm trying to create something that will login and post a link to reddit from just a url on our website.
Anyway, I am trying to use Javascript to click the buttons to login and I'm having problems.
Here's the button code right here:
<button class="btn" tabindex="4" type="submit">login</button>
which seems to submit this form:
<form class="login-form-side" onsubmit="return post_user(this, 'login');" action="http://www.reddit.com/post/login" id="login_login-main" method="post"><input type="hidden" value="login-main" name="op"><input type="text" tabindex="1" maxlength="20" name="user"><input type="password" tabindex="2" maxlength="20" name="passwd"><div style="display: none;" class="error WRONG_PASSWORD field-passwd">invalid password</div><span style="display:none" class="error RATELIMIT field-ratelimit"></span><span style="display: inline;" class="error RATELIMIT field-vdelay">you are doing that too much. try again in 1 minute.</span><div class="status error" style="display: none;"></div><div id="remember-me"><button tabindex="4" type="submit" class="btn">login</button><input type="checkbox" id="rem-login-main" tabindex="3" name="rem"><label for="rem-login-main">remember me</label>recover password<div class="clear"></div></div></form>
Anyone have any idea how to do this?
Reddit has an extensively documented API that can be accessed with POST and GET requests. Also, is there any reason you're using JS to manipulate the DOM? You could use one of the wrappers instead of manually changing the HTML DOM.
Related
Origin of the problem: In our flying club we are sharing an account to view different approach charts on a third party website. To access them, you have to login with your credentials and then click a button that will forward to a created link. I tried using that link directly, but it contains an MD5-Hash that will be newly created at every visit and I couldn't recreate the values that are used to generate it.
My idea: Since I have the login data for the third party website and I know under which ID I can find the according href-Link, I would like the user to able to click a button on my website which causes an auto-login on the third-party side, grabs the href-Link and forwards the user to the page.
Unfortunately I can`t seem to find an appropriate way to achieve that, as the login-form also creates and uses a CSRF-Token (see example below):
<form name="sLogin" method="post" action="https://www.example.com/sTarget/downloads" id="login--form">
<input name="sTarget" type="hidden" value="account">
<div class="register--login-description">Einloggen mit Ihrer E-Mail-Adresse und Ihrem Passwort</div>
<div class="register--login-email">
<input name="email" placeholder="Ihre E-Mail-Adresse" type="email" autocomplete="email" tabindex="1" value="" id="email" class="register--login-field">
</div>
<div class="register--login-password">
<input name="password" placeholder="Ihr Passwort" type="password" autocomplete="current-password" tabindex="2" id="passwort" class="register--login-field">
</div>
<div class="register--login-lostpassword">
<a href="https://example.com/passwordreset" title="Passwort vergessen?">
Passwort vergessen?
</a>
</div>
<div class="register--login-action">
<button type="submit" class="register--login-btn btn is--primary is--large is--icon-right" name="Submit">Anmelden <i class="icon--arrow-right"></i></button>
</div>
<input type="hidden" name="__csrf_token" value="j0LpIt1lwL4ya3UEc4C0ayDE3ZpJhd"></form>
Do you guys have an idea how to approach this problem? Can I somehow auto-login via PHP or JavaScript?
In my polymer 2 app I have something like this:
<form class="styling" autocomplete="on">
<div class="styling" >
<label>email</label>
<input name="email" autocomplete="email">
</div>
<div class="styling" >
<label>email</label>
<input name="password" autocomplete="current-password">
</div>
<div class="styling">
<a class="styling" on-tap="doRequestFunction">Login<a>
</div>
</form>
My issue is there are a lot of sources saying what works and what doesn't and I've tried removing the outer div, I've tried changing the email to a username, I've tried to change the <a> to an <input type="submit">. I've also tried to add an invisible username input below the email input. I have a database element that does my ajax calls so ideally I'd like to just call the request function on a form submit, but there doesn't appear to be a way to do this because it wants me to perform the action with a file or something like that.
TL;DR is there a way to do this:
<form class="styling" onSubmit="doTheRequestFunction" autocomplete="on">
<div class="styling" >
<label>email</label>
<input name="email" autocomplete="email"/>
</div>
<div class="styling" >
<label>email</label>
<input name="password" autocomplete="current-password"/>
</div>
<div class="styling">
<input class="styling" type="submit">Login</input>
</div>
</form>
There doesn't appear to be a way to do this in polymer and the ways that do don't request for the users password and are depreciated anyways. Using Chrome primarily.
EDIT: Please, no JQuery, only Javascript. I don't know what JQuery is doing half the time and it's sloppy.
autocomplete is an HTML attribute (https://www.w3schools.com/tags/att_input_autocomplete.asp). It's either on or off. It's designed to tell the browser whether it should attempt to autocomplete a field or not. The default is on so you shouldn't have to set it unless you're trying to prevent the browser from autocompleting.
Try to remove all your autocomplete attributes, and submit your form. The browser should ask you if you want to save your username and password at which point it should be populated next time you come to your form.
Also, you have an bad tag on the end of your submit button: </inoput>
<input type="submit" value="Send Request"> should be fine.
Boys, I found it.
paper-input autocomplete fails to fill
This is a polymer specific issue I was having. Currently polymer requested support for their auto-fill apparently and it's still not there. This is the solution for now. Pop that bad boy into you index.html and weep tears of joy.
Just make it
<input name="password" type="password"/>
So if input field has attribute type as password it will trigger browser to remember.
I have a C# MVC website and I'm trying out Google Cloud Print(GCP) to print.
Google Provides this example
https://developers.google.com/cloud-print/docs/appDevGuide
<form action="https://www.google.com/cloudprint/submit" method="post" enctype="multipart/form-data" id="submitForm">
<input type="hidden" name="xsrf" value="xsrfTokenHere"/>
<input type="hidden" name="printerid" value="123456789"/>
<input type="hidden" name="ticket" value='{"version": "1.0", "print": {}}'/>
<input type="text" name="title" value="My Document"/>
<input type="text" name="contentType" value="application/pdf"/>
<input type="text" name="tag" value=""/>
<input type="file" name="content"/>
<input type="submit" value="Print"/>
</form>
Which does what it should.
But it sends the user to the Google website were it displays the JSON response.
Is there any way to skip this last part, e.g let the user submit the form without moving to the google website.
I've tried various jQuery AJAX and similar calls. I've also tried posting the form inside of an iframe but none of these work since Google does not allow Cross-Origin calls.
If there was a way to post this either in HTML, Javascript or C# without jumping to the google result page it would've been great.
I'm using Formspree - https://formspree.io/ to redirect my forms to my email as I'm hosting my website on a static page.
I'm also using an external library Toastr (http://codeseven.github.io/toastr/) to make a small notification appear once the user clicks the 'Submit' button for the form.
The problem is that I cannot get Formspree and Toastr to run at the same time. When I implement both of them, none of the features work.
Code: (Please say if I need to add more for the problem to be clearer).
<form action="http://formspree.io/emailhere" method="POST">
<div>
<div class="row">
<div class="6u 12u(mobile)">
<input type="text" name="name" id="name" placeholder="Name" />
</div>
<div class="6u 12u(mobile)">
<input type="email" name="_replyto" id="email" placeholder="Your Email" />
</div>
</div>
<div class="row">
<div class="12u">
<input type="text" name="subject" id="subject" placeholder="Subject" />
</div>
</div>
<div class="row">
<div class="12u">
<textarea name="message" id="message" placeholder="Message"></textarea>
</div>
</div>
<div class="row 200%">
<div class="12u">
<ul class="actions"> //Pressing submit redirects to a 'thank you' page
<li> <input name="submit" type="submit" value="Send" id="submit"/> </li>
<li> <input type="reset" value="Clear Form" class="alt" /> </li>
</ul>
</div>
</div>
</div>
</form>
Now when you press the submit button it redirects you to a Formspring thank you page. When I add the Javascript for the toast notification it does not even do this meaning the JavaScript 'disrupts' the submit button functionality somehow.
$(document).on('click', '#submit', function(evt){
evt.preventDefault();
toastr.success('Thanks for the email, will be in touch promptly.');
});
Thanks for looking.
Edit: So I want it so both of them work together. This is the code for HTML were you can choose the redirect page after you press the submit button:
<input type="hidden" name="_next" value="//site.io/thanks.html" />
I want it so it does not redirect anywhere but does do my JS function notification.
You're preventing the default behavior (to redirect to the form URL) in your click handler. Simply remove
evt.preventDefault();
And it should work (although obviously, since your page is being redirected, the Toastr popup won't be visible).
If you want it to open in a new tab, you should prevent the default behavior (as you do currently) and then open the URL manually.
The best way to get around this is to use a button element instead of the submit input element. This would require you to submit the information to an endpoint of some sort using ajax and then notifying the browser of the submission using your javascript function. All of this is to avoid the redirect that happens when you use the default browser behavior to submit the form. If you don't use ajax, you have to redirect due to default browser behavior.
I hope someone can assist with this. I dont have access to the website backend, so I cant change the js script uploaded there. What I am trying to achieve is make a simple form to submit an issue report and then display a "Thank you" popup and redirect back to main page of the account on our page.
So I can make a form no problem. I copied one of the functioning forms by going to Edit link and clicking on Show Source in Page Body. But I can't stop the default behavior of it going to another page after Submit button is pressed. I suspect it is in js script on the back end. I'll copy code below.
<center>
<b>App Issues Report Form</b>
<br>
</center>
<form action="/Modules/SendForm" method="post" class="form" id="NewForm">
<input name="formFields" value="CONTACTID,AgentName,Notes" type="hidden">
<input name="formLabels" value="Contact ID:,Agent Name:,Notes:" type="hidden">
<input name="fromAddress" value="no-reply#callcenter.com" type="hidden">
<input name="toAddress" value="name#CallCenter.com" type="hidden">
<input name="subject" value="A new message about app" type="hidden">
<input name="emailMsg" value="The following data has been collected:" type="hidden">
<input name="CONTACTID" value="##CONTACTID##" type="hidden">
<input name="companyId" value="##COMPANY_ID##" type="hidden">
<div class="clearfix">
<label>Agent Name:</label>
<div class="input"><input id="AgentName" name="AgentName"
class="validate[required] xlarge" value="##LOGGEDIN_AGENT_FIRST_NAME##
##LOGGEDIN_AGENT_LAST_NAME##" type="text">
</div>
</div>
<div class="clearfix">
<label>Notes:</label>
<div class="input"><textarea id="Notes" name="Notes"
class="validate[required] xxlarge"></textarea>
</div>
</div>
<div class="clearfix grey-highlight">
<div class="input no-label">
<input class="button blue" value="Submit" type="submit">
<input class="button grey" value="Reset" type="reset">
</div>
</div>
</form>
<script type="text/javascript">
$(document).ready(function() {
$("NewForm").click(function( event ) {
alert( "Thank you for your feedback" );
event.preventDefault();
});
});
</script>
It used to have only this at the end when I copied the code:
<script type="text/javascript">
$(document).ready(function () {
new setupAjaxForm('NewForm'); });
</script>
I tried searching and suggestions here didnt seem to work:
How to redirect user to another page after Ajax form submission
How to redirect user to another page after Ajax form submission?
http://learn.jquery.com/about-jquery/how-jquery-works/
The first thing you have to look at is action="/Modules/SendForm" - this is what does the redirection. If you don't want to redirect, set this to the name of the page you have the form. Obviously there is a whole lot more to forms and redirection (and some other js code might influence this too, nonetheless we don't see what the function setupAjaxForm is supposed to do here), but this is really the first thing to check / get right.
EDIT: I think I understand it more now: basically if you don't have access to the /Modules/SendForm page (where most probably, among others, like form validation, the redirection also happens, then you can't do much to change the redirection.