In the following HTML/JS code, if I enter a valid e-mail id a command button and a tick mark should appear. But command button works fine. Tick mark is not appearing. Any one please help.
<html>
<head>
</head>
<body>
<form id="signUpForm">
<input type="email" id="emailField" required>
<button id="okButton" style="display:none">OK</button>
<img id "img1" src="valid.jpg" width=100px style="display:none"/>
</form>
<script>
const signUpForm = document.getElementById('signUpForm');
const emailField = document.getElementById('emailField');
const flag1 = document.getElementById('okButton');
const img1 = document.getElementById('img1');
emailField.addEventListener('keyup', function (event) {
isValidEmail = emailField.checkValidity();
if ( isValidEmail ) {
flag1.style="display:inline";
img1.style="display:block"";
} else {
flag1.style="display:none";
img1.style="display:none";
}
});
okButton.addEventListener('click', function (event) {
signUpForm.submit();
});
</script>
</body>
</html>
There are several mistakes which break the script flow in your code
No "=" for id assignment of image tag
<img id "img1" src="valid.jpg" width=100px style="display:none"/>
Redundant double quote at the end of instruction
img1.style="display:block"";
If you correct them all, it should work.
<html>
<head>
</head>
<body>
<form id="signUpForm">
<input type="email" id="emailField" required>
<button id="okButton" style="display:none">OK</button>
<!-- fixed: id "img1" -> id="img1", width=100px -> width="100px" -->
<img id="img1" src="valid.jpg" width="100px" style="display:none"/>
</form>
<script>
const signUpForm = document.getElementById('signUpForm');
const emailField = document.getElementById('emailField');
const flag1 = document.getElementById('okButton');
const img1 = document.getElementById('img1');
emailField.addEventListener('keyup', function (event) {
isValidEmail = emailField.checkValidity();
if ( isValidEmail ) {
flag1.style="display:inline";
img1.style="display:block"; //removed 3rd double quote
} else {
flag1.style="display:none";
img1.style="display:none";
}
});
okButton.addEventListener('click', function (event) {
signUpForm.submit();
});
</script>
</body>
</html>
<html>
</head>
<body>
<form id="signUpForm">
<input type="email" id="emailField" required>
<button id="okButton" style="display:none">OK</button>
<!--You Missed Equlas to sign in id -->
<img id ="img1" src="valid.jpg" width=100px style="display:none"/>
</form>
<script>
const signUpForm = document.getElementById('signUpForm');
const emailField = document.getElementById('emailField');
const flag1 = document.getElementById('okButton');
const img1 = document.getElementById('img1');
emailField.addEventListener('keyup', function (event) {
isValidEmail = emailField.checkValidity();
if ( isValidEmail ) {
flag1.style="display:inline";
img1.style="display:block";
} else {
flag1.style="display:none";
img1.style="display:none";
}
});
okButton.addEventListener('click', function (event) {
signUpForm.submit();
});
</script>
</body>
</html>```
Related
like in this picture, if I try to send a message it can come out but if try to submit a file or image it won't come out. this is my code below
enter image description here
<p id="demo"></p>
<div id="messages">
<div id="time"></div>
</div>
<form>
<input type="" placeholder="write a message">
<input type="file" id="myfile" name="myfile">
<button type="submit" class="submit">Send</button>
</form>
<script>
var date = new Date();
var time = date.getHours() + ":" + date.getMinutes() ;
function showMessage(text,isMine = false) {
document.getElementById("messages").innerHTML += `
<div class="message-row ${isMine?'mine':'theirs'}">
<div class="bubble">${text}</div>
<div class="time">${time}</div>
</div>
`;
}
const ws = new WebSocket('ws://localhost:8080');
ws.addEventListener('message', ev => {
ev.data.text().then(showMessage);
});
document.querySelector('form').onsubmit = ev => {
ev.preventDefault();
const input = document.querySelector('input');
ws.send(input.value);
showMessage(input.value, true);
input.value = '';
}
<input type="text" class="form-control name" name="name" id="focus_me" required maxlength="50" letters-with-space="" ng-trim="false" tabindex="1" ng-model="vm.detail.name" ng-paste="paste($event.originalEvent)" ng-init="vm.detail.name = null">
$scope.paste = function (event,field) {
var item = event.clipboardData.items[0];
item.getAsString(function (data) {
$scope.pastedData = data;
$scope.$apply();
});
}
Input : 继续
here is input , i am not able to paste it into textbox. how to enable it?
checkout this https://jsfiddle.net/geekcode/s91t2ryg/11/
I'm able to paste the Chinese content, just pass $event instead of $event.originalEvent.
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="ctrl">
<input ng-model="mod" type="text" ng-paste="paste($event)" ng-init="mod = null">
{{mod}}
<input ng-model="mod1" type="text">
</div>
</div>
<script>
var app = angular.module("app", []);
app.controller("ctrl", function($scope){
$scope.paste = function (event,field) {
var item = event.clipboardData.items[0];
item.getAsString(function (data) {
$scope.pastedData = data;
$scope.$apply();
});
}
});
</script>
Ive been using geolocation and HTML recently, i want to try to show an iframe when the submit button is pressed, i keep getting stuck on what to do.
<!DOCTYPE html>
<html>
<body>
<input type="text" id="text" />
<input type="button" id="btn" value="Submit" onClick="javascript: window.open('https://api.ipdata.co/' + document.getElementById('text').value);" />
</body>
</html>
Oh and here’s my iframe
The IPadress is the ipadress of a device i am testing this out on. I want to put this in where the “javascript: window.open” is
I'm not sure why You'd want to show an iframe with a JSON response...
var text = document.getElementById("text"),
btn = document.getElementById("btn"),
iframe = document.getElementById("iframe");
function text2iframe() {
iframe.src = "https://api.ipdata.co/" + text.value;
}
btn.addEventListener("click", text2iframe);
<input type="text" id="text" value="47.91.202.22"><br>
<input type="button" id="btn" value="Submit"><br>
<iframe id="iframe"></iframe>
When you can go for the JSON directly!
var text = document.getElementById("text"),
btn = document.getElementById("btn"),
pre = document.getElementById("pre");
function ipdata() {
var request = new XMLHttpRequest();
request.open('GET', "https://api.ipdata.co/" + text.value, true);
request.addEventListener("load", function() {
if (request.status >= 200 && request.status < 400) {
pre.textContent = request.responseText
var responseObj = JSON.parse(request.responseText);
console.log( responseObj.country_name )
console.dir( responseObj );
} else {
// error
}
});
request.addEventListener("error", function() {
// connection error
});
request.send();
}
btn.addEventListener("click", ipdata);
<input type="text" id="text" value="47.91.202.22"><br>
<input type="button" id="btn" value="Submit"><br>
<pre id="pre"></pre>
I have two inputs in which I am applying typeahead:-
<div class="form-group>
<label class="control-label=">Product Code:</label>
<input placeholder="Enter Value" type="text" class="form-control" ng-model="a.productCode" typeahead="code for code in getProductByCode($viewValue)" typeahead-loading="loadingCodes" typeahead-no-results="noResults"/>
<label class="control-label">Product Name:</label>
<input placeholder="Enter Value" type="text" class="form-control" ng-model="getNgModel(a)" typeahead="code for code in getProductNameByCode($viewValue,a.producrCode)" typeahead-loading="loadingCodes" typeahead-no-results="noResults" ng-disabled="!a.productCode"/>
<button type="button" ng-disabled="!a.productCode">Show</button>
</div>
My DIRECTIVE CODE:-
(function () {
'use strict';
angular.module('myApp.components')
.directive('products', products);
products.$inject = ['$http', '$timeout', 'ApiServices'];
function products($http, $timeout, ApiServices) {
return {
restrict: 'EA',
scope: {
},
link: function (scope, el, attrs) {
scope.a = {};
scope.getNgModel = function (a) {
if(a.productCode){
return a.productName;
}else{
return '';
}
};
scope.getProductCode = function(key){
var obj = {"key": key}
if(key.length>=2){
return ApiServices.getProductCodee(obj).then(function (response) {
return response.data.map(function(item){
return item;
});
});
} else {
return false;
}
}
scope.getProductCodeByName = function (key,Code) {
var obj = {"key": key, "Code":Code}
if(key.length>=2){
return ApiServices.getProductCodeByName(obj).then(function (response) {
return response.data.map(function(item){
return item;
});
});
} else {
return false;
}
};
},
templateUrl: ''
};
}
})();
What I want here is when I select a particular value from product code only then the product name and button gets enabled otherwise disabled. Also when the productName is disabled back the value inside it is set to null.Because the previous value remains bind to it and even disabled.
I am not able to clearly understand the second part of your question.. Also when the productName is disabled back the value inside it is set to null.Because the previous value remains bind to it and even disabled
Try this
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.4.0/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript">
angular.module('myApp', ['ui.bootstrap'])
.controller("mainCtrl", function ($scope) {
$scope.selected = '';
$scope.states = [
{
id:1,
name:'A'
},{
id:2,
name:'B'
}
];
var selectedByUser = false;
$scope.onSelectValue = function(selected){
$scope.selected = selected.name;
$scope.disableFields = false;
selectedByUser = true;
};
$scope.changingInput = function(inputValue){
// $scope.selected = null;
if (inputValue && inputValue.id) {
$scope.disableFields = true;
}else{
if (inputValue.length>0 && selectedByUser) {
$scope.disableFields = false;
}else{
$scope.disableFields = true;
// $scope.selected = null;
selectedByUser = false;
}
}
};
$scope.disableFields = true;
});
</script>
</head>
<body ng-controller="mainCtrl">
<div class="container">
<div class="form-group">
<label class="control-label=">Product Code:</label>
<input placeholder="Enter Value" ng-change="changingInput(selected)" type="text" class="form-control" ng-model="selected" typeahead="state as state.name for state in states | filter:$viewValue" typeahead-on-select="onSelectValue(selected)" typeahead-loading="loadingCodes" typeahead-no-results="noResults"/>
<label class="control-label">Product Name:</label>
<input placeholder="Enter Value" type="text" class="form-control" typeahead-loading="loadingCodes" typeahead-no-results="noResults" ng-disabled="disableFields"/>
<button class="btn btn-default" type="button" ng-disabled="disableFields">Show</button>
</div>
{{selected}}
</div>
</body>
</html>
If it does not work here then copy paste it in your editor and then try. Even after that it does not work then you can go to my gihub account, you will find my email address, then share me your mail address so I will mail you zipped solution.
i want a html a format in such a way that i can select a body text by clicking on it and it will appear in a text box in the same page in html.. for example lets say that a text "example" in body section. if i click on it, it which is the text "example" will appear in a text box on the same page. Thanx in advance...
<html>
<body>
name <input type=text name=name>
example[<- I WANT THIS TEXT TO BE APPEAR ON THE NAME TEXT BOX IF I CLICK ON IT]
</body>
</html>
Check the following code. I was not clear about the selection procedure you said above but I have two solution after you have selected the text. Hope it helps. I have used jQuery.
Solution 1:
I have provided a link to show the selection in a text box.
Html:
<div>
<p>THIS TEXT TO BE APPEAR ON THE NAME TEXT BOX IF I CLICK ON IT</p><br/>
<a href="#" id='click'> click</a><br/>
<input type='text' id='box1' value="Select Text" />
</div>
javascript/jQuery:
if(!window.Kolich){
Kolich = {};
}
Kolich.Selector = {};
Kolich.Selector.getSelected = function(){
var t = '';
if(window.getSelection){
t = window.getSelection();
}else if(document.getSelection){
t = document.getSelection();
}else if(document.selection){
t = document.selection.createRange().text;
}
return t;
}
Kolich.Selector.mouseup = function(){
var st = Kolich.Selector.getSelected();
if(st!=''){
$('#box1').val(st);
}
}
$(document).ready(function(){
$('#click').click(Kolich.Selector.mouseup);
});
Solution 2:
HTML:
<div>
<p>Thisdt I want to extract</p>
<input type='text' id='box1' value="Select Text" />
</div>
javascript/jQuery:
if(!window.Kolich){
Kolich = {};
}
Kolich.Selector = {};
Kolich.Selector.getSelected = function(){
var t = '';
if(window.getSelection){
t = window.getSelection();
}else if(document.getSelection){
t = document.getSelection();
}else if(document.selection){
t = document.selection.createRange().text;
}
return t;
}
Kolich.Selector.mouseup = function(){
var st = Kolich.Selector.getSelected();
if(st!=''){
$('#box1').val(st);
}
}
$(document).ready(function(){
$(document).bind("mouseup", Kolich.Selector.mouseup);
});
Try the below code. Upon double click on any word, it gets displayed in the text box.
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("body").dblclick(function () {
$("#test").val(getSelectionText());
});
});
function getSelectionText() {
var text = "";
if (window.getSelection) {
text = window.getSelection().toString();
} else if (document.selection && document.selection.type != "Control") {
text = document.selection.createRange().text;
}
return text;
}
</script>
</head>
<body>
<input id="test" type="text" name="name" value="" />
<div>
Lucky day</div>
<p>
Hello world!
</p>
</body>
</html>