When i click on button it has to diaplay dialogbox but it is not showing. I found this code from dojo documentation. Whwn i click on button it is not showing anything. Here is my code please help me.
<script type="text/javascript">
dojo.require("dijit.form.Form");
dojo.require("dijit.Dialog");
dojo.require("dijit.form.Button");
dojo.require("dojo.parser");
dojo.require("dijit.form.TextBox");
</script>
<body class="claro">
<div id="gridDiv"></div>
<div data-dojo-type="dijit.Dialog" id="formDialog2"
title="Filtering Rows" style="display: none">
<form data-dojo-type="dijit.form.Form" id="123">
<script type="dojo/event" data-dojo-event="onSubmit"
data-dojo-args="e">
require(["dojo/dom"], function(dom){
var f = dojo.byId("123");
var s = "";
var elem = f.elements[0];
s = elem.value;
dijit.byId('grid').filterBar(s);
});
return false;
</script>
Search: <input type="text" name="searchtext" value=""
data-dojo-type="dijit/form/TextBox">
<div class="dijitDialogPaneActionBar">
<button data-dojo-type="dijit.form.Button" type="submit">OK</button>
<button data-dojo-type="dijit.form.Button" type="button"
data-dojo-props="onClick:function(){dijit.byId('formDialog2').hide();}">Cancel</button>
</div>
</form>
</div>
<button id="buttonThree" data-dojo-type="dijit.form.Button"
type="button">
Show Filter
<script type="dojo/method" data-dojo-event="onClick"
data-dojo-args="evt">
dijit.byId("formDialog2").show();
</script>
</button>
Check to see if you have
require(["dijit/Dialog",'dijit/form/TextBox','dijit/form/Button']);
Added somewhere to the head. When i added it it worked fine.
http://jsfiddle.net/theinnkeeper/HX4uR/
It seems your dojo is not loading at all. To avoid parsing issues I always import the dojo library with djConfig="parseOnLoad:true when calling the script for the newest versions of dojo.
dojo.require("dijit.form.Form");
dojo.require("dijit.Dialog");
dojo.require("dijit.form.Button");
dojo.require("dojo.parser");
dojo.require("dijit.form.TextBox");
<link href="http://ajax.googleapis.com/ajax/libs/dojo/1.6.2/dojo/resources/dojo.css" rel="stylesheet" />
<link href="http://ajax.googleapis.com/ajax/libs/dojo/1.6.2/dijit/themes/claro/claro.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.3/dojo/dojo.js" djConfig="parseOnLoad:true"></script>
<body class="claro">
<div id="gridDiv"></div>
<div data-dojo-type="dijit.Dialog" id="formDialog2" title="Filtering Rows" style="display: none">
<form data-dojo-type="dijit.form.Form" id="123">
<script type="dojo/event" data-dojo-event="onSubmit" data-dojo-args="e">
require(["dojo/dom"], function(dom){ var f = dojo.byId("123"); var s = ""; var elem = f.elements[0]; s = elem.value; dijit.byId('grid').filterBar(s); }); return false;
</script>
Search:
<input type="text" name="searchtext" value="" data-dojo-type="dijit/form/TextBox">
<div class="dijitDialogPaneActionBar">
<button data-dojo-type="dijit.form.Button" type="submit">OK</button>
<button data-dojo-type="dijit.form.Button" type="button" data-dojo-props="onClick:function(){dijit.byId('formDialog2').hide();}">Cancel</button>
</div>
</form>
</div>
<button id="buttonThree" data-dojo-type="dijit.form.Button" type="button">
Show Filter
<script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt">
dijit.byId("formDialog2").show();
</script>
</button>
</body>
</html>
Related
This is my simple html code. I included javascript inside this html file.I would like to perform validation on name like no empty field and data format validation but it is not working. Can some one please help me to get rid of this
<html>
<head>
<title>Aptitude Competition Online</title>
<link rel="stylesheet" type="text/css" href="index.css">
<script type="text/javascript">
function validate()
{
var nam = document.forms[0].name.value;
if(nam == "")
{
alert("Name should be filled out");
document.getElementById("name").focus;
return false;
}
else {
return true;
}
}
</script>
</head>
<body>
<div id="header1">
<font id="font1">Aptitude Quiz</font>
</div>
<div id="bgr">
<div id="emal">
<font style="position:absolute;top:16px;left:100px;font-size:20px;">Welcome to Aptitude Quiz</font><br><br><br
<form name="form">
Name : <input type="text" name="name" id="name"><br><br>
<input name="Participate" type="button" value="Participate" onClick="validate()" >
</form>
</div>
</div>
<div id="footer">
Contact Us : gmail#name.com
</div>
</body>
</html>
You have a mistake in your HTML code. You forgot to close a <br> tag before <form name='form'>
Also, "focus" is a method, not a property. I have added that as well
Here is the corrected code.
<html>
<head>
<title>Aptitude Competition Online</title>
<link rel="stylesheet" type="text/css" href="index.css">
<script type="text/javascript">
function validate() {
var nam = document.forms[0].name.value;
if (nam == "") {
alert("Name should be filled out");
document.getElementById("name").focus();
return false;
} else {
return true;
}
}
</script>
</head>
<body>
<div id="header1">
<font id="font1">Aptitude Quiz</font>
</div>
<div id="bgr">
<div id="emal">
<font style="position:absolute;top:16px;left:100px;font-size:20px;">Welcome to Aptitude Quiz</font>
<br>
<br>
<br> <form name="form"> Name :
<input type="text" name="name" id="name">
<br>
<br>
<input name="Participate" type="button" value="Participate" onClick="validate()">
</form>
</div>
</div>
<div id="footer">
Contact Us : gmail#name.com
</div>
</body>
</html>
So I am working on this project and I use a barcode scanner that has Windows CE 5.0 as its operating system. whenever I scan the barcode, the page automatically refreshes which should not. After it scans the barcode the user should be able to enter a number for quantity and after that the user will click the preview button which will take the user to another page. I've searched the net for solutions for this problem but still does not work. Help Please. Thank you.
<?php
include("webconfig.php");
ob_start();
session_start();
if(!isset($_SESSION["USER_CODE"]) || $_SESSION["ACTIVE"] == '0')
header("location:login.php");
$barcode = $_REQUEST["barcode"];
$item_desc = $_REQUEST["item_desc"];
$price = $_REQUEST["price"];
$quantity = $_REQUEST["txtQty"];
$pricef = number_format($price, 2);
$sql = ibase_query($conn, "SELECT * FROM ITEM_MASTER WHERE ITEM_CODE = '$barcode'") or die(ibase_errmsg());
$row = ibase_fetch_assoc($sql);
$imgname = $row['IMGNAME'];
?>
<!DOCTYPE html>
<html>
<head>
<link href="docs/css/metro.css" rel="stylesheet">
<link href="docs/css/metro-icons.css" rel="stylesheet">
<link href="docs/css/docs.css" rel="stylesheet">
<script src="docs/js/jquery-2.1.3.min.js"></script>
<script src="docs/js/metro.js"></script>
<script src="docs/js/docs.js"></script>
<script src="docs/js/prettify/run_prettify.js"></script>
<script src="docs/js/ga.js"></script>
<script src="js/jquery.js"></script>
<script src="js/jquery.ajaxcomplete.js"></script>
<script type="text/javascript" src="keyboard.js" charset="UTF-8"></script>
<link rel="stylesheet" type="text/css" href="keyboard.css">
<link rel="shortcut icon" href="_img/assigns-favicon.PNG">
<title>Albert Smith Signs - Warehouse Inventory System</title>
</head>
<body>
<div class="page-content">
<div class="align-center">
<div class="container">
<!-- Default -->
<div class="panel">
<div class="content">
<div class="grid">
<div class="row cells12">
<!-- Default -->
<div class="panel">
<div class="heading">
<span class="title">ENTER QUANTITY</span>
</div>
<div class="content">
<div class="grid">
<div class="row cells12">
<div class="cell colspan12">
<form onsubmit="return false;" method="post">
<label>Enter Quantity</label>
<br />
<div class="input-control text full-size" placeholder="Type search keyword here" data-role="input">
<!-- <input name="txtQty" class="keyboardInput" style="width: 225px;" type="text" value="1" autocomplete="off" /> -->
Scan Barcode
<input name="txtBarcode" id="ip" type="text" autofocus />
<br />
<br />
Enter Quantity
<input name="txtQty" id="next" type="text" />
</div>
<div class="cell colspan12">
<hr>
<br />
<br />
<br />
<br />
<br />
<input type="submit" onsubmit="return true;" name="btnPreview" style="width:80px; height:50px;" class="button primary rounded large-button" value="Preview" />
</div>
</div>
<?php
if(isset($_POST['btnPreview']) && $_POST['txtQty'] > 0)
{
$quantity = $_POST['txtQty'];
$barcode = $_POST['txtBarcode'];
$sql = "SELECT * FROM ITEM_MASTER WHERE ITEM_CODE = '$barcode'";
$query = ibase_query($conn, $sql) or die(ibase_errmsg());
if ($row = ibase_fetch_assoc($query))
{
$item_desc = $row['ITEM_DESC'];
$price = $row['COST'];
header("location:preview.php?barcode=$barcode&quantity=$quantity&item_desc=$item_desc&price=$price");
}
else{
echo "Barcode not found";
}
}
?>
</form>
<div class="cell colspan1">
</div>
</div>
</div>
</div>
</div><!-- panel -->
</div><!-- row cells12 -->
</div><!-- grid -->
</div><!-- content -->
</div><!-- panel -->
</div>
</div>
</div>
<script>
//$("#ip").focus();
/*var d = false;
$("#ip").on('change', function(){
//$("#ip").keyup(function(){
if(d == false){
$(".block").animate({"top": "-=50px"});
d = true;
}
var v = $(this).val();
$(".res").html("Search results for " + v );
$("#next").focus();
});*/
$("#ip").focus();
function init() {
key_count_global = 0; // Global variable
document.getElementById("ip").onkeypress = function() {
key_count_global++;
setTimeout("lookup("+key_count_global+")", 1000);//Function will be called 1 second after user types anything. Feel free to change this value.
}
}
window.onload = init; //or $(document).ready(init); - for jQuery
function lookup(key_count) {
if(key_count == key_count_global) { // The control will reach this point 1 second after user stops typing.
// Do the ajax lookup here.
$("#next").focus();
}
}
</script>
</body>
</html>
It is supposed to do that. But you can stop it this way:
<form method="post" name="form" id="form" onsubmit="return false;">
Add this to your FORM like you see above.
onsubmit="return false;"
That will stop it from refreshing the page.
I'm trying to make a slogan game where the user inputs the company's name that uses the slogan. The games in early development and if missing a but my current code does not work.
<html land="en">
<head>
<title>Whats that ???</title>
<script>
function checkAnswer()
{
var answer = document.getElementById("answerInput");
var theAnswer = answer.value;
document.getElementById("correct/incorrent").innerHTML += theanswer;
}
</script>
</head>
<body>
<div id="game-container">
<div id="slogan">
<p>Das Auto</p>
</div>
<div id="answer">
<p>Answer<p>
<input id="answerInput" type="text">
<input type="button" value="Check" onClick="checkAnswer">
</div>
<div id="correct/incorrent">
Hello
</div>
</div>
Tnx Adam
Fixed syntax errors:
theanswer != theAnswer, missing camel case letter "A"
need to invoke function by () rather than just stating its reference checkAnswer
<html land="en">
<head>
<title>Whats that ???</title>
<script>
function checkAnswer() {
var answer = document.getElementById("answerInput");
var theAnswer = answer.value;
document.getElementById("correct/incorrent").innerHTML += theAnswer;
}
</script>
</head>
<body>
<div id="game-container">
<div id="slogan">
<p>Das Auto</p>
</div>
<div id="answer">
<p>Answer<p>
<input id="answerInput" type="text">
<input type="button" value="Check" onclick="checkAnswer()">
</div>
<div id="correct/incorrent">
Hello
</div>
</div>
</body>
</html>
The onclick event executes any javascript between the quotes. You were just referencing a function, not calling it.
onclick="checkAnswer()"
<html land="en">
<head>
<title>Whats that ???</title>
</head>
<body>
<div id="game-container">
<div id="slogan">
<p>Das Auto</p>
</div>
<div id="answer">
<p>Answer<p>
<input id="answerInput" type="text">
<input type="button" value="Check">
</div>
<div id="correct/incorrent">
Hello
</div>
</div>
<script>
var btn = document.getElementById("answerInput");
var ans = document.getElementById("correct/incorrent");
btn.onClick = function (){
var answer = document.getElementById("answerInput");
var theAnswer = answer.value;
ans.innerHTML += theAnswer;
}
</script>
</body>
</html>
i have 3 buttons in the top with color given.as i press the button it changes the color indicating that following button has been pressed and my submit form opens.as soon as i submit the form message displays "successful".but my problem is as i press the submit button the top button color changes to the previous one but i want it to stay the same.how can i do this please help!!!
here is my code:
this is my javascript and css fr changing the button colors:
<script type="text/javascript">
$(document).ready(function (){
$('.beforeClick').click(function (){
$('.beforeClick').css('background-color',"#C1B0B3");
$(this).css('background-color',"#9C7260");
});
});
<style>
.beforeClick {
margin-left: 0.4%;
background-color:#C1B0B3;
font-weight: bold;
width: 14em;
height: 2em;
}
</style>
this is my buttons and its forms:
<html>
<body>
<button type="button" id="incbutton" class="beforeClick" style="background-color:#9C7260">Report1</button>
<button type="button" id="dthbutton" class="beforeClick">Report2</button>
<button type="button" id="negbutton" class="beforeClick"> Report3</button>
<script type="text/javascript">
$("#incbutton").click(function() {
$("#form_sub_container1").show();
$("#form_sub_container2").hide();
$("#form_sub_container3").hide();
})
$("#dthbutton").click(function() {
$("#form_sub_container2").show();
$("#form_sub_container1").hide();
$("#form_sub_container3").hide();
})
$("#negbutton").click(function() {
$("#form_sub_container3").show();
$("#form_sub_container1").hide();
$("#form_sub_container2").hide();
})
</script>
<div id="form_sub_container1" style="display:<?= ( isset($_POST['rep']) || (!isset($_POST['report21']) && !isset($_POST['report31'])))? 'block':'none'?>">
//report1 functionalities
<input type="submit" name="rep" value="Save" id="btnsize1" /></td>
</div>
<div id="form_sub_container2" style="display: <?= isset($_POST['report21'])? 'block':'none'?>">
//report2 functionalities
<input type="submit" name="report21" value="Save" id="btnsize2" /></td>
</div>
<div id="form_sub_container3" style="display: <?= isset($_POST['report31'])? 'block':'none'?>">
//report3 functionalities
<input type="submit" name="report31" value="Save" id="btnsize3" /></td>
</div>
</body>
<html>
this my report3:
<div id="form_sub_container3" style="display: <?= isset($_POST['report31'])? 'block':'none'?>">
<?php
if (isset($_POST['report31']))
{
$daydropdown111=$_POST['daydropdown111'];
$monthdropdown111=$_POST['monthdropdown111'];
$yeardropdown111=$_POST['yeardropdown111'];
$dreport_place=$_POST['dreport_place'];
$dreport_address=$_POST['dreport_address'];
$dreport_additional=$_POST['dreport_additional'];
}
else
{
$daydropdown111="";
$monthdropdown111="";
$yeardropdown111="";
$dreport_place ="";
$dreport_address="";
$dreport_additional="";
}
if (isset($_POST['report31']))
{
$death = $DataAccessController->death_reports($_POST['daydropdown111'],$_POST['monthdropdown111'],$_POST['yeardropdown111'],$_POST['dreport_place'], $_POST['dreport_address'], $_POST['dreport_additional']);
if ($death) {
echo"<p><font color=red size='5pt' > Your Report has been Registered</font></p>";
}
}
?>
<div id="color" >
<table>
<h1 align="center"><p> Report</h1>
<form action="" method="POST" id="form_id">
<tr><td>Date </td><td>
<select name="daydropdown111" id="daydropdown111"></select>
<select name="monthdropdown111" id="monthdropdown111"></select>
<select name="yeardropdown111" id="yeardropdown111"></select>
<script type="text/javascript">
//populatedropdown(id_of_day_select, id_of_month_select, id_of_year_select)
populatedropdown("daydropdown111", "monthdropdown111", "yeardropdown111")
</script>
</td></tr>
<tr><td></br> Place </td><td></br><select name="dreport_place"id="wgtmsr">
<option value="hospital" >Hospital</option><option value="residence">Residence</option><option value="others">Others</option></select></td></tr>
<tr><td>Address </td><td></br><textarea name="dreport_address" rows="5" cols="32" id="loc" value=""> </textarea></td></tr>
<tr><td>Additional Cases if any</td><td></br> <textarea name="dreport_additional" rows="5" cols="32" id="loc" value=""> </textarea></td></tr></label></td></tr>
<tr><td></td><td><input type="submit" name="report31" value="Save" id="btnsiz" /></td></tr>
</form>
</table></br>
</div>
</div>
Nah..is this what you want?
$(document).ready(function(){
$('.beforeClick').click(function(){
$(this).css('background-color',"#C1B0B3");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="incbutton" class="beforeClick" style="background-color:#9C7260" >Report1</button>
<button type="button" id="dthbutton" class="beforeClick">Report2</button>
<button type="button" id="negbutton" class="beforeClick">Report3</button>
Create a class and call it whatever you want eg: .clickedButton or .afterClick and then when a form is submitted you do just like you did with #form_sub_container divs :
<div id="form_sub_container3" style="display: <?= isset($_POST['report31'])? 'block':'none'?>">
but this time you have to do it with your buttons, something like:
<button type="button" id="incbutton" class="<?= isset($_POST['rep'])? 'afterClick':'beforeClick'?>" >Report1</button>
<button type="button" id="dthbutton" class="<?= isset($_POST['report21'])? 'afterClick':'beforeClick'?>" >Report2</button>
<button type="button" id="negbutton" class="<?= isset($_POST['report31'])? 'afterClick':'beforeClick'?>" >Report3</button>
css
.afterClick{
background-color:#9C7260;
}
I the index.html I want to toggle with the #btn between two different views:
NON-REALTIME: #getDateTime and #showData shall be visible
REALTIME: #stateBela shall be visible
Question: It works, but what isn't working as follows:
ALL (!) divs are visible after starting the index.html, but only the
#stateBela should be visible, because the default setting is "REALTIME". How can I do that?
The function toggleState is written in the upper "head-part"...
<head>
<!-- define the toggle function -->
<script type="text/javascript">
function toggleState(item){
if(item.className == "on") {
item.className="off";
item.value="NON-REALTIME";
document.getElementById("stateBela").style.display = 'none';
document.getElementById("getDateTime").style.display = 'inline';
document.getElementById("showData").style.display = 'inline';
} else {
item.className="on";
item.value="REALTIME";
document.getElementById("stateBela").style.display = 'inline';
document.getElementById("getDateTime").style.display = 'none';
document.getElementById("showData").style.display = 'none';
}
}
</script>
</head>
...and the divs are written/listed in the lower "body-part" of the html code...
<body>
<!-- call function 'toggleState' whenever clicked -->
<input type="button" id="btn" value="REALTIME" class="on" onclick="toggleState(this)" />
<div id="stateBela">
<label>BELA is: offline or online</label>
</div>
<div id="getDateTime">
<label>After:</label><input id="afterDate" name="afterDate" type="text" value="Date">
<label>To:</label><input id="toDate" name="afterDate" type="text" value="Date" />
<label>After:</label><input id="afterTime" name="afterTime" type="text" value="Time" />
<label>To:</label><input id="toTime" name="toTime" type="text" value="Time" />
</div>
<div id="showData">
<button>Show data</button>
</div>
</body>
CSS:
#getDateTime, #showData {
display: none;
}
You can just add a style attribute to hide them on page load.
<div id="getDateTime" style="display:none">
<label>After:</label><input id="afterDate" name="afterDate" type="text" value="Date">
<label>To:</label><input id="toDate" name="afterDate" type="text" value="Date" />
<label>After:</label><input id="afterTime" name="afterTime" type="text" value="Time" />
<label>To:</label><input id="toTime" name="toTime" type="text" value="Time" />
</div>
<div id="showData" style="display:none">
<button>Show data</button>
</div>
You should add these lines in your javascript :
function startState {
toggleState(document.getElementById("btn"));
}
window.onload = startState;