I have a very small page being managed by some javascript. When I load the page into the browswer the link after the form (id=login_linker) works fine.
However, when I load it into a div the same link wont work. Does anyone have any ideas.
Here is the body of the page that is being included.
<body>
<p>Forgot your password?</>
<form name="forgotpassform" id="forgotpassform" onsubmit="return false;">
<label for="email">Email: </label>
<input id="email" type="text" class="searchbox" onfocus="emptyElement('status')" maxlength="35">
<input type="button" style="margin-top: 15px; position:relative; left:50px;" id="forgotpassbtn" onclick="forgotpass()" value="Send me a new password">
<br>
</form>
<span id="emailstatus"> </span>
<span id="status"></span>
Log In
</body>
The javascript:
function forgotpass(){
var e = _("email").value;
var status = _("status");
var forgotpassform = _("forgotpassform");
if(e != ""){
_("forgotpassbtn").style.display = "none";
status.innerHTML = 'please wait ...';
var ajax = ajaxObj("POST", "forgotpass.php");
ajax.onreadystatechange = function() {
if(ajaxReturn(ajax) == true) {
if(ajax.responseText == "no_user"){
status.innerHTML = 'There was no matching email in the system.';
_("forgotpassbtn").style.display = "block";
} else if(ajax.responseText =="email_not_sent"){
status.innerHTML = 'There was a problem sending your temporary password.';
} else {
//status.innerHTML = ajax.responseText;
forgotpassform.innerHTML = "You have sent a temporary password to your email address. Please check your email.";
}
}
}
ajax.send("e="+e);
} else {
status.innerHTML = "Please enter your email address.";
}
}
function emptyElement(x){
_(x).innerHTML = "";
}
function loadlogin(){
$('#loginwindow').toggle(400);
$('#loginwindow').load("forgotpass.php");
$('#loginwindow').toggle(400);
}
$(document).ready(function(){
$(document).on('click', '#login_linker', function(){
alert('ok');
showlogin();
});
});
function showlogin(){
$('#loginwindow').load("login.php");
$('#loginwindow').toggle(400);
}
Here is the script to load the forgot password page ie the HTML above
function forgotpass(){
$('#loginwindow').toggle(400);
$('#loginwindow').load("forgotpass.php");
$('#loginwindow').toggle(400);
}
I don't know how your code to load the link using js is (it would be better if you post it too), but I guess the problem is you try to bind the event just after document is ready, and at that moment, the link isn't loaded yet. Bind it after loading it.
Related
I am using Flask Framework..
I have a form tag in the front end for login id and password and a submit button.
I want to use JavaScript in the front end to verify the data provided by the user in the form field and then if everything is okay, then I want to send the data provided by the user to the back end server and process it using python..
But how can I control the process that when the user click on the submit button the control will go to the JavaScript code and then after validation, the data is sent to the back end server
In the snippet I have given a dummy example. In that my doubt is how to first send the control to the validate_login_form() written in Java Script and then after validation the control should go to the {{url_for('home')}} written in the action part using the Jinja2 template engine
Here the trouble that i am having is, after filling up the form, when the user clicked of the submit button, the control goes fine to the Java Script function written to validate the form but even if the Java Script returns false, the control automatically goes to the back end server.
But what i want to do is if the Java Script returns false, the control should stop there and ask the user to again fill in the form.
function validate_login_form(){
let login_id = document.getElementById('login_id').value
let password = document.getElementById('password').value
if(login_id == '' && password == ''){
alert('please enter the login id and password')
return(false)
}
else if(login_id == '' && password != ''){
alert('please enter the login id')
return(false)
}
else if(login_id != '' && password == ''){
alert('please enter the password')
return(false)
}
else{
if(login_id == 'test' && password == 'test'){
return(true);
}
else{
alert('please enter the valid login id and password')
return(false)
}
}
}
<html>
<head>
</head>
<body>
<form action="{{url_for('home')}}" onsubmit="validate_login_form()">
<label for="login_id">LogIn</label>
<input type="text" name="login_id" placeholder="login Id" id="login_id">
<label for="password">Password</label>
<input type="password" name="password" placeholder="password" id="password">
<br><br>
<input type="submit" value="submit" >
</form>
<script src="{{ url_for('static', filename='scripts/login.js') }}"></script>
</body>
</html>
Simple: https://www.w3schools.com/jsref/event_onsubmit.asp.
There your go:
<form onsubmit="myFunction()">
Enter name: <input type="text">
<input type="submit">
</form>
<script>
function myFunction() {
return true;
}
</script>
HTML from example:
<form method="POST" id="myForm">
<input type="email" name="email" id="email"/>
<input type="password" name="password" id="password"/>
<button type="submit">Login</button>
</form>
javascript:
var myForm = document.getElementById("myForm");
myForm.onsubmit = function(e){
e.preventDefault();
// validate here and produce data
fetch('/mypage', {
method: "POST",
credentials: "include",
cache: "no-cache",
body: data,
headers: new Headers({
"Content-Type": "application/json",
}),
})
.then((response) => {
if (response.status !== 200) {
// handling if status is not ok(200)
}
response.text().then((res) => {
// response handling
if(res === "success"){
// redirect to homepage or do anything
} else {
// something went wrong
}
});
})
.catch((err) => {
// error handle
});
}
Flask/Python:
from flask import request
#app.route('/mypage', methods=['GET', 'POST'])
def myPage():
if request.method == "POST" and request.json:
data = request.json
# send data to database
return 'success', 200
The only problem here in the codes are in the form tag in html,
I should have written onsubmit=return validate_login_form()
instead of onsubmit=validate_login_form()
By this code if the JavaScript function returns true then the page will be redirected to the url written in the action field of the form tag
and if the JavaScript function returns flase then the control will remain in the same page without being redirected.
That's how the flow can be controlled
function validate_login_form(){
let login_id = document.getElementById('login_id').value
let password = document.getElementById('password').value
if(login_id == '' && password == ''){
alert('please enter the login id and password')
return(false)
}
else if(login_id == '' && password != ''){
alert('please enter the login id')
return(false)
}
else if(login_id != '' && password == ''){
alert('please enter the password')
return(false)
}
else{
if(login_id == 'test' && password == 'test'){
return(true);
}
else{
alert('please enter the valid login id and password')
return(false)
}
}
}
<html>
<head>
</head>
<body>
<form action="{{url_for('home')}}" onsubmit="return validate_login_form()">
<label for="login_id">LogIn</label>
<input type="text" name="login_id" placeholder="login Id" id="login_id">
<label for="password">Password</label>
<input type="password" name="password" placeholder="password" id="password">
<br><br>
<input type="submit" value="submit" >
</form>
<script src="{{ url_for('static', filename='scripts/login.js') }}"></script>
</body>
</html>
I have an html form. The form sends login request to server. The html response from server is put in an iframe.
$(document).ready(function(){
$("#submit").click(function(event){
$("#dummyframe").on('load',function() {
var myiframe = $("#dummyframe").val();
var iframedocument = myiframe.contentDocument;
var response = iframedocument.queryselector("pre");
var errormessage = '{"code":500,"message":"入力項目に誤りがあります","data":{}}';
if (response == errormessage ){
alert('wrong password');
}
else {
alert('password is ok');
}
});
});
});
<iframe name="dummyframe" id="dummyframe" style="display: none;"></iframe>
<form method="post" target="dummyframe" action="https://kintai.jinjer.biz/v1/sign_in">
<input name="company_code" type="hidden" value="1234" />
<input name="email" type="hidden" value="1234" />
<input name="password" type="hidden" value="1234" />
<input type="submit" value= "submit" id= "submit" />
</form>
I want to read response from the server to validate password. If I get error message from server, I want to alert "wrong password" in my html page. Am I missing something? It doesn't work. The code doesn't seem incorrect. Your help is greatly appreciated.
You need to change your script to below:
$(document).ready(function(){
$("#submit").click(function(event){
$("#dummyframe").on('load',function() {
var myiframe = $("#dummyframe");
var iframedocument = myiframe.contentDocument;
if (iframedocument.document) iframedocument = iframedocument.document;
var response = iframedocument.queryselector("pre").innerHTML;
var errormessage = '{"code":500,"message":"入力項目に誤りがあります","data":{}}';
if (response == errormessage ){
alert('wrong password');
}
else {
alert('password is ok');
}
});
});
});
I have a simple log in and I cannot get the validation to work at all. I was wondering if someone could help.
HTML:
<div class="login">
<h2>Sign In</h2>
<form id="frmLogin" method="post">
Username: <input id="txtUsername" name="txtUsername" type="text" /><br/>
Password: <input name="txtPassword" type="password" /> <br/>
<button onClick="validateLogin()">Log In</button>
</form>
</div><!-- End of Login Section -->
Javascript:
<script>
function validateLogin()
{
var userName = document.getElementsByID('txtUsername').value;
var invalidForm = 0;
if(userName == "")
{
alert("Username cannot be blank!");
invalidForm = 1;
}//end if
if(invalidForm == 0)
{
alert("Form validated, no errors");
}//end if
}
</script>
At the moment I'm just testing for an empty username, once I can get this working I'll continue on with the rest.
Thank you!
To get and element by ID the function name is getElementById and not getElementsByID, besides, javascript is case sensitive so getElementByID does not work.
function validateLogin()
{
var userName = document.getElementById('txtUsername').value;
var invalidForm = 0;
if(userName == "")
{
alert("Username cannot be blank!");
invalidForm = 1;
}//end if
if(invalidForm == 0)
{
alert("Form validated, no errors");
}//end if
}
Do your jquery code something like these :-
<script>
function validateLogin()
{
var userName = document.getElementById('txtUsername').value;
var invalidForm = 0;
var errMessage = ""
if(userName === "")
{
errMessage = "Username cannot be blank!";
invalidForm = 1;
}//end if
if(invalidForm == 0)
{
alert("Form validated, no errors");
}
else if (invalidForm == 1)
{
alert(errMessage);
return false;
}
}
</script>
It may help you.
I have an email submit form using a javascript and contact.php code
Here is the javascript
function createRequestObject() {
var ro;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
ro = new ActiveXObject("Microsoft.XMLHTTP");
}else{
ro = new XMLHttpRequest();
}
return ro;
}
var http = createRequestObject();
function sendemail() {
var email = document.contactform.email.value;
document.contactform.send.disabled=true;
http.open('get', '/contact.php?email='+email+'&action=send');
http.onreadystatechange = handleResponse;
http.send(null);
}
function handleResponse() {
if(http.readyState == 4){
var response = http.responseText;
var update = new Array();
if(response.indexOf('|' != -1)) {
update = response.split('|');
document.getElementById(update[0]).innerHTML = update[1];
}
}
}
and here is a section of the contact.php
<?php
$to = ""; //This is the email address you want to send the email to
$subject_prefix = ""; //Use this if you want to have a prefix before the subject
if(!isset($_GET['action']))
{
die("You must not access this page directly!"); //Just to stop people from visiting contact.php normally
}
$subject = "Newsletter Sign Up"; //The senders subject
$message = trim($_GET['email']); //The senders subject
$email = ""; //The senders email address
mail($to,$subject,$message,"From: ".$email.""); //a very simple send
echo 'contactarea|<div id="thanks">thank you</div>'; //now lets update the "contactarea" div on the contact.html page. The contactarea| tell's the javascript which div to update.
?>
and the HTML
<div id="contactarea">
<form name="contactform" id="contactform">
<input class ="email" type="text" name="email" id="inputbox" value="e-mail"
onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
<input type="submit" value="sign up" name="send" onclick="sendemail(); return false; " class="signup" >
</form>
</div>
I am trying to fade the "Thank You" after 5 seconds but I am having some trouble.
If I set it to fade on the click of the submit button it doesn't seem to work because it it is not there until the button is clicked.
If I set it to fade on load, it only works if the button is clicked before the fade time
IS there a way to fade out not on the load of the page, but on the load of the div itself?
Try
echo 'contactarea|<div id="thanks">thank you</div>';
to
echo '
contactarea|<div id="thanks">thank you</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
setTimeout(function(){
$("#thanks").fadeOut();
},5000);
});
</script>
';
How about:
function sendemail() {
var email = document.contactform.email.value;
document.contactform.send.disabled=true;
http.open('get', '/contact.php?email='+email+'&action=send');
http.onreadystatechange = handleResponse;
http.send(null);
}
to:
function sendemail() {
var email = document.contactform.email.value;
document.contactform.send.disabled=true;
http.open('get', '/contact.php?email='+email+'&action=send');
http.onreadystatechange = handleResponse;
http.send(null);
setTimeout(function(){
$(document).find("#thanks").fadeOut();
},5000);
}
I am trying to make an offline HTML5 application that submits a form containing a image and a text input for a email address, when a internet connection is avaiable
This is what I have tried:
<body>
<script type='text/javascript'>
window.onload = function () {
function submit() {
setInterval(function () {
if (navigator.onLine) {
//if internet is avaiable do:
document.getElementById("upload").submit();
}else {
//if no internet
var theDiv = document.getElementById("message");
var content = document.createTextNode("No internet");
theDiv.appendChild(content);
}
}, 1000);
}
}
</script>
<form action="post.php" method="post" enctype="multipart/form-data" id="upload">
<input type="file" name="uploaded" accept="image/*" capture><br>
<p>Skriv inn din epost: <input type="text" name="email"></p>
<input type="submit" value="Send ditt bilde!" name="sendimg" onclick="this.value='Submitting ..';this.disabled='disabled'; submit();">
<div class="message"></div>
Does someone have any suggestions? Thanks :)
Thee two ways to check this
This solution requires jQuery
$.ajaxSetup({
timeout: 1, // Microseconds, for the laughs. Guaranteed timeout.
error: function(request, status, maybe_an_exception_object) {
if(status == 'timeout')
alert("Internet connection is down!");
}
});
And
window.navigator.onLine -- it will be false if the user is offline.
You need to use above in your code with some tweaking as per requirement.
Sorry, but i cant comment yet. Will this work?
<script type='text/javascript'>
window.onload = function () {
function submit() {
setInterval(function () {
if (window.navigator.onLine == "true") {
//if internet is avaiable do:
document.getElementById("upload").submit();
}else {
//if no internet
var theDiv = document.getElementById("message");
var content = document.createTextNode("No internet");
theDiv.appendChild(content);
}
}, 1000);
}
}
</script>
Instead of continuous checking for Internet connection, you can use online and offline events. For reference see this https://developer.mozilla.org/en/docs/Online_and_offline_events. If the user is offline, save the data in local storage and then resend the data once the online event is again detected.