ng-disable a button if ng-pattern of input does not match - javascript

I want to disable a button with ng-disable if ng-pattern of an input field does not match the regular expression. In this case the regular expression is "[0-9]". I have tried the following code:
Index.html
<!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" xmlns="http://www.w3.org/1999/xhtml" ng-app="Filter">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ASCII" />
<title>Test</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
<script type="text/javascript" src="Test.js"></script>
</head>
<body>
<div class="ctrl" ng-controller="Ctrl">
Text <input type="text" ng-model="input_field" ng-pattern="[0-9]"><br/>
<button ng-disabled="input_field.$valid">Start Filter</button>
</div>
</body>
</html>
Test.js
Module.controller('Ctrl', function($scope){
$scope.input_field = "Insert your Text here!";
}
Unfortunately it is not working. I have tried many ways but nothing worked. Do you have any ideas how to disable the button if the pattern do not match.

I think you should wrap it with <form> and fix the syntax: $error instead of $valid, [0-9] -> /^[0-9]/. Here is a demo, adjust it appropriately:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<form name="myForm">
Input: <input type="text" ng-model="input_field" name="input_field" ng-pattern="/^[0-9]/" placeholder="Insert a number"><br/>
<button ng-disabled="myForm.input_field.$error.pattern || !input_field">Start Filter</button>
</form>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {});
</script>
</body>
</html>

Related

window.open() opening a tab instead of a window in Chrome using user input as url source

Not matter what I try, this code is still opening in a new tab. Any ideas on how to modify this to make a new window open?
<!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>
<title>Cast Challonge</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#button').click(function(e) {
var inputvalue = $("#input").val();
window.open("http://challonge.com/"+inputvalue+"/module?theme=5928&show_final_results=0&multiplier=0.3&show_tournament_name=1&scale_to_fit=1"),"_blank","width=1323,height=816";
});
});
</script>
</head>
<body>
<input type="text" value="" id="input">
<button type="button" id="button">Submit Tournament ID</button>
</body>
</html>
Sharing the correct answer in case anyone ever needs this:
<!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>
<title>Cast Challonge</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#button').click(function(e) {
var inputvalue = $("#input").val();
window.open(("http://challonge.com/"+inputvalue+"/module?theme=5928&show_final_results=0&multiplier=0.3&show_tournament_name=1&scale_to_fit=1"),"_blank","width=1323,height=816";)
});
});
</script>
</head>
<body>
<input type="text" value="" id="input">
<button type="button" id="button">Submit Tournament ID</button>
</body>
</html>
Change '_blank' with your new window name. Example: 'New Window Test'

Onclick not working with outside .JS file

what am I doing wrong here? I got a separate js file from my html but onclick doesn't seem to reach the js file I have. It works though if I place the function code inside the html. Help me.
//jlhtml.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script type="text\javascript" src="jljs.js"></script>
<meta charset="utf-8">
</head>
<body>
<center>
<fieldset>
<p>
Search here: <input type="text" id="txtsearch"/> &nbsp
<button onclick="Search()">Find now</button>
</p>
</fieldset>
</center>
</body>
</html>
//jljs.js file below
function Search()
{
var me = (d3.select("#txtsearch").property("value"));
alert(me);
}
I created a short snippet which binds the Search function to the button click event using d3.
var searchButton = d3.select("#searchButton").on("click", Search);
function Search() {
var me = (d3.select("#txtsearch").property("value"));
alert(me);
}
<!DOCTYPE html>
<html lang="en">
<script src="https://d3js.org/d3.v3.min.js"></script>
<meta charset="utf-8">
<body>
<center>
<fieldset>
<p>
Search here: <input type="text" id="txtsearch" /> &nbsp
<button id="searchButton">Find now</button>
</p>
</fieldset>
</center>
</body>
</html>

Unable to load data in Data Binding Expression in Angular JS

