Javascript noob here :)
I have a basic Angular web page that adds input to a list when the "add" (submit) button is clicked. If, however, I submit by pressing the ENTER key, Angular does not recognise that the input field is dirty, and it fails to update the model ($scope.newFundName) - so the old value (initially "") is added to the list. If I move focus away from the field and back again (say TAB, then BACKTAB) then Angular picks up the correct value. How do I force it to use the current value of the input field without manually shifting the focus?
My code:
<!doctype html>
<html ng-app> <!-- test004.html -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="../angular-1.0.0rc3.min.js"></script>
<script type="text/javascript">
function testController004($scope) {
$scope.funds = [{code:1 ,name:'Alpha'}
,{code:2 ,name:'Bravo'}
,{code:3 ,name:'Charlie'}];
$scope.getFundCount = function () { return $scope.funds.length; }
$scope.addFund = function () {
// if triggered by ENTER, and focus hasn't left a dirty input field, new value won't be picked up
$scope.funds.push({code:$scope.newFundCode,name:$scope.newFundName});
}
}
</script>
</head>
<body>
<div ng-controller="testController004" class="container">
<label># Funds: {{getFundCount()}}</label>
<ul>
<li ng-repeat="F in funds">
<span>{{F.code}}={{F.name}}</span>
</li>
</ul>
<form role="form" class="form-inline">
<label for="eFundCode">Code</label>
<input id="eFundCode" type="text" class="form-control" ng-model="newFundCode" />
<label for="eFundName">Name</label>
<input id="eFundName" type="text" class="form-control" ng-model="newFundName" />
<button id="eAdd" class="btn btn-info" ng-click="addFund()">Add</button>
</form>
</div>
</body>
</html>
Related
I am new to Javascript (like I really know nothing) and I have to program a Picross game for my school. My teachers gave me an HTML home page for the game and I can't touch it. This page has a form with action pointing on itself but with parameters on the URL. Here is the code :
<!doctype html>
<html>
<head>
<title>Picross editor & player</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="picross.css" type="text/css">
<script src="picross.js"></script>
</head>
<body>
<nav>
<section>
<h2>Create a grid</h2>
<form action="picross.html" method="get">
<input type="hidden" name="edit">
<table>
<tr><td>Lignes :</td><td><input type="number" name="lines" value="10" min="5" max="20"></td></tr>
<tr><td>Colonnes :</td><td><input type="number" name="cols" value="10" min="5" max="20"></td></tr>
</table>
<input type="submit" value="Create !">
</form>
</section>
</nav>
</body>
</html>
My job is to only work on picross.js and I have no idea how to render a blank page (or a grid) if the form has been submitted because when I try to detect the submit, the HTML page renders just after my catch. I also have to do it on the same page, when no parameters are given it's the home page from my teachers but when the form is submitted, the game opens in the same picross.html but with ?lines=x&cols=y or something like this. Here is what I've tried :
window.onload = function() {
var form = document.querySelector("form");
form.onsubmit = submitted.bind(form);
}
function submitted(e) {
console.log("catch");
console.log(e);
}
This writes catch in the console for a tenth of a sencond and then the HTML renders just after. So what I'm looking for is when the form is submitted, the JS code should render a grid (or a blank page, I can work on the grid later) to play the picross game.
Thank for your help
JavaScript is really easy and fun, you can always google anything you want to make and/or learn in javascript/html or any web technology.
As I understood from your question, you want to open a new window when the button is clicked, so to do that you have to first turn off the default behavior of the form, and to do that you can use the parameter e that passed in the event callback submitted.
JavaScript events
e.preventDefault()
This will prevent the page from reloading.
Next, to open a new window, you can use window object.
Window object.
window.open(....)
Full example:
window.onload = function() {
var form = document.querySelector("form");
form.onsubmit = submitted.bind(form);
}
function submitted(e) {
e.preventDefault();
console.log("catch");
var myWindow = window.open("", "Yaay", "width=200,height=100");
myWindow.document.write("<p>Peace begins with a smile</p>");
}
<!doctype html>
<html>
<head>
<title>Picross editor & player</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="picross.css" type="text/css">
<script src="picross.js"></script>
</head>
<body>
<nav>
<section>
<h2>Create a grid</h2>
<form action="picross.html" method="get">
<input type="hidden" name="edit">
<table>
<tr><td>Lignes :</td><td><input type="number" name="lines" value="10" min="5" max="20"></td></tr>
<tr><td>Colonnes :</td><td><input type="number" name="cols" value="10" min="5" max="20"></td></tr>
</table>
<input type="submit" value="Create !">
</form>
</section>
</nav>
</body>
</html>
I hope I explained clearly.
Note: Run code snippet might not work, because popups are not allowed.
i want to make my local static html website password protected with some js, so that when i open my local html file in my pc, it comes with a form to fill up my user id and my own password, which i have saved and when i hit enter that should open my index.html file only when password is correct.
currently my code is
<!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>
<Form>
<!-- user-id -->
<input type="text">
<!-- user-password -->
<input type="password">
<button onclick="window.open('./index.html')"> Enter
</button>
</Form>
<script>
// pls-help-me-idk-how-to-code-js
</script>
</body>
</html> ``
Its not a proper way to do it. You need a backend for that inorder to properly execute that. But if it just to play around you can have an alert box and just compare their value : if right it displays.
First, you have to add an id or a class to that inputs in order to select them within the script section. Afterward, you can select them and add any value you want.
Such as:
<form>
<!-- user-id -->
<input id="user" type="text" />
<!-- user-password -->
<input id="pass" type="password" />
<button onclick="window.open('./index.html')">Enter</button>
</form>
<script>
document.getElementById("user").value = "UsernameOrId";
document.getElementById("pass").value = "SomePassword";
</script>
In order to compare, you should get the right password from somewhere like a database or some service, but since this is purely for learning purposes you can hardcode it in the script for checking. So, the final solution can be similar to this:
<body>
<form>
<!-- user-id -->
<input id="user" type="text" />
<!-- user-password -->
<input id="pass" type="password" />
<button id="btn">Enter</button>
</form>
<script>
const myPass = "SomePassword";
document.getElementById("user").value = "UsernameOrId"; // predefining the value simulating is saved and by default filled up
document.getElementById("pass").value = myPass; // predefining the value simulating is saved and by default filled up
const btn = document.getElementById("btn"); // getting the button to control its behavior on click event
btn.addEventListener("click", function () {
const passWhenClickingTheBtn = document.getElementById("pass").value;
if (myPass === passWhenClickingTheBtn) { // checking the value entered for pass
window.open("./index.html");
}
});
</script>
I am trying to create a prompt dialog box using alertifyjs that has multiple input boxes. I have managed to create the dialog box to show the multiple boxes but I cant seem to make a reference to the inputs that user provides.
I want to write if statement that carries out action based on user input when they press OK. However, the OK button doesnt seem to be working and also the if-statements don't work as well. I am not sure what I might be doing wrong, can someone please help me.
Below is my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs#1.11.1/build/css/alertify.min.css"/>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs#1.11.1/build/css/themes/bootstrap.min.css"/>
<script src="//cdn.jsdelivr.net/npm/alertifyjs#1.11.1/build/alertify.min.js"></script>
</head>
<body>
<div style="display:none;" >
<div id="dlgContent">
<p> Enter Value One </p>
<input class="ajs-input" id="inpOne" type="text" value="Input One Default Value"/>
<p> Enter Value Two </p>
<input class="ajs-input" id="inpTwo" type="text" value="Input two default Value"/>
</div>
</div>
<!-- the script -->
<script>
var dlgContentHTML = $('#dlgContent').html();
$('#dlgContent').html("");
alertify.confirm(dlgContentHTML).set('onok', function(closeevent, value) {
var inpOneVal = $('#inpOne').val();
var inpTwoVal = $('#inpTwo').val();
updateListItems(inpOneVal,inpTwoVal);
if (inpOneVal == "test" && inpTwoVal == "test") {
alertify.success('Successful');
} else {
alertify.error('Wrong')
}
}).set('title',"Update");
</script>
</body>
</html>
Link to JSfiddle: http://jsfiddle.net/1qouxdkc/4/
In your script you call a function named updateListItems(inpOneVal,inpTwoVal);
As that function is not declared anywhere, it errors, so with that temporarily commented out, it works.
Stack snippet
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/alertifyjs#1.11.1/build/css/alertify.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/alertifyjs#1.11.1/build/css/themes/bootstrap.min.css" />
<script src="https://cdn.jsdelivr.net/npm/alertifyjs#1.11.1/build/alertify.min.js"></script>
</head>
<body>
<div style="display:none;">
<div id="dlgContent">
<p> Enter Value One </p>
<input class="ajs-input" id="inpOne" type="text" value="Input One Default Value" />
<p> Enter Value Two </p>
<input class="ajs-input" id="inpTwo" type="text" value="Input two default Value" />
</div>
</div>
<!-- the script -->
<script>
var dlgContentHTML = $('#dlgContent').html();
$('#dlgContent').html("");
alertify.confirm(dlgContentHTML).set('onok', function(closeevent, value) {
var inpOneVal = $('#inpOne').val();
var inpTwoVal = $('#inpTwo').val();
//updateListItems(inpOneVal,inpTwoVal);
if (inpOneVal == "test" && inpTwoVal == "test") {
alertify.success('Successful');
} else {
alertify.error('Wrong')
}
}).set('title', "Update");
</script>
</body>
</html>
I'm trying to improve my Javascript by starting a simple web interface, but every time I try to add an event listener to an input field, it breaks my code.
Here's my HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="colors.css">
<script src="spot.js"></script>
</head>
<div id="ask">
Search for an artist to see their top songs:
</div>
<form>
<input type="text" name="artist" id="artist-search">
</form>
<div id="sub">
submit
</div>
</html>
And here's my Javascript:
window.onload = loaded;
var inField;
function loaded() {
document.getElementById("sub").addEventListener("click", search);
inField = document.getElementById("artist-search");
}
//https://api.spotify.com/v1/search?q=tania%20bowra&type=artist
function search() {
alert();
//var query = "//https://api.spotify.com/v1/search?q=";
}
When I add the getElementById to "artist-search", the alert in the search function stops working. Why is this? And is there a better way to get the text in an input field when someone clicks a submit button using vanilla Javascript?
i got got confused when i run the static js and html below
i want to dynamicly add option by clicking button, but when i put it under the form , it will do acition post, unless i put it out of form ,it works. what's the reason? i didn't set type as "submit" for the add button, does any button clicked in form will cause form action?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>作业管理</title>
</head>
<body>
<form enctype="multipart/form-data" method="POST" >
<div id="postform">
本次作业标题
<input type="text" name="title" />
<br>
<div class="postoption">
添加项目
<input type="text" name="option[]" />
音频文件
<input type="file" name="radio[]" />
答案
<input type="text" name="answer[]" />
</div>
</div>
<button id="add">添加输入项</button>
<input type="submit" value="提交" />
</form>
<script type="text/javascript">
window.onload = function(){
var add = document.getElementById("add");
add.onclick = function(){
addOption();
}
}
function addOption(){
var postForm = document.getElementById("postform");
var postoptions = document.getElementsByClassName("postoption");
var op = postoptions[0];
var optionClone = op.cloneNode(true);
postForm.appendChild(optionClone);
};
</script>
</body>
</html>
The <button> element is a submit button by default. You can change this with the type="button" attribute, which makes it do nothing by default, or calling preventDefault on the event. But I'd go with the attribute since then your intention is semantically clear without actually running the script.