I have made two textbox and I will give an ID of text box1 and textbox2 and this is the code -
<input type="text" id="textbox1"> <input type="text" id="textbox2">
The problem is when I will write something in textbox1 i want to display it in textbox 2 also
Try this:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<input type="text" id="textbox1" onkeyup="previewText(this.value)" placeholder="">
<br />
<input type="text" id="textbox2" />
<script>
function previewText(name) {
document.getElementById("textbox2").value = name;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" name="input1" id="input1" onkeypress="myfunction(event)">
<input type="text" name="input2" id="input2" value="">
<script>
function myfunction(t) {
var i=document.getElementById("input2")
if(t.key=="Enter"){
i.value=document.getElementById("input1").value
}
else{
i.value=document.getElementById("input1").value+t.key;
}
}
</script>
</body>
</html>
Related
(https://i.stack.imgur.com/3SlmI.png)<--This in screenshot of error i'm getting
this is the code of both html page and python function
<!DOCTYPE html>
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1> Signin</h1>
<form action="/signin" method="post">
{% csrf_token %}
<label for="">Username</label>
<input type="text" id="username" name="username" placeholder="Enter your Username" required>
<br>
<label for="">Password</label>
<input type="password" id="pass1" name="pass1" placeholder="Enter your Password" required>
<br>
<button type="submit">Sign in</button>
</form>
</body>
</html>
def signin(request):
if request.method == "POST":
username = request.POST["username"]
pass1 = request.POST["pass1"]
user = authenticate(username=username, password=pass1)
if user is not None:
login(request, user)
fname = user.first_name
return render(request, "authentication/index.html", {fname: "fame"})
else:
messages.error(request, "Wrong Credentials")
return redirect("home")
return render(request, "authentication/signin.html")
from django.contrib import admin
from django.urls import path
from . import views
urlpatterns = [
path("", views.home, name="home"),
path("signup/", views.signup, name="signup"),
path("signin/", views.signin, name="signin"),
path("signout/", views.signout, name="signout"),
]
Im trying to create a simple login page in Django,screenshot of my webpage i'm expecting to solve the error in the image
this is my security config:
protected void configure(HttpSecurity http) throws Exception {
http
.authorizeRequests()
.antMatchers("/login","/newuser").permitAll()
.antMatchers("/css/**").permitAll()
.antMatchers("/js/**").permitAll()
.antMatchers("/**").hasRole("USER").anyRequest().authenticated()
.and()
.formLogin()
.loginPage("/login")
.permitAll()
.and()
.httpBasic()
.and()
.csrf()
.csrfTokenRepository(csrfTokenRepository())
.and()
.addFilterAfter(new CsrfHeaderFilter(), CsrfFilter.class);
}
First of all i'm redirected to login page when i'm not authenticated.
Second when i'm trying to create a new user requesting this path "/newuser" Response status is ok but the page isn't displayed .
These are my Controller methods:
#RequestMapping("/login")
public String login() {
return "loginpage.html";
}
#RequestMapping(value="/newuser")
public String newUser() {
return "signup.html";
}
This is my loginpage.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<link href="css/angular-bootstrap.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div class="container" ng-controller="AuthenticationController">
<form role="form" ng-submit="signin()">
<div class="form-group">
<label for="username">Username:</label> <input type="text"
class="form-control" id="username" name="username" ng-model="credentials.username"/>
</div>
<div class="form-group">
<label for="password">Password:</label> <input type="password"
class="form-control" id="password" name="password" ng-model="credentials.password"/>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<a href ng-click="newuser()">Create new account</a>
</div>
<script src="js/angular-bootstrap.js" type="text/javascript"></script>
<script src="js/init.js"></script>
<script>
angular.element(document).ready(function() {
code.application.initialize(function() {
angular.bootstrap(document, ['authentication']);
}, function(error) {
console.log("Error while initializing Application Content Developer:", error);
});
});
</script>
<script src="js/AuthenticationController.js"></script>
</body>
</html>
This is my signup.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<link href="css/angular-bootstrap.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<p>SIGNUP</p>
<script src="js/angular-bootstrap.js" type="text/javascript"></script>
<script src="js/init.js"></script>
<script>
angular.element(document).ready(function() {
code.application.initialize(function() {
angular.bootstrap(document, ['authentication']);
}, function(error) {
console.log("Error while initializing Application Content Developer:", error);
});
});
</script>
<script src="js/AuthenticationController.js"></script>
</body>
</html>
And this is my project main structure:
The thing i cannot understand is : Why login page is rendered successfully but signup page is ignored and not rendered at all.
Would suggest you to try a default success url. Eg:
.loginPage("/login").defaultSuccessUrl("/newuser", true)
<!DOCTYPE html>
<html>
<head>
<title>Mathquill</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" type="text/css" href="mathquill-0.9.4/mathquill.css">
<script src="jquery-1.9.1.min.js"></script>
<script src="mathquill-0.9.4/mathquill.min.js"></script>
<script>
function clickMe()
{
$('#taOne').mathquill('latex', 'x^2');
$('#taTwo').mathquill('latex', '\int x');
$('#taThree').mathquill('latex', '\left(x^2 + y^2 \right)');
}
</script>
</head>
<body style="height: auto">
<div id="MathOutput" style="display: none">$$ {} $$</div>
<div id="MathList" style="font-size:30px;background-color:LightSeaGreen;height: auto;line-height: 1.4;font-family: "Museo Sans",sans-serif; margin-bottom: 3px;" />
<div id="Ans1" class="mathquill-embedded-latex" style="background-color:yellow;text-align:left;font-size:30px;height: auto"></div>
<input type="button" value="ClickMe" onclick="clickMe();"/>
<textarea id="taOne" class="mathquill-editable" name="taOne" style="width:80%;vertical-align:top"></textarea>
<textarea id="taTwo" class="mathquill-editable" name="taTwo" style="width:80%;vertical-align:top"></textarea>
<textarea id="taThree" class="mathquill-editable" name="taThree" style="width:80%;vertical-align:top"></textarea>
</body>
</html>
In the above code I am trying to show the latex equation in the the textarea. And it is rendering as follows for each equation.
$('#taOne').mathquill('latex', 'x^2');
:-x2
$('#taTwo').mathquill('latex', '\int x');
:-intx
$('#taThree').mathquill('latex', '\left(x^2 + y^2 \right)');
:-left(x^2+y^2ight)
So, How to fix this Issue
Looks like you need to use double \\ instead of a single \.
Change this:
function clickMe()
{
$('#taOne').mathquill('latex', 'x^2');
$('#taTwo').mathquill('latex', '\int x');
$('#taThree').mathquill('latex', '\left(x^2 + y^2 \right)');
}
to:
function clickMe()
{
$('#taOne').mathquill('latex', 'x^2');
$('#taTwo').mathquill('latex', '\\int x');
$('#taThree').mathquill('latex', '\\left(x^2 + y^2 \\right)');
}
\ is used in Strings to escape special characters, so if you want a backslash in your string, you have to escape it via another backslash.
I am new to using PhoneGap on iOS and was stuck at cropping an image using imgAreaSelect JS plugin. The code works well in the web browsers while doesn't show any change in the iOS simulator. The image is being imported from a local folder.The code used is as below:
$('#testimg').imgAreaSelect({
handles: true,
aspectRatio: '16:9'
});
Please let me know if there any other way to crop an image using PhoneGap? This is how it looks in the web browser and the same does not happen in the iOS simulator.
The plugin imgAreaSelect probably wouldn't work. I have tried JCrop-http://deepliquid.com/content/Jcrop.html and it works perfectly fine. They explicitly mention that they have Touch support for iOS, Android, etc. Just follow the demo on the link.
Jcrop Does'nt support touch event in phone gap so there is no need to use I have spend 3 hour on it. I just want to crop after upload image from camera or salary in phonegap. I use following it is working fine.
https://github.com/acornejo/jquery-cropbox
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$targ_w = 640;
$targ_h=280;
$jpeg_quality = 90;
$save=dirname(__FILE__).'/files/abcd.jpg';
$src = dirname(__FILE__).'/img/img.jpg';
$img_r = imagecreatefromjpeg($src);
$dst_r = ImageCreateTrueColor( $targ_w, $targ_h );
imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],$targ_w,$targ_h,$_POST['w'],$_POST['h']);
header('Content-Type: image/jpeg');
imagejpeg($dst_r,null ,$jpeg_quality);
exit;
}
?>
<!DOCTYPE html>
<!-- saved from url=(0041)http://acornejo.github.io/jquery-cropbox/ -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery-cropbox</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<link type="text/css" media="screen" rel="stylesheet" href="js/jquery.cropbox.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/hammer.js"></script>
<script type="text/javascript" src="js/jquery.cropbox.js"></script>
<script type="text/javascript" defer="">
$( function () {
$(function () {
var r = $('#results'),
x = $('.cropX', r),
y = $('.cropY', r),
w = $('.cropW', r),
h = $('.cropH', r);
$('#cropimage').cropbox({
width: 500,
height: 240
}).on('cropbox', function (event, results, img) { console.log("on crop");
x.text(results.cropX);
y.text(results.cropY);
w.text(results.cropW);
h.text(results.cropH);
$("#x").val(results.cropX);
$("#y").val(results.cropY);
$("#w").val(results.cropW);
$("#h").val(results.cropH);
});
});
});
</script>
</head>
<body>
<form action="index.php" method="post" onsubmit="return checkCoords();">
<div style="width:100%;">
<img id="cropimage" alt="" src="img/img.jpg" />
</div>
<div id="results"> <b>X</b>:
<span class="cropX"></span>
<b>Y</b>: <span class="cropY"></span>
<b>W</b>: <span class="cropW"></span>
<b>H</b>: <span class="cropH"></span>
<input type="text" name="x" id="x" size="4" />
<input type="text" name="y" id="y" size="4" />
<input type="text" name="w" id="w" size="4" />
<input type="text" name="h" id="h" size="4" />
</div>
<input type="submit" />
</form>
</body></html>
At first thanks to all that read my question.
I'm quite new to jquery JQM and knockoutJS and have some problems with a dynamic generated html code.
So I have the following example: I start my app with startPage.html where i load all the scripts(jquery, jqm, knockout) and with a link i go to secondPage.html where i want to load a dynamically generated array of checkboxes.
Now the problem is that i get the checkboxes but i don't have the jqm style for them.
My Code looks like this:
startPage.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" `"http://www.w3.org/TR/html4/loose.dtd">`
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>start Page</title>
<link href="jquery.mobile-1.3.0.css" rel="stylesheet" type="text/css" />
<link href="jquery.mobile.structure-1.3.0.css" rel="stylesheet" type="text/css" />
<link href="jquery.mobile.theme-1.3.0.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" charset="utf-8" src="jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery.mobile-1.3.0.js"></script>
<script type="text/javascript" charset="utf-8" src="knockout.js"></script>
<script type="text/javascript" charset="utf-8" src="app/VM/WelcomeVM.js"></script>
<script type="text/javascript" charset="utf-8" src="app/VM/CheckboxVM.js"></script>
<script type="text/javascript">
//javascript code
var master = null;
var masterVM = function(){
var startVM = new welcomeVM();
var checkBoxHandler = new checkBoxVM();
return{
startVM:startVM,
checkBoxHandler:checkBoxHandler
}
}
$(document).ready(function(){
master = new masterVM();
ko.applyBindings(master);
});
$(document).bind("pageload",function(event,data){
ko.applyBindings(master);
});
</script>
</head>
<body>
<div data-role="page" id="home" data-theme="c">
<div data-role="content" id="content">
<div>
<a href="secondPage.html" data-role="button" >
</div>
</div>
</div>
</body>
</html>
My View Model for Knockout looks like this, here i generate the HTML code and fill the array of checkboxes:
var checkBoxVM = function() {
var cbArray = [ "One", "Two", "Three", "Four", "Five"];
var htmlexampleCB = ko.observable();
init();
function init() {
$.each(cbArray, function(index, item) {
var htmlCB = "<input type=\"checkbox\" name=\"exampleCB\" id=\""
+ item + "\" value=\"" + item + "\"> ";
var htmlLabel = "<label for=\""+item+"\">"+item+"</label>";
var html = htmlCB + htmlLabel + "<br />";
var all = "";
if (htmlCompanyCB() != null) {
all = htmlCompanyCB();
}
all = all + html;
htmlCompanyCB(all);
});
alert(htmlexampleCB());
};
return {
htmlexampleCB:htmlexampleCB
};
};
secondPage.html looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<div data-role="page" id="gasPage">
<div data-role="content">
<!-- <div data-bind="html:companiesHandler.htmlexampleCB"> </div> -->
<script type="text/javascript">
$(document).ready(function(){
var newSet = '<fieldset data-role="controlgroup" class="cbGroup"></fieldset>';
$('.cbDiv').append(newSet);
var newBox = '<div data-bind="html:checkBoxHandler.htmlexampleCB">';
$(".cbGroup").append(newBox);
});
</script>
<div data-role ="fieldcontain" class="cbDiv">
<fieldset data-role="controlgroup" class="cbGroup">
</fieldset>
</div>
</div>
</div>
</body>
</html>
I tried several other solutions that i saw here but unfortunately non of them worked for me.
Could someone please give me a hint or tell me what i should do, i don't have any other ideas.
Thanks in advance and i hope that someone can help me.
This code after creating the checkboxes dynamically should do it,
$("input[type='checkbox']").checkboxradio("refresh");
Please check the following link to a similar question.
Dynamic controlgroup and checkboxes unstyled