I am trying to show a DIV if two inputs have the same value, as already asked here: How to compare two inputs and show a div
I can run the code snippet, but when I try it myself it doesn't seem to work. The code is very simple, yet I don't see why the DIV isn't showing when the two values are matching:
$("#some1, #some2").on("keyup change", function(){
let firstEl = $("#some1"),
secondEl = $("#some2"),
conditionalEl = $("#showhide");
if (firstEl.val() == secondEl.val() ) {
conditionalEl.show();
} else {
conditionalEl.hide();
}
});
#showhide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="number" name="some1" id="some1">
<input type="number" name="some2" id="some2">
<div id="showhide">The inputs are the same</div>
<input type="submit">
</form>
</html>
Seems your key up function is not working, Try this
<html>
<head>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function myFunction(vaule){
let conditionalEl = $('#showhide');
if ($("#some1").val() == $("#some2").val() ) {
conditionalEl.show();
} else {
conditionalEl.hide();
}
}
</script>
<form>
<input type="number" name="some1" id="some1" onchange="myFunction()">
<input type="number" name="some2" id="some2" onchange="myFunction()">
<div id="showhide" style="display:none;">The inputs are the same</div>
<input type="submit">
</form>
</body>
</html>
Related
I have a problem using a switch when it is in a set of switches generated by ng-repeat. My objective is to trigger an alert when each individual checkbox is clicked.
For example, when I click the switch to enable it should alert "1", and off should alert "0", but when I click the switch to enable it alerts "1" and when i click the other switch to enable it alerts "0".
Here is a plunkr with a sample single switch
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="switchdemo">
<h1>On Off switch using Angular JS</h1>
<div ng-controller="DemoController" ng-init="init()">
<div class="well">
<label class="switch" >
<input type="checkbox" ng-model="Token" ng-change="changeStatus();">
<span class="slider round"></span>
</label>
</div>
<div class="well">
<label class="switch" >
<input type="checkbox" ng-model="Token" ng-change="changeStatus();">
<span class="slider round"></span>
</label></div>
<pre>{{ status }}</pre>
</div>
</body>
</html>
AngularJS:
angular.module('switchdemo', []).controller('DemoController', function($scope){
$scope.init = function(){
$scope.status = 1;
}
$scope.changeStatus = function(){
$scope.status = !$scope.status;
if($scope.status==1) {
$scope.status=1;
alert($scope.status);
}
else
{
$scope.status=0;
alert($scope.status);
}
}
})
In html
<div ng-controller="MyCtrl">
<input type="checkbox" ng-model="Token" ng-change="changeStatus(Token);">
</div>
in javascript and you will got true/false into alert refer link http://jsfiddle.net/ADukg/18311/
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.changeStatus = function(data){
alert(data)
};
}
I am new to angular js. I am trying to change the border of the fields to red when empty form is submitted.
I have written controller where it processes the input when valid form is submitted and just makes a field(invalidFormSubmitted) to true when invalid form is submitted.
I tried below css but it is not working
input.invalidFormSubmitted{
border-bottom: 0.125rem solid #e42105;
}
I also tried with ng-submitted, but no luck.
How do i make the field border red when this variable is set to true?
Thanks in advance.
you're looking for ng-class
angular.module('app',[]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<style>
input.invalidFormSubmitted{
border:1px solid red;
}
</style>
<div ng-app="app">
<form name="myForm">
<input type="text" required ng-model="foo" name="sample" ng-class="{'invalidFormSubmitted':myForm.sample.$invalid}" />
</form>
</div>
As you can see the class is applied as long there is no value in the input here
try this.
var app = angular.module("app",[]);
app.controller("MyCtrl" , function($scope){
});
.invalidFormSubmitted{
border-bottom: 0.125rem solid #e42105;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
<form name="form">
<input name="name" ng-model="name" ng-required="true" ng-class="{'invalidFormSubmitted': form.name.$invalid && check}">
<button type="button" name="button" ng-click="check = true">ENVIAR</button>
</form>
</div>
I would like to know if there is a way to change the color of an input field after you clicked on a submit button, like change it's color to red if the input is invalid. My current solution marks every input red at the beginning, because of my current css code.
input:invalid {
background: #FF3300;
}
I want the input fields to remain white until you hit submit button, then the correct inputs should turn green while the incorrect ones should turn red.
Thanks in advance.
Small example.
HTML:
<html><!DOCTYPE html>
<head>
<title>Example</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script type="text/javascript" src="javascript.js"></script>
</head>
<body>
<form action="">
<input type="text" id="name" class="input" maxlength="50" pattern="[A-Za-z\\s]*" placeholder="Name" required>
<input type="submit" value="Submit" id="Submit">
</form>
</body>
</html>
CSS:
input:invalid {
background: #FF3300;
}
input:valid {
background: lightgreen;
}
#Submit{
background: lightgrey;
}
Try this:
<!DOCTYPE html>
<html>
<head>
<title>Say I'm a duck</title>
</head>
<body>
<script>
function verify(){
var value = document.forms[0].item.value; // or replace document.forms[0].item by document.getElementById('name')
var objective = "I'm a duck";
if(objective != value){
document.forms[0].item.style.color="#FF3300";
return false;
} else {
document.forms[0].item.style.color="lightgreen";
}
return true;
}
</script>
<form action="" method="" onSubmit="verify();">
<input type="text" name="item" id="name" class="input" maxlength="50" pattern="[A-Za-z\\s]*" placeholder="Name" required>
<input type="submit" value="Submit" id="Submit">
</form>
</body>
</html>
The onSubmit property will call the js verif() function.
In javascript, the call to DOM Object.style.property = value; will change the object style.
W3School js change css
Admin XVII
You may have incorrectly set parameters in the tag input. That is: type, required, pattern. Read more on the Internet about HTML5 form validation. CSS selector you are correct. Please note that this method works only in modern browsers supporting HTML5, in older browsers, you will have to use JS libraries to validate the form or write a small script in PHP.
What you are asking for is one of angularJS features.
But to answer your question... First of all I asume you are using ajax, or the reload won't show the input any more. If that is so, when you get an error from the call you can add an .invalid class, so instead you'd need this:
input.invalid {
background: #FF3300;
}
And on ajax error:
document.querySelector(".targetInput").classList.add("invalid");
Have you considered using JQuery validation plugin?
$("form").validate({
errorClass: "my-error-class",
validClass: "my-valid-class",
rules: {
test: {
required: true,
minlength: 12
}
}
});
http://jsfiddle.net/8vQFd/
I was wondering if there is a way to submit/write html form data to a txt file with the use of scripts but with out using a webserver, webhost, wamp, xamp etc.
I have been trying with php scripts but they just open the php document on submitting.
Any help is appreciated :D
Something like this?
<!DOCTYPE html>
<html>
<head>
<style>
form * {
display: block;
margin: 10px;
}
</style>
<script language="Javascript" >
function download(filename, text) {
var pom = document.createElement('a');
pom.setAttribute('href', 'data:text/plain;charset=utf-8,' +
encodeURIComponent(text));
pom.setAttribute('download', filename);
pom.style.display = 'none';
document.body.appendChild(pom);
pom.click();
document.body.removeChild(pom);
}
</script>
</head>
<body>
<form onsubmit="download(this['name'].value, this['text'].value)">
<input type="text" name="name" value="test.txt">
<textarea rows=3 cols=50 name="text">Please type in this box. When you
click the Download button, the contents of this box will be downloaded to
your machine at the location you specify. Pretty nifty. </textarea>
<input type="submit" value="Download">
</form>
</body>
</html>
You can use JavaScript:
<script type ="text/javascript">
function WriteToFile(passForm) {
set fso = CreateObject("Scripting.FileSystemObject");
set s = fso.CreateTextFile("C:\test.txt", True);
s.writeline(document.passForm.input1.value);
s.writeline(document.passForm.input2.value);
s.writeline(document.passForm.input3.value);
s.Close();
}
</script>
If this does not work, an alternative is the ActiveX object:
<script type = "text/javascript">
function WriteToFile(passForm)
{
var fso = new ActiveXObject("Scripting.FileSystemObject");
var s = fso.CreateTextFile("C:\\Test.txt", true);
s.WriteLine(document.passForm.input.value);
s.Close();
}
</script>
Unfortunately, the ActiveX object, to my knowledge, is only supported in IE.
i made a little change to this code to save entry of a radio button but unable to save the text which appears in text box after selecting the radio button.
the code is below:-
<!DOCTYPE html>
<html>
<head>
<style>
form * {
display: block;
margin: 10px;
}
</style>
<script language="Javascript" >
function download(filename, text) {
var pom = document.createElement('a');
pom.setAttribute('href', 'data:text/plain;charset=utf-8,' +
encodeURIComponent(text));
pom.setAttribute('download', filename);
pom.style.display = 'none';
document.body.appendChild(pom);
pom.click();
document.body.removeChild(pom);
}
</script>
</head>
<body>
<form onsubmit="download(this['name'].value, this['text'].value)">
<input type="text" name="name" value="test.txt">
<textarea rows=3 cols=50 name="text">PLEASE WRITE ANSWER HERE. </textarea>
<input type="radio" name="radio" value="Option 1" onclick="getElementById('problem').value=this.value;"> Option 1<br>
<input type="radio" name="radio" value="Option 2" onclick="getElementById('problem').value=this.value;"> Option 2<br>
<form onsubmit="download(this['name'].value, this['text'].value)">
<input type="text" name="problem" id="problem">
<input type="submit" value="SAVE">
</form>
</body>
</html>
I know this is old, but it's the first example of saving form data to a txt file I found in a quick search. So I've made a couple edits to the above code that makes it work more smoothly. It's now easier to add more fields, including the radio button as #user6573234 requested.
https://jsfiddle.net/cgeiser/m0j7Lwyt/1/
<!DOCTYPE html>
<html>
<head>
<style>
form * {
display: block;
margin: 10px;
}
</style>
<script language="Javascript" >
function download() {
var filename = window.document.myform.docname.value;
var name = window.document.myform.name.value;
var text = window.document.myform.text.value;
var problem = window.document.myform.problem.value;
var pom = document.createElement('a');
pom.setAttribute('href', 'data:text/plain;charset=utf-8,' +
"Your Name: " + encodeURIComponent(name) + "\n\n" +
"Problem: " + encodeURIComponent(problem) + "\n\n" +
encodeURIComponent(text));
pom.setAttribute('download', filename);
pom.style.display = 'none';
document.body.appendChild(pom);
pom.click();
document.body.removeChild(pom);
}
</script>
</head>
<body>
<form name="myform" method="post" >
<input type="text" id="docname" value="test.txt" />
<input type="text" id="name" placeholder="Your Name" />
<div style="display:unblock">
Option 1 <input type="radio" value="Option 1" onclick="getElementById('problem').value=this.value; getElementById('problem').show()" style="display:inline" />
Option 2 <input type="radio" value="Option 2" onclick="getElementById('problem').value=this.value;" style="display:inline" />
<input type="text" id="problem" />
</div>
<textarea rows=3 cols=50 id="text" />Please type in this box.
When you click the Download button, the contents of this box will be downloaded to your machine at the location you specify. Pretty nifty. </textarea>
<input id="download_btn" type="submit" class="btn" style="width: 125px" onClick="download();" />
</form>
</body>
</html>
I have a iframe containing div to be shown later that is initially hidden using a class. When I remove the class from the container div, everything inside it is shown. but textbox inside iframe is not shown.
parent.htm
<style>
.hide
{
display: none;
}
</style>
<script>
function showSearchWindow(show) {
if (show) {
$('div.overlay').removeClass('hide');
}
else {
$('div.overlay').addClass('hide');
}
}
</script>
<form id="form1">
<div class='overlay hide'>
<input type="text" id='txt1' value='test1' />
<iframe id="frame" src="frame.htm"></iframe>
</div>
<input type="button" id='btnShow' value='Show' onclick='showSearchWindow(true)' />
<input type="button" id='btnHide' value='Hide' onclick='showSearchWindow(false)' />
</form>
frame.htm
//Reference to jQuery 1.4.1 js file
<form id="form1">
<input type="text" id='txt2' value='test'/>
</form>
when I click 'btnShow', 'txt1' is shown but 'txt2' is not shown.
I did not work in IE 7,8 and 9. in other major browsers it works fine.
Are you using jQuery?
Calling $('div.overlay').removeClass('hide') is not pure javascript.
A solution with pure javascript could look like this:
<html>
<head>
<style>
.hide { display: none; }
</style>
<script>
function showSearchWindow(show) {
document.getElementById("mydiv").className = (show ? "" : "hide");
}
</script>
</head>
<body>
<form id="form1">
<div class='hide' id='mydiv'>
<input type="text" id='txt1' value='test1' />
<iframe id="frame" src="frame.htm"></iframe>
</div>
<input type="button" id='btnShow' value='Show' onclick='showSearchWindow(true)' />
<input type="button" id='btnHide' value='Hide' onclick='showSearchWindow(false)' />
</form>
</body>
</html>
The changes I've made is using document.getElementById("mydiv").className to set the class name. I also access the div using id=mydiv instead of class=overlay.
This works in FF9. Hope it helps!
Reloading the page after removing the class is the best solution I found so far.
function showSearchWindow(show) {
if (show) {
$('div.overlay').removeClass('hide');
$('#frame').attr('src', 'frame.htm');
}
else {
$('div.overlay').addClass('hide');
$('#frame').attr('src', 'about:blank');
}
}
<iframe id="frame" src="about:blank"></iframe