I used to be able to log in with the following code to a URL. It alerts me if the log in details are wrong and logs me in when it is correct.
The URL changed slightly and right now, I am not able to log in. I do not even get the alert message saying the input is wrong. Nothing happens.
Old URL where it was working fine:
http://softwarehuttest.x10.mx/public/account/login/?id=notmyid&password=notmypassword
new URL where nothing happens:
http://softwarehuttest.x10.mx/public/account/login/?id=notmyid&password=notmypassword&rank=22
Rank is always going to be a same number (22 is just an example); thus, I don't want the user to have to input that. I just added an input for rank to test if that is the issue, but the problem persists.
If I directly input the URL with the log in details to a browser, it works.
I don't get what went wrong considering the codes were working fine prior to the URL change. Please advice. Thank you.
<html>
<script>
$(document).on("pageinit", "#loginForm", function () {
$("#form1").on("submit", function (event) {
event.preventDefault();
$.ajax({
type: "GET",
url: "http://softwarehuttest.x10.mx/public/account/login/",
data: $("#form1").serialize(),
success: function (data) {
console.log(data);
if (data.loggedIn) {
$.mobile.changePage("#home");
} else {
alert("You entered the wrong username or password. Please try again.");
}
}
});
});
});
</script>
<div data-role="page" id="loginForm" data-theme="e">
<!--Start of Log In Page-->
<header data-role="header">
<h1>Log In</h1>
</header>
<!--OLD FORM-->
<form id="form1" name="form1" method="GET" action="http://softwarehuttest.x10.mx/public/account/login/">
<label for="id">Username </label>
<input type="text" name="id" id="id" />
<label for="password">Password </label>
<input type="password" name="password" id="password" />
<label for="rank">Rank </label>
<input type="rank" name="rank" id="rank" />
<input type="submit" name="submit" value="Login"/>
</form>
<footer data-role="footer" data-position="fixed">
<h1></h1>
</footer>
</div>
</html>
I tested your code on JSFiddle and it apparently works. I got the response:"{"loggedIn":false}"
If you want to simply "hide" the Rank input, you can use input type HIDDEN instead of TEXT with the value set to 22.
<input type="hidden" name="rank" id="rank" value="22">
Related
There's an email subscription form in a web page, When someone enters his email and clicks on submit button, We don't want this page to be redirected to form action url, We just want it's submit button text value to be converted to another text, something like "Thank You!". How is it possible? Should I go through ajax? or javascript?
Here's the form:
<form class="ml-block-form" action="//app.mailerlite.com/webforms/submit/myownID" data-code="myownID" method="POST" target="_blank">
<div class="form-group ml-field-email ml-validate-required ml-validate-email">
<input class="newsletter-email" type="email" name="fields[email]" placeholder="Email*"/>
</div>
<input type="hidden" name="ml-submit" value="1" />
<p>
<input class="newsletter-submit" type="submit" value="Get Updates!"/>
</p>
For starters remove target="_blank" from your form tag.
Then, within your jQuery, do something along the lines of this:
$(".ml-block-form").submit(function(){
var vals = $(this).serialize();
$.ajax({
url: "postpage.php",
method: "POST",
data: vals,
success: function(data) {
$("#formsubmit").val("Thank you!");
}
});
return false; // prevent from submit
});
I've altered your HTML as well, as it was originally very messy. You can of course add the other elements back if you need:
<form class="ml-block-form" action="" data-code="myownID" method="post">
<input id="mainval" type="email" name="fields[email]" placeholder="Email*">
<input id="hiddenval" name="ml-submit" value="1" />
<input id="formsubmit" type="submit" value="Get Updates!"/>
</form>
You can simply remove target="blank" because blank value opens the linked document in a new window.
Instead of
<input class="newsletter-submit" type="submit" value="Get Updates!"/>
use
<button id="newsletter-submit" value="Get Updates!"/>
(note that I changed class for id)
And then use jQuery to handle the click on the button:
$("#newsletter-submit").click(function () {
$(this).prop("value", "Thank You!");
// do something else with the input values e.g. send them via ajax to a server script
});
There are two inputs in my form. The first input can be validated before an ajax function. The second input can't be validated. The second input comes from a page using ajax and the submit button also comes from the page using ajax. I need to validate the second input which comes from the page using ajax. Also the submit button which comes from the page is not working. Please help me.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#form").submit(function(){
if ($('#Name1').val().length<3) {
alert ("please enter your first names");
$('#Name1').focus();
return false;
}
$.ajax({
url: "result.php",
method: "GET" // Either get or post
}).done(function(response) {
var splitted = response.split("|"); // RESULT
$("#Div1").html(splitted[0]); // The first name
$("#Div2").html(splitted[1]); // The first name
});
return (false);
if ($('#Name2').val().length<3) {
alert ("please enter your second names");
$('#Name2').focus();
return false;
}
});
});
</script>
</head>
<body>
<form id="form" action="Page.php">
<div style="float:left;">
<b>Name1:</b>
</div>
<input id="Name1" type="text">
<br><br><br><br>
<div style="clear:both;">
<div style="float:left;">
<b>Name2:</b>
</div>
<div id="Div1" style="float:left;">
</div>
<br><br><br>
<div style="clear:both;">
<div id="Div2">
<button>First Event</button>
</div>
</div>
</div>
</form>
</body>
</html>
This is result.php
<input type="text" id="Name2">
i need to validate this input. | <button>Second Event</button>
There's a few ways you can do this, however because I am on my phone I can't give you a detailed example.
What I recommend for you to look into is sending the AJAX request as JSON data to your PHP file, you can then validate the JSON data within the PHP file and return a response to the front end accordingly.
Within the PHP file you can return any value as a response, meaning that if you echo "success" or "true", you can see whether the data is what you are looking to receive from the user.
I would highly recommend doing as much validation possible in the back end. It is a good habit to get in to as anything can be manipulated on the front end of a website.
This code works well. i have solved myself.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#form").submit(function(){
if ($('#Name1').val().length<3) {
alert ("please enter your first names");
$('#Name1').focus();
return false;
}
if ($('#hidden').val().length<3) {
$.ajax({
url: "result.php",
method: "GET" // Either get or post
}).done(function(response) {
var splitted = response.split("|"); // RESULT
$("#Div1").html(splitted[0]); // The first name
$("#Div2").html(splitted[1]); // The first name
});
//alert ("please verify");
return false;
}
if ($('#Name2').val().length<3) {
alert ("please enter your second names");
$('#Name2').focus();
return false;
}
});
});
</script>
</head>
<body>
<form id="form" action="Page.php">
<div style="float:left;">
<b>Name1:</b>
</div>
<input id="Name1" type="text">
<br><br><br><br>
<div style="clear:both;">
<div style="float:left;">
<b>Name2:</b>
</div>
<div id="Div1" style="float:left;">
<input id="hidden" type="hidden">
</div>
<br><br><br>
<div style="clear:both;">
<div id="Div2">
<button>First Event</button>
</div>
</div>
</div>
</form>
</body>
</html>
result.php
<input type="hidden" id="hidden" value="something"> <input type="text" id="Name2"> | <input id="button" type="submit" value="Second Event">
Recently I've started a new project and would like to do some angularjs magic. The problem is i'm not skilled enough in angularjs or javascript to know how I could do it. One requirement is that it has to be in realtime without reloading a page.
So let me start with my questions now. I've got a simple input field and a display section that instantly shows everything that I type in. However I want the display part to be modified on the fly.
<div id="form" class="form-wrap" ng-app="" />
<form action="index.php" method="post" id="form" />
<input type="text" name="url" id="url" value="" ng-model="name" />
<input type="submit" name="form_submit" id="form_submit" value="GOTO" />
</form>
https://example.com/index.php?url={{name}}
</div>
I'm already doing a validation in javascript but I dont know if it needs to be done in javascript or somehow in de anguarjs code itself. Just to be sure my javascript validation code:
<script>
$('<div class="loading"><span class="bounce1"></span><span class="bounce2"></span><span class="bounce3"></span></div>').hide().appendTo('.form-wrap');
$('<div class="success"></div>').hide().appendTo('.form-wrap');
$('#form').validate({
rules: {
url: { required: true, url: true }
},
messages: {
url: {
required: 'Address is requ!red',
url: 'Address is not val!d (https://www.nu.nl)'
}
},
errorElement: 'span',
errorPlacement: function(error, element){
error.appendTo(element.parent());
},
});
</script>
As you might guess by now I want the {{name}} value to be urlencoded realtime so that an url like: https://www.google.nl/?q=a b c will be changed to https://www.google.nl/?q=a%20b%20c However, how should I do this?
Thanks in advance!
Hi you can call a function on ng-change to encode name into url format like below.
I have create a function urlFormat which take name value and convert it to url format and push new variable urlname back.
<div id="form" class="form-wrap" ng-app="" />
<form action="index.php" method="post" id="form" />
<input type="text" name="url" id="url" value="" ng-model="name" ng-change="urlFormat(name)" />
<input type="submit" name="form_submit" id="form_submit" value="GOTO" />
</form>
https://example.com/index.php?url={{urlname}}
</div>
And create that function inside your controller like
$scope.urlFormat = function (name) {
$scope.urlname = encodeURI(name)
}
I'm working on phonegap, basically its like making mobileapps crossplatform by using HTML, JS and CSS. On the device i currently have the JS and the HTML (form) in same document.
What I'm trying to do is to pass email and password to my server, and then process it there through a login. I've tested the login script on the server and it works with hardcoded data. So I'm guessing somewhere when sending the data from the device its failing.. I'm fairly new to JS too.
I tried to hardcode the data in the AJAX but it doesnt seem to work. Preferebly I would like to use something like var pdata = $('#form').serialize(); or something else if its better.
Any ideas?
EDIT: Forgot to say that the PHP on the server auto submits by using JS when $_POST is set (isset)
The form
<form id="form" onsubmit="dologin()">
<div class="form-group">
<label for="email">Epost</label>
<input type="email" class="form-control" name="email" value="" placeholder="Epost">
</div>
<div class="form-group">
<label for="password">Passord</label>
<input type="password" class="form-control" name="password" value="" placeholder="Passord">
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="remember_me">
Husk meg
</label>
</div>
<button type="submit" class="btn btn-primary">Logg inn</button>
</form>
The javascript
<script>
function dologin() {
//var pdata = $('#form').serialize();
//alert(pdata);
$.ajax({
type: 'POST',
data: {email:"test#test.no",password:"test"},
url: 'LINK',
success: function(data) {
alert(data);
},
error: function() {
alert("error");
}
});
return false;
};
</script>
The PHP
<form id="form" method="post">
<!-- {{ Form::label('email', 'Email Address') }} -->
<div class="form-group">
<input type="text" name="email" value="<?php if(isset($_POST["email"])) echo $_POST['email'];?>">
</div>
<div class="form-group">
<!-- {{ Form::label('password', 'Password') }} -->
<input type="text" name="password" value="<?php if(isset($_POST["password"])) echo $_POST['password'];?>">
</div>
</form>
Are you able to hit your server via through phonegap?
If no then please check your config.xml for white list urls - change access control property to
access origin = "*"
Hopeful you will be able to hit your server with data.
You can use weinre to debug your app. That way you will be able to see if the request was placed from the app or not.
http://people.apache.org/~pmuellr/weinre/docs/latest/Home.html
I'm a web development student and I need some help. I have the code below; How do I make it work only when the form is submitted and not the text field is clicked. I also would like it to get and insert the textField's value in the .thanks Div. Please help me learn.
<script type="text/javascript">
$(document).ready(function(){
$(".quote").click(function(){
$(this).fadeOut(5000);
$(".thanks").fadeIn(6000);
var name = $("#name").val();
$("input").val(text);
});
});
</script>
<style type="text/css">
<!--
.thanks {
display: none;
}
-->
</style>
</head>
<body>
<form action="" method="get" id="quote" class="quote">
<p>
<label>
<input type="text" name="name" id="name" />
</label>
</p>
<p>
<label>
<input type="submit" name="button" id="button" value="Submit" />
</label>
</p>
</form>
<div class="thanks"> $("#name").val(); Thanks for contacting us, we'll get back to you as soon as posible</div><!-- End thanks -->
This is a bit rough and ready but should get you going
$(document).ready(function(){
$("#submitbutton").click(function(){
//fade out the form - provide callback function so fadein occurs once fadeout has finished
$("#theForm").fadeOut(500, function () {
//set the text of the thanks div
$("#thanks").text("Thanks for contacting us " + $("#name").val());
//fade in the new div
$("#thanks").fadeIn(600);
});
});
});
and I changed the html a bit:
<div id="theForm">
<form action="" method="get" id="quote" class="quote">
<p>
<label>
<input type="text" name="name" id="name" />
</label>
</p>
<p>
<label>
<input type="button" name="submitbutton" id="submitbutton" value="Submit" />
</label>
</p>
</form>
</div>
<div id="thanks">Thanks for contacting us, we'll get back to you as soon as posible</div><!-- End thanks -->
There are several things at issue here:
By using $('.quote').click(), you're setting a handler on any click event on any element contained within the <form>. If you want to catch only submit events, you should either set a click handler on the submit button:
// BTW, don't use an id like "button" - it'll cause confusion sooner or later
$('#button').click(function() {
// do stuff
return false; // this will keep the form from actually submitting to the server,
// which would cause a page reload and kill the rest of your JS
});
or, preferably, a submit handler on the form:
// reference by id - it's faster and won't accidentally find multiple elements
$('#quote').submit(function() {
// do stuff
return false; // as above
});
Submit handlers are better because they catch other ways of submitting a form, e.g. hitting Enter in a text input.
Also, in your hidden <div>, you're putting in Javascript in plain text, not in a <script> tag, so that's just going to be visible on the screen. You probably want a placeholder element you can reference:
<div class="thanks">Thanks for contacting us <span id="nameholder"></span>, we'll get back to you as soon as possible</div>
Then you can stick the name into the placeholder:
var name = $("#name").val();
$('#nameholder').html(name);
I don't know what you're trying to do with the line $("input").val(text); - text isn't defined here, so this doesn't really make any sense.