I am trying to visit a website and log in automatically.
After this, I want to return whether or not this was a success or failure, but I can't get it to work. The page loads blank and nothing happens.
Note: I have deliberately greyed out the URL.
Below is my attempt,
<HTML>
<HEAD>
<script src="https://code.jquery.com/jquery-2.2.3.min.js" type="text/javascript"></script>
<TITLE>Login</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
<script type="text/javascript">
$(document).ready(function () {
runLogin();
});
function runLogin(){
alert("start");
if (window.location.indexOf("url") > -1) {
jQuery("#j_username").val("username");
jQuery("#j_password").val("password");
jQuery("#loginForm").submit();
}
}
</script>
If you want to test your login form, use Protractor or other e2e test framework, but this way does not seem very safe.
http://angular.github.io/protractor/
It's loading a blank page because your back-end script isn't redirecting back to the page you started on. One option is to send the current webpage URL as an extra field to the login form so that it can redirect back after it has logged in. This will require you to refactor your back-end code so that it can handle this extra information (not really possible if you're using j_security_check). Another option is to make an AJAX request to your login page so that it doesn't actually redirect the page, it just submits the form quietly and then JS handles the response.
If you want to add the URL of the current page to the login request, do this:
function runLogin() {
if (window.location.indexOf("url") > -1) {
jQuery("#j_username").val("username");
jQuery("#j_password").val("password");
jQuery("#loginForm").append(
'<input type="hidden" name="url" value="'+window.location.href+'"/>'
);
jQuery("#loginForm").submit();
}
}
If you want to use AJAX to send a login request:
function runLogin() {
var $form = $("#loginForm");
$.post($form.attr("action"), $form.serialize(), function(data) {
// login successful/unsuccessful message displays
// depending on what "data" contains
});
}
Related
What I want to do
Get a form using an external script. Prefill and disable some fields. Example:
How I do it
I retrieve a form using an external script(s) :
<!-- Lumesse js imports -->
<!--Apply-->
<script type="text/javascript"
src="https://emea3.recruitmentplatform.com/apply-app/static/apply/release/2-LATEST/apply-preloader-namespaced.js"
th:src="#{https://emea3.recruitmentplatform.com/apply-app/static/apply/release/2-LATEST/apply-preloader-namespaced.js}"
data-lumesse-apply=""
data-lumesse-apply-config-key="XXX"
data-lumesse-apply-host="https://emea3.recruitmentplatform.com"
data-lumesse-apply-description-placement="bottom"
data-lumesse-apply-menu="top"
data-lumesse-apply-menu-placement="top"
data-lumesse-apply-repeatable-style="on-demand">
</script>
<script src="https://emea3.recruitmentplatform.com/apply-
app/static/apply/release/2-LATEST/apply-application-form-namespaced.js"
th:src="#{https://emea3.recruitmentplatform.com/apply-
app/static/apply/release/2-LATEST/apply-application-form-namespaced.js}">
</script>
<!-- in comment because otherwise conflict with static/vendor/jquery.min.js -->
<!-- <script src="https://code.jquery.com/jquery-1.12.3.min.js"
th:src="#{https://code.jquery.com/jquery-1.12.3.min.js}"
th:integrity="sha"
th:crossorigin="anonymous"></script>-->
<script src="https://emea3.recruitmentplatform.com/apply-
app/static/themes/release/latest/silk/js/main.js"
th:src="#{https://emea3.recruitmentplatform.com/apply-
app/static/themes/release/latest/silk/js/main.js}"></script>
The code for prefill or disable works fine.:
<!-- custom javascript -->
<script type="text/javascript" th:inline="javascript" >
$(document).ready(function() {
// fix menu when passed
$('.masthead').visibility({
once : false,
onBottomPassed : function() {
$('.fixed.menu').transition('fade in');
$('.navbar-fixed-top').css({'top': '52px'});
},
onBottomPassedReverse : function() {
$('.fixed.menu').transition('fade out');
$('.navbar-fixed-top').css({'top': '75px'});
}
});
// create sidebar and attach to menu open
$('.ui.sidebar').sidebar('attach events', '.toc.item');
window.setTimeout(function(){
preFillForm();
},0);
});
function preFillForm(){
var gegevens = [[${gegevens}]];
for(var id in gegevens){
$("#" + id).val(gegevens[id]);
}
$("#first_name_1").attr('disabled','disabled');
$("#last_name_2").attr('disabled','disabled');
$("#e-mail_address_3").attr('disabled','disabled');
}
</script>
The problem
My fields don't get prefilled .. My guess is because they don't get reloaded or get overwritten ..
First possible solution
After many hours I added a setTimeout of 0. This seems to work. Now I discovered that this only works on a page refresh or when the user already visited the site and did a page refresh before ...
So still when a user go to the site for the first time it doesn't work ..
Any help would be much appreciated
Cheers
(PS: setTimeout of more seconds is not the way I want to go ..)
UPDATED
My application is a Spring Boot App. Working with Thymeleaf. Also use of Semantic and Jquery in FrontEnd.
Try using sessionStorage or localStorage (sessionStorage seems to be better in this situation).
https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage
I want to process a GET extension in a HTML page and not a PHP page.
I have looked through the internet and not found anything.
URL = examplesite.com?id=1234
I assume this would go to the index page on the domain. As the index page is a HTML page, is there a way to get the details of the extension transferred to another link I have in the html script that emails me when someone looks at the site.
<script src="trigger.php">
</script>
This way I can customise the extension to know where the person found me. id=1234 is from twitter, id=2345 from FB etc.
Then i could place the extension onto the script to send me the email.
<script src="trigger.php?id=1234">
</script>
Is there a way to get the HTML page to process extension and pass it on in a variable of some sort.
Thanks in advance
Robert
You can do it in Javascript in the HTML. window.location.search contains the query string from the URL.
You can then use an AJAX request to send the query string to your server script.
<script>
$(document).ready(function() {
var script = 'trigger.php' + window.location.search;
$.get(script);
});
</script>
This is not possible with plain HTML. By definition, HTML is not dynamic. It can't process anything you want. However, there are three options.
Firstly, you can use JavaScript and AJAX calls to make another HTTP request to examplesite.com/processID.php (or another PHP page) which will process the request.
Another way to use JavaScript would be to use a client side API such as MailChimp to send the email directly from the users computer.
Or you could just redirect your root page for your domain examplesite.com to lead to index.php. I'm sure that's very easy to configure in mainstream servers such as Apache or Nginx. Otherwise please ask another question on Server Fault about how to set this up using your server.
If you are using a PHP hosting provider, they should also be able to help redirect the root page. If you don't have any access to PHP on your hosting provider, you're out of luck. You must only use the second option.
Do it with ajax
<form id="form1">
<input type="text" />
<button type="submit" id="sendforms">send</button>
</form>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#sendforms").click(function() {
var combinedFormData = $("#form1").serialize();
$.get(
"trigger.php",
combinedFormData
).done(function(data) {
//alert("Successfully submitted!");
$("#result").html(data);
}).fail(function () {
//alert("Error submitting forms!");
})
});
});
</script>
I am working on a project and I am trying to use jquery to send a variable to php. This a file called test2.php that I have been using to test out the code, can anyone tell me what I am doing wrong because it should be printing out the variable when you click on the button but nothing is happening.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var something="hello";
$("button").click(function(){
$.ajax({ url: 'test2.php',type: "GET", data: { q : something }});
});
});
</script>
</head>
<body>
<button>Get External Content</button>
</body>
</html>
<?php
if(isset($_GET['q']))
{
$q = $_GET["q"];
echo $q;
}
?>
Your code looks generally correct but you have to remember that an AJAX call sends the data "Asynchronously", which means when you click on the button this data is being sent to a separate instance of "test2.php" for processing. It is not reloading the current page with this new data.
The "test2.php" code you are viewing in browser is only run on the server side once when you first start up the page, and there is no 'q' in the '$_GET' variable at that time. The AJAX request is sending data to a separate instance of the same "test2.php" file and it is receiving some data back, but it is not using that information to load anything into your browser.
Depending on what you are trying to achieve there are many different solutions. You could use what you receive from your AJAX request to update information on the page like so:
$.ajax({
url: "test2.php",
type: "GET",
data: { q: something},
success: function (response) {
// do something with 'response' here
}
});
Or you could have the button instead be a simple <a> tag that reloads the current page in browser with information stored in '$_GET' like so:
Button
Then when your PHP code looks for 'q' it would actually find it in the $_GET variable because you reloaded the page.
I need to send an email(silently) each time page was loaded.
I tried below code :
<html>
<head>
<script language="javascript" type="text/javascript">
var email = "h.kamrava#yahoo.com"
var subject = "test"
var body = "Hello world"
document.write("<form name="form" action=\"mailto:"+ email +"\?subject="+ subject +"\&body="+ body +"\" method=\"post\" enctype=\"text/plain\"></form>")
</script>
</head>
<body onload="document.form.submit()">
</body>
</html>
It's does't work to me! What am i doing wrong? tnx
I suggest you let the server do this, like PHP mail, rather than have JS do it. You can send a request to the server on page load to tell the server to send an email to your target. That way:
No messy, creepy looking scripts on your page.
They'll never know an email was actually sent.
"Fire and forget". Send the request to the server, and done! The server does the rest.
Your email address, written only on the server, stays hidden in the server side and avoid email harvesters and subsequently, spam.
The request that triggers it could be anything, like loading a 1x1 gif, a script, AJAX or whatever.
I don't think you can do the same through forms, especially a post form. In either case what you do won't be silent as it requires the user to send that email. mailto: simply presents the user with a way to send the email using their own client.
If you want to send an email quickly from your HTML document, use mailto: from within an anchor, then either wait for the user to click it or force it to click.
My link
If you can use PHP or some other server-side language, it'd be much easier and "silent". Check out the mail() function of PHP, which allows you to send an email to whoever from whoever.
you need to use ajax for this purpose .
for example you can use JQuery ajax , something like this :
$(document).load('ajax/mail.php?email=exp#mail.com&subject=test&body=hi')
and then in php page use mail() function to send it
EDIT: Looking at the form code, I can see that this won't actually send an email...but this would be how you would submit a form using javascript. If you want to send an email silently, you will need to post to some backend service.
Try putting everything into a load handler:
<html>
<head>
<script language="javascript" type="text/javascript">
function sendEmail(){
var email = "h.kamrava#yahoo.com"
var subject = "test"
var body = "Hello world"
document.write("<form name="form" action=\"mailto:"+ email +"\?subject="+ subject +"\&body="+ body +"\" method=\"post\" enctype=\"text/plain\"></form>");
document.form.submit();
}
</script>
</head>
<body onload="sendEmail()">
</body>
</html>
checkout this :
http://jsfiddle.net/4gGFR/
and instead of calling form post, call that <body onload="sendemail();">
Reqs:
I want to make an external page with a 'Become a Fan'-button.
I want users to login to facebook once they open the page (this is because of other features in the site)
So I call FB.Connect.requireSession once the page loads, and put a <fb:fan></fb:fan> control on the page.
Then when I open the page I see the 'Connect with Facebook to Continue' pop-up and a small 'Become a fan' button. This seems right. When I log in to Facebook using the pop-up the 'Become a fan button' disappears!!
Can anyone explain this weird behaviour or does someone know a way to reach my requirements in a different way.
Below you can see my code.
Thanks in advance!
<!-- Head -->
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/nl_NL" type="text/javascript"></script>
<script type="text/javascript">
var fbApiKey = "MY_KEY";
var fbXdReceiver = "xd_receiver.htm";
function fbLoad() {
FB.init(fbApiKey, fbXdReceiver);
FB.ensureInit(function() {
FB.Connect.requireSession(null, null, false);
});
}
</script>
<!-- Body onload="fbLoad();" -->
<fb:fan profile_id="24932281961" name="Nutella" id="fanButton" stream="0" connections="0" logobar="0" width="250"></fb:fan>
I solved this by making the page refresh after a successful login
So I call requireSession with a callback
FB.ensureInit(function() {
FB.Connect.requireSession(requireSessionSuccess, null, false);
});
And this is the code for the callback
function requireSessionSuccess() {
window.open('default.aspx?fbloggedin=true', '_self');
}