I'm very new to angular JS. I'm using 1.5x stable version of js. I've started with a simple html code :-
<!DOCTYPE html>
<html data-ng-app="app">
<head>
<title>First JS demo</title>
</head>
<body>
Name :
<br/>
<input type="text" data-ng-model="name" /> {{ name }}
<script src="angular.min.js"/>
</body>
</html>
But while rendering the html in browser im only getting {{ name }} text in data binding expression instead of the actual name value typed in the textbox. I checked that the JS file is loaded correctly in HTML.
Am I doing something wrong? Please help me.
Thanks in advance
You must be define app name and controller name
<!DOCTYPE html>
<html data-ng-app="app">
<head>
<title>First JS demo</title>
</head>
<body ng-controller="myCtrl">
Name :
<br/>
<input type="text" data-ng-model="name" /> {{ name }}
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var app = angular.module('app', []);
app.controller('myCtrl', function($scope, $http) {
});
</script>
</body>
</html>
Or something like this
<!DOCTYPE html>
<html lang="en-US">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
</body>
</html>

Append the results from input fields from one page and show them on another page

I'm trying to do the following:
- I have 2 pages (page 1 with input fields & page 2 where the entered input should display)
- I need to get all that was typed from the first input field, and put the results inside the tag "content" of the 2nd page.
1º Page Input :
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Page 1 - Input</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<script>
function submit() {
var code = $('textarea[name=message]').val(); //Input Code HTML
$("#iframeId").contents().find("body").html($("<div class='content'></div>").append(code));
}
</script>
</head>
<body>
<h2>Input</h2>
<textarea name="message" id="input" rows="10" cols="100"></textarea>
<input type="button" value="Submit" onclick="submit();" />
<iframe id="iframeId" name="iframeId" src="layout.html"></iframe>
<div id="test">
Text
</div>
</body>
</html>
2º Page Layout :
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Page 2 - Layout</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
</head>
<body>
<div class="header"></div>
<div class="content"></div>
<div class="sidebar"></div>
<div class="foot"></div>
</body>
</html>
THANKS!
This should work if both files are having the same origin:
<script>
function submit() {
var code = $('textarea[name=message]').val(); //Input Code HTML
$('#iframeId').contents().find('.content').text(code);
}
</script>
You were almost there :)
UPDATE:
To insert on submit:
<script type="text/javascript">
$('#iframeId').load(function(){
$('input[type="button"]').on('click',function(){
$('#iframeId').contents().find('.content').html($('textarea[name=message]').val());
});
});
</script>
To insert on type:
<script type="text/javascript">
$('#iframeId').load(function(){
$('textarea[name=message]').on('input',function(){
$('#iframeId').contents().find('.content').html($(this).val());
});
});
</script>

Dojo dijit.form.ValidationTextBox help

I try to use first time the Dojo toolkit and I'm facing an error.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="/lib/dojo/dojo.js.uncompressed.js"></script>
<title>Insert title here</title>
</head>
<body>
<form enctype="application/x-www-form-urlencoded" action="" method="post">
<dl class="zend_form">
<dt id="teszt-label">
<label for="teszt" class="required">teszt:
</label>
</dt>
<dd id="teszt-element">
<input type="text" name="teszt" id="teszt" value=""
dojoType="dijit.form.ValidationTextBox"
regExp="\d{5}" required="true" invalidMessage="asd" />
</dd>
</dl>
</form>
<script type="text/javascript">// <![CDATA[
dojo.require("dijit.form.ValidationTextBox");
// ]]></script>
</body>
</html>
I got the script from the second example: http://www.dojotoolkit.org/reference-guide/dijit/form/ValidationTextbox.html#dijit-form-validationtextbox
The script must validate the input with the given regular expression.
I see in firebug, that it loads all of the required components, but it doesn't work on the input field.
What's wrong?
<script type="text/javascript">
//<![CDATA[
dojo.require("dojo.parser");
dojo.addOnLoad(function(){
dojo.parser.parse();
});
// ]]>
</script>
This code solved the problem.
how about doing this instead?
<script type="text/javascript" src="/assets/dojo/dojo.js" data-dojo-config="parseOnLoad: true, isDebug: true"></script>
isDebug: true is set if you want some debug messages appearing on browser's console.
regExp="\d{5}" to regExp: "[\\d]{5}"

Categories