I'm trying to log into a site using Phantom JS so I can keep on top of my suppliers prices.
Username and password are being entered but the login button is not pressing.
If the login button is a <input> instead of <button>, .click() should work, however I cannot find a way to press the <button>.
The Log in form has no ID,NAME or ACTION to target a submit.
If anyone knows a solution I would be very grateful
thanks
Phantom JS
//username entered automatically on load
document.getElementById("password").value="1234";
document.getElementById('btn-login').click();
Login Form
<form onsubmit="return false;" method="post">
<fieldset class="customer-login">
<div class="form-group">
<label for="name">Email Address</label>
<input type="username" class="form-control" id="username" placeholder="Enter your email address">
</div>
<div class="form-group">
<label for="name">Password</label>
<input type="password" class="form-control" id="password" placeholder="Enter your password">
</div>
<button type="submit" id="btn-login" class="btn btn-primary btn-block">
Log In
</button>
<hr>
<button type="button" id="btn-signup" class="btn btn-default btn-block">
Sign Up
</button>
<button type="button" id="btn-reset" class="btn btn-default btn-block">
Forgotten your password?
</button>
</fieldset>
</form>
result after running script
UPDATE
document.getElementsByClassName('btn btn-primary btn-block')[0].click();
works however as nothing returns and it redirects, it stops the program before it goes back to the home page logged in.
Has anyone got a solution to get the program to wait (when it doesnt know its redirecting.)?
i tried
do { phantom.page.sendEvent('mousemove'); } while (page.loading);
When submitting the form, nothing was returned, so the program stopped.
The program did not wait for the page to load as it took a few seconds for the redirect to begin.
telling it to move the mouse until the URL changes to the home page gave the browser as much time as it needed to change. then telling it to wait for the page to finish loading allowed the page to full load before the content was grabbed.
page.evaluate(function () {
document.getElementsByClassName('btn btn-primary btn-block')[0].click();
});
do { phantom.page.sendEvent('mousemove'); } while (page.evaluate(function()
{
return document.location != "https://www.bestwaywholesale.co.uk/";
}));
do { phantom.page.sendEvent('mousemove'); } while (page.loading);
Related
I have just started using GWTBootstrap. I have set up my login page and now I want to:
If login was unsuccessful stay on page
If value returned from the database is "1" go to htmlpage1.html
If value returned from the database is "2" go to htmlpage2.html
In this way if the wrong login information is entered I do not go to the next page and, if successful login, people with different access levels are presented with different information.
Is there a tutorial that covers this please?
My html code is:
<form class="form-signin">
<h2 class="form-signin-heading">Please sign in</h2>
<input type="text" class="input-block-level" placeholder="Email address">
<input type="password" class="input-block-level" placeholder="Password">
<label class="checkbox">
<input type="checkbox" value="remember-me"> Remember me
</label>
<button id="SignIn" class="btn btn-large btn-primary" type="submit">Sign in</button>
<script type="text/javascript">
document.getElementById("SignIn").onclick = function () {
location.href = "htmlpage1.html";
};
</script>
</form>
</div> <!-- /container -->
You need to create an AJAX request inside on-click method in order to get some response from a POST url, based on it, you will redirect to the correct html.
Anyway, is better to use some framework to do that.
I am trying to display a simple alert message once a user clicks the Save and Email to Corporate button inside of a modal. The modal submits the form and sends an email based on the auth.users group so the load takes a second. I need to alert the user of this after they submit so they do not continue to click the button. I don't need anything fancy, so I am using <div onsubmit="myfunction"> and <script> to display the alert. This worked the first time but that was it.
How would I code this in the <div> and <script> to work every time, or is there better solution?
template.html
</div>
<div class="modal-footer">
<div onsubmit="myFunction">
<input type="submit" form="formset" class="btn btn-primary" value="Save and Email to Corporate">
</div>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
script
<script>
function myFunction() {
alert("The email was submitted");
}
</script>
I have the following form submit code
<div class="top-links">
<ul>
<li>Sign In
<div class="top-link-section">
<form id="top-login" role="form" action="">
<div class="input-group" id="top-login-username">
<input type="text" class="form-control" name="username" placeholder="Username" required>
</div>
<div class="input-group" id="top-login-password">
<input type="password" class="form-control" name="password" placeholder="Password" required>
</div>
<div class="input-group" id="top-login-remember">
<label><input type="checkbox" value="yes" name="remember_me"> Remember me</label>
</div>
<button class="btn btn-danger btn-block" type="submit">Sign In</button>
</form>
</div>
</li>
</ul>
</div>
If the user does not click on any anchor link in the page before sign in, then the form login works fine.
Working fine
http://example.com/index.php
However, if the page url become something like (with anchor # behind the url address)
http://example.com/index.php#
as I got some links that is of
Events
If user click Events to see some popup before they login, the login form will not work, How do I handle such scenario to ensure login still proceed even with # at the url address.
--
Assume after login always goes back to
example.com/index.php but I prefer if it can be example.com without the index.php
If below code puts # at the end of the page then you can make it to return false to do nothing when user clicks on this click and just open the popup.
Events
You can use pure JS or jQuery to achive the same. So modify the HTML of those elements like this,
Events <!-- for plain JS -->
Events <!-- for plain jQuery -->
At JS side you need to add following:
<script>
function eventClickBtn() {
// Your logic to open popupbox
return false;
}
// For jQuery
$('.eventClickBtn').click(function(e){
e.preventDefault();
});
</script>
By using event.preventDefault(); default action of the event will
not be triggered, same goes for plain JS. If you return false it won't fire up the hyperlink mentioned in href
I have this form in html
<form class="form-horiz" role="form" action="" >
<div class="form-group-1" style="margin-left:5px">
<div class="col-sm-10">
<input type="text" class="form-control" id="adsend" placeholder="Enter your ad" >
</div>
</div>
<div class="form-group-1">
<div class="col-sm-offset">
<button type="submit" class="btn btn-default" name="send" id="send" >Send</button>
<button type="submit" class="btn btn-default" value="classify">Classify</button>
</div>
</div>
</form>
What I need to do is: The user will write something in text and after click on classify button js message will appear to the user with some results, is it possible to do something in action="" or there is another way to do it?
You can use event listeners for button clicks if you'd like instead of form actions. Check out this documentation, hopefully it'll help! I'd suggest something like this:
<form class="form-horiz" role="form" action="" >
<div class="form-group-1" style="margin-left:5px">
<div class="col-sm-10">
<input type="text" class="form-control" id="adsend" placeholder="Enter your ad" >
</div>
</div>
<div class="form-group-1">
<div class="col-sm-offset">
<button type="submit" class="btn btn-default" name="send" id="send" >Send</button>
<button id="classify" type="submit" class="btn btn-default" value="classify">Classify</button>
</div>
</div>
</form>
and then have this in some js file
document.getElementById("classify").addEventListener("click", function () {
// do some js stuff here
});
EDIT:
Another alternative would be to use an onclick attribute, which is also documented in the link I posted before, but this is a little antiquated, and your function has to be named in the global scope and it's not really a good idea in general. I'd go with an event listener!
I would suggest you to have jQuery added into your Application. It makes your life easier in your construction.
Check this https://jsfiddle.net/dqwLv8q7/
I added id in your button and made it preventDefault() as it fire us submit action of your form as you set it "type=submit". So your "classify" click button now just shows Alert message with value of your "adsend" ID input value. You can consider to use another tag and replace it with message to your user.
I got my website over on the Github Pages Service. I'm trying to implement the FormSpree free contact form but after you submit the form, it redirects you to a different website. Something I'd like to avoid. So I looked it up on the internet and of course others wanted to get rid of it too (I omitted my email in the below picture).
This is the form I got above but it doesn't actually work at all. It worked before I tried to fiddle with it though.
Here is what the form looks like by default from FormSpree:
<form action="//formspree.io/your#email.com"
method="POST">
<input type="text" name="name">
<input type="email" name="_replyto">
<input type="submit" value="Send">
</form>
Here is my version (which worked fine before I tried to get around the redirect)
<div class=modal-body style="background-color: #454545">
<p>Please use the form below to contact us regarding feedback or any questions you may have!
We will never use the information given below to spam you and we will never pass on your
information to a 3rd party.</p>
<p>As we are using <a target="_blank" href="http://formspree.io">FormSpree</a> for this form
please consult their privacy policy for any questions regarding this matter.</p>
<form id="contactform" method="POST">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Name</span>
<input name="form-name-input" type="text" name="name" class="form-control" required>
</div>
<div class="input-group">
<span class="input-group-addon">Email</span>
<input name="form-email-input" type="email" name="_replyto" class="form-control" required>
</div>
<div class="input-group">
<span class="input-group-addon">Subject</span>
<input name="form-subject-input" type="text" name="subject" class="form-control" required>
</div>
<div class="input-group">
<span class="input-group-addon">Description</span>
<textarea name="form-description-input" name="description" class="form-control" rows="4" cols="60" required></textarea>
</div>
<input type="text" name="_gotcha" style="display:none" />
<input class="btn btn-success" data-dismiss="modal" type="submit" id="form-submit-btn" value="Submit">
<input type="hidden" name="_next" value="http://www.dynamicrealities.net" onclick="FormSentConfirmation()"/>
</div>
<script>
var contactform = document.getElementById('contactform');
contactform.setAttribute('action', '//formspree.io/' + 'dynamicrealities#gmail.com');
</script>
</form>
</div>
<div class="modal-footer" style="background-color: #333333">
<button class="btn btn-danger btn-bg" data-dismiss="modal" type="button" id="form-dismiss-btn" onclick="">Close</button>
</div>
And when I call _next I want it to execute the following alert:
function FormSentConfirmation() {
alert('Thanks for the email, we\'ll be in touch promptly.');
}
When I press the Submit button, all that happens is that the form goes away but I don't receive any emails. I'm probably just doing this wrong as I am fairly new still to HTML/JavaScript.
Update: The feature available only on paid plans.
Use this hidden input field inside the form for redirection after form submission. You can redirect users to a page that you like or you have created by using this code block.
<input type="hidden" name="_next" value="//site.io/thanks.html" />
replace value with a valid thank-you page URL.
Follow this link for a tutorial on how to use Formspree and also a video demo
Follow their AJAX example at the bottom: https://formspree.io/
$("#sendMessage").on("click", function() {
$.ajax({
url: "//formspree.io/dynamicrealities#gmail.com",
method: "POST",
data: {message: "hello!"},
dataType: "json"
});
});
Remember to include jQuery as well for this to work. Remove the:
var contactform = document.getElementById('contactform');
contactform.setAttribute('action', '//formspree.io/' + 'dynamicrealities#gmail.com
and replace it with my code and change the selector. Or use $("form").on("submit"...
Here is my example, which sends you a mail and prompts an alert for the user: http://jsfiddle.net/228d4snb/
Do anything you'd like to do right before that return false;
You can put the form in an iframe so only the iframe gets redirected. What I did was create a separate html doc with just the contact form html (and any associated scripts) and then in my actual contact.html page I put:
<iframe src="contact-form.html" class="container"></iframe>.
Style the iframe to the appropriate size and with no border and it should work swimmingly.