Here's my code:
<head>
<script>input[type=text] {
padding:5px;
border:2px solid #000080;
-webkit-border-radius: 5px;
border-radius: 5px;
}
input[type=text]:focus {
border-color:#ccc;
}
-webkit-border-radius: 5px;
border-radius: 5px;
}
.rows {
text-align: center;
}</script>
<script>var btn = document.getElementsByTagName("button")[0];
var inpt = document.getElementsByName("post")[0];
function openBox() {
document.getElementById('postBox').style.display = "block";
}
btn.onclick = function () {
if (!inpt.value) alert("Please enter something to post.");
var tbl = document.getElementsByTagName("table")[0];
var row = tbl.insertRow(0);
var cell = row.insertCell(0);
var txt = document.createTextNode(inpt.value);
cell.appendChild(txt);
tbl.insertRow(0);
tbl.insertRow(0);
inpt.value = "";
};</script>
</head>
<body>
<input type="button" name="answer" value="post" onclick="openBox()" />
<div id="postBox" style="display:none;">
<center>
<input type="text" name="post" maxlength="100" />
<br>
</br>
<button style="border : solid 0px #000080; border-radius : 4px; moz-border-radius : 4px; -webkit-box-shadow : 0px 0px 5px rgba(0, 0, 0, 1.0); -moz-box-shadow : 0px 0px 5px rgba(0,0,0,1.0); box-shadow : 0px 0px 5px rgba(0,0,0,1.0); font-size : 24px; font-style : ;color : #ffffff; padding : 4px 10px; background-color : #000080;">post</button>
<br/>
<br/>
<center>
<table class="rows"></table>
</center>
</center>
</div>
</body>
</html>
Everything is fine, but when you go to "post" something, no action is taken, unlike in my JSFiddle below.
My JSFiddle (http://jsfiddle.net/yqh2rqh0/25/) is working perfectly how it is supposed to be working but the web paged version is not.
the first issue:
Uncaught SyntaxError: Unexpected token {
is because your css is being called with <script></script> tags instead of <style></style>
<script> <-------- change to style
input[type=text] {
padding:5px;
border:2px solid #000080;
-webkit-border-radius: 5px;
border-radius: 5px;
}
input[type=text]:focus {
border-color:#ccc;
}
-webkit-border-radius: 5px;
border-radius: 5px;
}
.rows {
text-align: center;
}
</script> <----- change to style
The second issue:
Uncaught TypeError: Cannot set property 'onclick' of undefined
is because your javascript needs to be loaded at the bottom of the page right before </body> instead of the top in the <head></head> (just like your fiddle is loading No wrap - In <body>)
Related
I made a web page for my project, where I need to change a button background color based on value from database.Like if the value below 10 then it will be green, 10~20 then yellow, 20++ then turns into red. Is it possible to do?
already the button works to fetch data from data base.enter image description here
You don't give enough information. Maybe, you can create a color column in your sql table, then with jinja or other you can do somethings like this:
Jinja:
<div style="background-color:{{ data['color_ref'] }};">Hello World</div>
PHP:
<div style="background-color:<?=$color_ref?>;">Hello World</div>
Javascript:
if (qtt <= 10) {
result = document.getElementById("happyday")
result.style.backgroundColor = red;
}
<table class="center">
<?php
if(array_key_exists('test', $_POST))
{button();}
function button()
{
$conn = mysqli_connect('localhost','root','','asimdb');
$sql= "SELECT * FROM atmdata WHERE atm_id = 'ATM_01'";
$result = mysqli_query($conn,$sql);
While ($row =mysqli_fetch_assoc($result))
{
echo "
<tr><th>ATM ID</th> <td>".$row["atm_id"]."</td></tr>
<tr><th>ATM Name</th><td>".$row["ATM_Name"]."</td></tr>
<tr><th>ATM Location</th><td>".$row["ATM_Location"]."</td></tr>
<tr><th>Contact No.</th><td>".$row["Contact_No"]."</td></tr>
<tr><th>View CCTV</th><td>".$row["CCTV"]."</td></tr>
<tr><th>Current Temerature</th><td>N/A</td></tr>";
}
echo"</table>";
}
?>
<style>
.button {
border: none;
color: #2F4F4F;
padding: 12px 30px;
border-radius: 20px;
text-align: center;
display: inline-block;
font-size: 16px;
font-weight: bold;
margin: 5px 5px;
cursor: pointer;
transition: transform .2s;
box-shadow:
0 1px 2px rgba(0,0,0,0.07),
0 2px 4px rgba(0,0,0,0.07),
0 4px 8px rgba(0,0,0,0.07),
0 8px 16px rgba(0,0,0,0.07),
0 16px 32px rgba(0,0,0,0.07),
0 32px 64px rgba(0,0,0,0.07);}
.button:hover {
transform: scale(1.1);
border: 1px solid black}
</style>
<form method="post">
<input type="submit"class= "button" name="test" value="ATM 01">
</form>
This question already has answers here:
Appending form input value to action url as path
(2 answers)
Closed 2 years ago.
I'm having a problem, I want to search something on my website and when I click in the button, it should take the search value and go to the website I want and search the same think I put in the search bar of my website but now I get this problem.
I have this html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW" />
<style type="text/css">
#tfheader{
background-color:#c3dfef;
}
#tfnewsearch{
float:right;
padding:20px;
}
.tftextinput2{
margin: 0;
padding: 5px 15px;
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
color:#666;
border:1px solid #0076a3; border-right:0px;
border-top-left-radius: 5px 5px;
border-bottom-left-radius: 5px 5px;
}
.tfbutton2 {
margin: 0;
padding: 5px 7px;
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
color: #ffffff;
border: solid 1px #0076a3; border-right:0px;
background: #0095cd;
background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
background: -moz-linear-gradient(top, #00adee, #0078a5);
border-top-right-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
}
.tfbutton2:hover {
text-decoration: none;
background: #007ead;
background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
background: -moz-linear-gradient(top, #0095cc, #00678e);
}
.tfbutton2::-moz-focus-inner {
border: 0;
}
.tfclear{
clear:both;
}
</style>
</head>
<body>
<!-- HTML for SEARCH BAR -->
<div id="tfheader">
<form id="tfnewsearch" method="get" action="https://spyse.com/target/domain/">
<input type="text" id="tfq" class="tftextinput2" name="q" size="21" maxlength="120" value="Search our website"><input type="submit" value=">" class="tfbutton2">
</form>
<div class="tfclear"></div>
</div>
</body>
</html>
And this JS:
<script type="text/javascript">
window.onload = function(){
var submitbutton = document.getElementById("tfq");
if(submitbutton.addEventListener){
submitbutton.addEventListener("click", function() {
if (submitbutton.value == 'Search our website'){
submitbutton.value = '';
}
});
}
}
</script>
When I search for sapo.pt on my website the result is https://spyse.com/target/domain?q=sapo.pt, and my objective is to get https://spyse.com/target/domain/sapo.pt, how can I take of the ?q= and put /sapo.pt?
You can use onsubmit attribute and set the action inside a function for example:
<form id="tfnewsearch" method="get" onsubmit="onSubmit()">
<input type="text" id="tfq" class="tftextinput2" name="q" size="21" maxlength="120" value="Search our website">
<input type="submit" value=">" class="tfbutton2">
</form>
Your JavaScript function will look like this:
function onSubmit(){
var action_src = "https://spyse.com/target/domain/" + document.getElementById("tfq").value;
var your_form = document.getElementById('tfnewsearch');
your_form.action = action_src ;
}
I am trying to add a onclick or click event that will allow someone to input a city and retrieve said city's weather information. I had added a event listener to the api function however it does not seem to work. Please help?
$.getJSON("https://api.openweathermap.org/data/2.5/forecast?q="+City+"&appid=dc171ae0b3b507207c6605cbab0a5f98",
function(data){
console.log(data);
var icon ="https://openweathermap.org/img/w/" + data.list[0].weather[0].icon +".png";
var temp=Math.floor(data.list[0].main.temp);
var weather=data.list[0].weather[0].main;
var city=data.city.name;
var date= data.list[0].dt_txt;
var humidity=data.list[0].main.humidity;
var wind=data.list[0].wind.speed;
$(".icon").attr("src",icon);
$(".weather").append(weather);
$(".temp").append(temp);
$(".city").append(city);
$(".date").append(date);
$(".humidity").append(humidity);
$(".wind").append(wind);
});
/*Html & body theme*/
*{
margin:0;
padding:0;
box-sizing: border-box;
}
html{
font-family:"lato",Arial,sans-serif;
}
body {
width: 100%;
height: 100vh;
color:black;
background: linear-gradient(-45deg, rgba(8,19,114,1) 6%, rgba(0,212,255,1) 42%, rgba(231,246,246,1) 82%);
}
/*container properties*/
.grid-container {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition:0.3s;
}
.grid-container:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
#box {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition:0.3s;
border-radius:5px;
}
#box{
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
border-radius: 5px;
}
.grid-item-1{
height: 150px;
width:1880px;
position:fixed;
left:10px;
top:20px;
font-size:100px;
text-align:center;
}
.grid-item-2{
height: 600px;
width:500px;
position:fixed;
left:10px;
top:350px;
}
.grid-item-3{
height: 300px;
width:1370px;
position:fixed;
left:520px;
top:180px;
}
.grid-item-4{
height:450px;
width:1370px;
position:fixed;
left:520px;
top:500px;
}
.grid-item-5{
height: 150px;
width:500px;
position:fixed;
left:10px;
top:180px;
font-size: 30px;
}
/*Search Bar Properties*/
form.searchInput input[type=text] {
padding: 10px;
font-size: 17px;
border: 1px solid grey;
float: left;
width: 80%;
background: #f1f1f1;
}
form.searchInput button {
float: left;
width: 20%;
padding: 10px;
background: #2196F3;
color: white;
font-size: 17px;
border: 1px solid grey;
border-left: none;
cursor: pointer;
}
form.searchInput button:hover {
background: #0b7dda;
}
form.searchInput::after {
content: "";
clear: both;
display: table;
}
form.searchInput {
top:30px;
bottom:40px;
position:relative;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="Stylesheet" href="WeatherDashboardStylesheet.css" type=text/CSS>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<title>WeatherDashboard</title>
</head>
<body>
<div class ="grid-container">
<div id="box" class="grid-item-1">
WeatherDashboard ⛅
</div>
<div id="box" class="grid-item-2">
Item 2
</div>
<div id="box" class="grid-item-3">
Item 3
</div>
<div id="box" class="grid-item-4">
<div id="display" class="display-box">
<p class="city"></p>
<img class="icon">
<p class="date"></p>
<p class="weather"></p>
<p class="temp"></p>
<p class="humidity"></p>
<p class="wind"></p>
</div>
</div>
<div id="box" class="grid-item-5">
Search for a City:
<form class="searchInput" style="margin:auto;max-width:300px">
<input id=input class="input1" type="text" placeholder="Search..." name="search" value="">
<button onclick="myfunction()" id="button" class="button1" type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
<script rel="Script" src="WeatherDashboardScript.js" type=text/javascript></script>
<script src="https://api.openweathermap.org/data/2.5/forecast?q=chicago&appid=dc171ae0b3b507207c6605cbab0a5f98"></script>
</body>
</html>
Hello, I am trying to add a onclick or click event that will allow someone to input a city and retrieve said city's weather information. I had added a event listener to the api function however it does not seem to work. Please help?
You've got a few problems with your html and your js.
First with your js. In your file, all the code is in 'the main' and is being executed as soon as the file loads. You dont want that, you want to create a function so you can use it to link it with the 'onclick' event. You that simply by wrapping your code in a function like this:
function myfunction() {
$.getJSON("https://api.openweathermap.org/data/2.5/forecast?q="+City+"&appid=dc171ae0b3b507207c6605cbab0a5f98",
function(data){
console.log(data);
var icon ="https://openweathermap.org/img/w/" + data.list[0].weather[0].icon +".png";
var temp=Math.floor(data.list[0].main.temp);
var weather=data.list[0].weather[0].main;
var city=data.city.name;
var date= data.list[0].dt_txt;
var humidity=data.list[0].main.humidity;
var wind=data.list[0].wind.speed;
$(".icon").attr("src",icon);
$(".weather").append(weather);
$(".temp").append(temp);
$(".city").append(city);
$(".date").append(date);
$(".humidity").append(humidity);
$(".wind").append(wind);
});
}
After that, I see you've got a variable called City inside your request which has no value. Your code has to know what is that and be able to retrieve its value. For that we call the 'document' object which contains the input and take its value. Like this:
var City = document.getElementById('input').value;
console.log(City) // Print it for good meassure
With that inside your function, every time you click the button, the value is going to be updated and do the request.
Now, in your html you need to change your button's type property. If its of type submit, the form is submited and the page reloaded (The whole form is unnecesary really but I'll leave it in as to not change your code too much). In this case you want your button to be of type 'button' so it only acts as a button when pressed. Like this:
...
<form class="searchInput" style="margin:auto;max-width:300px" >
<input id="input" class="input1" type="text" placeholder="Search..." name="search">
<button onclick="myfunction()" id="button" class="button1" type="button"><i class="fa fa-search"></i></button>
</form>
...
With all that your code should work, retrieve your json and display the information you want on screen.
I hope all of this helps!
I don't know why but JavaScript can't catch my input:
Mensaje: <input id="mensaje" type="text" name="mensaje" value="" style="width:30%;" placeholder="Escribe un mensaje a enviar...."/>
Is built to when I submit the PHP detect it and call the JS function:
function ClearFields() {
var e = document.getElementById("mensaje");
e.value='';
}
My form never reload the page and I can submit a text without reloading. The problem is that the value of textbox is always kept. That's why I'm trying to use JavaScript, to clear this textbox when it is submitted.
I get this error in JS console:
(index):24 Uncaught TypeError: Cannot set property 'value' of null(…)
Full code:
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<title>Chat de SL</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<script type="text/javascript">
$(document).ready(function() {
rsdfsdfsd();
asd();
});
function rsdfsdfsd() {
$('#nax').load('./funcionmensaje.php');
setTimeout(rsdfsdfsd, 200);
}
function ClearFields() {
var e = document.getElementById("mensaje");
e.value = '';
}
</script>
<script>
var contador = 0;
function asd() {
if (contador < 2) {
contador++;
var elem = document.getElementById('nax');
elem.scrollTop = elem.scrollHeight;
setTimeout(asd, 100);
}
}
</script>
<script>
</script>
</head>
<body>
<?php
if(isset($_POST['subname'])) {
echo '<script>',
'ClearFields();',
'</script>'
;
if ($_POST['mensaje'] == "") {
}
else {
file_put_contents('mensajeaenviar', $_POST['mensaje']);
file_put_contents('var', '0');
$fp = fopen('mensaje.php', 'a');
$mensaje = $_POST['mensaje'].PHP_EOL;
fwrite($fp, 'Tú: '.$mensaje .'<br>');
}
}
?>
<fieldset>
<font color="#c50000">Lugar:</font> Attached |
<font color="#c50000">Avatares cercanos:</font>
</fieldset>
<fieldset>
<legend>Chat</legend>
<td>
<div id="nax" style="height:70%; overflow:auto">
</div>
</td>
</fieldset>
<style>
nax {
font-family: 'Open Sans', serif;
font-size: 18px;
}
fieldset {
font-family: sans-serif;
border-radius: 10px;
background: #eee;
margin: 20px;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, .3);
position: relative;
border: 2px groove threedface;
}
legend {
position: absolute;
top: -2px;
background: #fff;
padding: 10px 20px;
border: 2px groove threedface;
border-top: none;
box-shadow: inset 0 -5px 5px rgba(0, 0, 0, .2);
text-shadow: 1px 1px 2px rgba(0, 0, 0, .3);
font-weight: bold;
}
legend span {
display: block;
margin: -20px;
background: #fff;
padding: 0px 20px;
}
footer {
font-family: sans-serif;
margin-top: 2%;
background: #ddd;
border-radius: 5px;
padding: 15px;
}
iframe {
display: none;
}
</style>
<fieldset style="margin-top:10px;height:3%;">
<form id="formulario" method="post" target="tar">
Mensaje: <input id="mensaje" type="text" name="mensaje" value="" style="width:30%;" placeholder="Escribe un mensaje a enviar...." />
<input type='submit' value='Enviar' name='subname' />
</form>
</fieldset>
<iframe name="tar" src="localhost/a.php">
</iframe>
</body>
<footer>EnriqueGF Utilities</footer>
</html>
You post to the iframe so, as you said yourself, the page is not reloaded and therefore the ClearFields function isn't executed on submit. Add an onsubmit handler to your form and call ClearFields from that.
i created sample program for business validation, here error message showing , but its not showing particular error field , how to solve this issue,
Thanks in advance .................................................................
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.save=function()
{
if($scope.firstName == undefined)
{
$('#popup1').fadeIn($(this).data());
// in the RC of 1.3 there is function.link only the function customs Validation.compile which
// needs to be invoked to get at the functions.
setTimeout(function(){
$('#popup1').fadeOut($(this).data());
},3000);
var element = window.document.getElementById('firstName');
if (element)
element.focus();
}
if($scope.lastName = undefined){
$('#popup1').fadeIn($(this).data());
// in the RC of 1.3 there is function.link only the function customs Validation.compile which
// needs to be invoked to get at the functions.
setTimeout(function(){
$('#popup1').fadeOut($(this).data());
},3000);
var element = window.document.getElementById('lastName');
if (element)
element.focus();
}
}
});
.modal-box {
display: none;
position: absolute;
z-index: 1000;
width: 98%;
background: white;
border-bottom: 1px solid #aaa;
border-radius: 20px;
box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
border: 1px solid rgba(0, 0, 0, 0.1);
background-clip: padding-box;
}
#media (min-width: 32em) {
.modal-box { width: 180px; top: 215px; left: 390px; }
}
.modal-box header,
.modal-box .modal-header {
padding: 1.25em 1.5em;
border-bottom: 1px solid #ddd;
}
.modal-box .modal-body { padding:22px; background-color: #dd4b39;
border-radius: 20px; height: 0px;
color: white;}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body >
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<input type="submit" ng-click="save()">
</div>
<div id="popup1" class="modal-box">
<div class="modal-body">
<span style="position:absolute;top:10px;">Please Enter the Value </span>
</div>
</div>
</body>
why you are opting this way to carry out validations on form fields when angular have self validation functions/operations. And your method isn't good enough to be considered as best practice when you're with angularJs
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="">
<p>Try leaving the first input field blank:</p>
<form name="myForm">
<p>Name:
<input name="firstName" ng-model="firstName" required>
<span ng-show="myForm.firstName.$touched && myForm.firstName.$invalid">The First name is required.</span>
</p>
<p>Adress:
<input type="text" name="lastName" ng-model="lastName" required>
<span ng-show="myForm.lastName.$touched && myForm.lastName.$invalid">The Addressis required.</span>
</p>
</form>
</body>
</html>
And after this you could customize styling for span used for error as well as JQUERY for animation effects. In your external css & Js scripts.
And it is considered to be the best practices for angularjs too. As well reduces headache of writing jquery code manually for validation. Thanks & Cheers :)
I edit your code please compare and verify
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.angularjs.org/1.4.9/angular.js"></script>
<style type="text/css">
.modal-box
{
display: none;
position: absolute;
z-index: 1000;
width: 98%;
background: white;
border-bottom: 1px solid #aaa;
border-radius: 20px;
box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
border: 1px solid rgba(0, 0, 0, 0.1);
background-clip: padding-box;
}
#media (min-width: 32em)
{
.modal-box { width: 180px; top: 215px; left: 390px; }
}
.modal-box header,
.modal-box .modal-header
{
padding: 1.25em 1.5em;
border-bottom: 1px solid #ddd;
}
.modal-box .modal-body
{
padding:22px; background-color: #dd4b39;
border-radius: 20px; height: 0px;
color: white;
}
</style>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<input type="submit" ng-click="save()">
<div id="popup1" class="modal-box">
<div class="modal-body">
<span style="position:absolute;top:10px;">{{error}}</span>
</div>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope,$http,$sce)
{
$scope.save=function()
{
if($scope.firstName == undefined)
{
$('#popup1').fadeIn($(this).data());
setTimeout(function()
{
$('#popup1').fadeOut($(this).data());
},3000);
var element = window.document.getElementById('firstName');
if (element)
element.focus();
$scope.error = "Please enter first name.";
return;
}
if($scope.lastName == undefined)
{
$('#popup1').fadeIn($(this).data());
setTimeout(function()
{
$('#popup1').fadeOut($(this).data());
},3000);
var element = window.document.getElementById('firstName');
if (element)
element.focus();
$scope.error = "Please enter last name.";
return;
}
}
});
</script>
</body>
</html>