Making editable header text, won't work! - javascript

I have a header message that is brought in from another file (message.txt), and I'm making a text box that you can edit. (I will add the part where it makes it permanent later on.)
It is changing to nothing.
(E: "This is the header!" to "")
This is the code..
<script type="text/javascript">
function change(text)
{
//document.forms["f1"].elements["ta"].value="Hi!";
//document.f1.ta.value="Hi!";
document.getElementById("msg").innerHTML='<h2 class="hmsg">'+text+'</h2>';
}
function getText()
{
return document.getElementById("ta").value;
}
function all()
{
change(getText())
}
</script>
<form name="f1">
<input type="text" value="Enter your message here!" id="ta"/>
<input type="button" value=" " onclick='all()'/>
</form>

Perhaps you can clarify what is not working as you expect. I expanded your code into a working example:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Test</title>
</head>
<body>
<script type="text/javascript">
function change(text)
{
document.getElementById("msg").innerHTML='<h2 class="hmsg">'+text+'</h2>';
}
function getText()
{
return document.getElementById("ta").value;
}
function all()
{
change(getText())
}
</script>
<form action="#">
<div id="msg">
</div>
<div>
<input type="text" value="Enter your message here!" id="ta"/>
<input type="button" value=" " onclick='all()'/>
</div>
</form>
</body>
</html>
Changing the content of the <div> with id msg works here.

Related

Auto deduct when barcode is scanned - Javascript, PHP

I want to create a simple form, just like at the supermarket system, when checkout at the counter, they just scan the barcode on the item, and the quantity of the item is added automatically.
The problem is, i dont know which event(onkeyup,onkeypress, etc..) to use on the textfield.
This is my simple code.
<!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>
<script>
$(document).ready(function() {
$("#acc_no").on('input', function() {
var a = document.getElementById("acc_no").value;
var b = document.getElementById("qty_dead").value;
if(b == '')
{
qty = 0;
}
else
{
var qty = parseInt(b);
qty +=1
}
document.getElementById("qty_dead").value = qty;
document.form1.acc_no.select();
})
});
</script>
</head>
<body onLoad="document.form1.acc_no.select()">
<form action="deduct_stage_two_submit.php" method="post" name="form1" id="form1">
Accession No:<br />
<input name="acc_no" type="text" id="acc_no" onkeypress="calc()" autocomplete="off"/><br />
Dead Quantity:<br />
<input name="qty_dead" type="text" id="qty_dead" onkeypress="calc()" />
<br />
Date:<br />
<input name="date_dead" type="text" id="date_dead"/><br />
Batch Date Out Stage 1:<br />
<input name="date_out" type="text" id="date_out"/><br />
<input name="submit" type="submit" value="save">
</form>
</body>
</html>

Submit clicks does not response when use AJAX

I am writing an HTML code, in which i am trying to use AJAX but whenever i do tap on Submit button nothing seems work for me.
But without using AJAX in my code, my form works just fine, so what could be the reason, see below HTML code (with AJAX) which is not working:
<!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>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function () {
$('form').on('submit', function (e) {
e.preventDefault();
$.ajax({
type: 'get',
url: 'http://www.domain.com/offers/api.php',
data: $('form').serialize(),
success: function () {
alert('form was submitted');
}
});
});
});
</script>
<title>Untitled Document</title>
</head>
<body>
<form>
<input type="text" name="fname" />
<input type="text" name="lname" />
<input type="hidden" name="uname" value="amit" />
<input type="hidden" name="ukey" value="suri" />
<input name="submit" type="submit" value="Submit">
</form>
</body>
</html>
And this is my old HTML Script, which was working perfectly:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<form method="get" action="http://www.domain.com/offers/api.php" >
<input type="text" name="fname" />
<input type="text" name="lname" />
<input type="hidden" name="uname" value="amit" />
<input type="hidden" name="ukey" value="suri" />
<input type="submit" value="Submit" />
</form>
</body>
</html>
Looks like this is the problem:
Cross-Origin Request Blocked: The Same Origin Policy disallows
reading the remote resource at [url].
This can be fixed by moving the resource to the same domain or enabling CORS.
Same Origin Policy explained: http://www.jquery-tutorial.net/ajax/same-origin-policy/
Possible workaround: http://blog.edwards-research.com/2012/10/cross-domain-ajax-a-simple-workaround/

Form onreset Event after the form reset

Here's a sample form:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form onreset</title>
</head>
<body>
<form onreset="myFunction();">
<input type="text" name="fname">
<input type="text" name="lname">
<button type="reset" value="Reset">Reset</button>
</form>
<script>
function myFunction() {
alert("The form was reset!");
}
</script>
</body>
</html>
When I click the reset button, the form onreset event fires first, i.e. the alert message appears before resetting the form fields. How can it happen after the form fields rest?
I also tried the following to no avail:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form onreset</title>
</head>
<body>
<form>
<input type="text" name="fname">
<input type="text" name="lname">
<button type="reset" value="Reset" onclick="myFunction();">Reset</button>
</form>
<script>
function myFunction() {
alert("The form was reset!");
}
</script>
</body>
</html>
Try it
function myFunction() {
setTimeout(function () {
alert("The form was reset!");}, 100);
}

Javascript does not run

When the user presses the submit button and there is no text in the input box, I want an error window to appear. I am using JSF to create the web page and JS for the script. For some reason the script does not run.
Here is the whole page code :
<?xml version='1.0' encoding='UTF-8' ?>
<!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:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
>
<link rel="stylesheet" href="testcss.css" />
<h:head>
<title>Print to Uni</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1252" />
<link rel="stylesheet" type="text/css" href="style.css" title="style" />
</h:head>
<body>
<div id="main">
<div id="header">
<div id="logo">
<div id="logo_text">
<h1>Remote<span class="logo_colour">Printing</span></h1>
<h2>This is a web app that allows users to print to University</h2>
</div>
</div>
</div>
</div>
</body>
<div id="site_content">
<div id="content">
<h:body>
<h:form onsubmit="return required();">
Please enter your username:
<h:inputText id="Username" value="#{user.id}"
size="20" required="true" label="Username">
</h:inputText><br></br><br></br>
To print a piece of text, please press the submit button below to upload the text:<br/><br/>
<h:commandButton type="Submit" value="Submit" onclick="return username_validation()" action="upload/uploadText" styleClass="Submit"/>
</h:form>
</h:body>
</div>
</div>
<script type="text/javascript">
function username_validation(){ //cannot get this to work
if (document.getElementById("Username").value.length == 1)
{
alert("Please enter a username");
return false;
}
return true;
}
function show_alert() {
var msg = "Thank you";
alert(msg);
}
</script>
</html>
This is the code I'm trying to run when the user presses submit:
function username_validation(){ //cannot get this to work
if (document.getElementById("Username").value.length == 1)
{
alert("Please enter a username");
return false;
}
return true;
and heres the hform :
Please enter your username:
<h:inputText id="Username" value="#{user.id}"
size="20" required="true" label="Username">
</h:inputText><br></br><br></br>
To print a piece of text, please press the submit button below to upload the text:<br/><br/>
<h:commandButton type="Submit" value="Submit" onclick="return username_validation()" action="upload/uploadText" styleClass="Submit"/>
</h:form>
The problem is this line:
if (document.getElementById("Username").value.length == 1)
Will only fail if the username is exactly one character long.
If you want to validate that the username is present do the following instead:
if (document.getElementById("Username").value.length < 1)

Show me a Simple javascript onSubmit handler

Hello again everyone
i am working on 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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Form</title>
<script type="text/javascript">
</script>
</head>
<body>
<h2>**Form**</h2>
<form name=form method="post" action="javascript" subject=RSVP" enctype="text/plain" >
<input type=text name="first" size="20"> First Name<BR>
<input type=text name="last" size="20"> Last Name<BR>
<input type="text" name="email" size="20"> E-Mail<BR><BR>
<input type="submit" value="Submit">
<input type="reset" value="Clear Form"><br>
</form>
</body>
</html>
I am getting really confused here.. I need to have a onsubmit form handler and a create validation script. Ok now if I am right the validation script is the the function that needs to be placed right? sorry i know some of you guys might think this is easy but I am still learning. Now I have examples in my book of it but they only due one at a time. Is there a way you can do a onsubmit of all or does it have to be one at a time? thanks
ok I have this one i am working on..
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Form</title>
<script type="text/javascript">
<!--
function validate_form()
{
valid = true;
if ( document.contact_form.contact_first.value == "" )
{
alert ( "Please fill in the 'Your Name' box." );
valid = false;
}
return valid;
}
//-->
</script>
</head>
<body>
<h2>**Form**</h2>
<form name="contact_form" method="post" action="javascript" onSubmit="return validate_form();">
<input type=text name="contact_first" size="20"> First Name<BR>
<input type=text name="contact_last" size="20"> Last Name<BR>
<input type="text" name="contact_email" size="20"> E-Mail<BR><BR>
<input type="submit" value="Submit">
<input type="reset" value="Clear Form"><br>
</form>
</body>
</html>
now Can i just copy the function for the other two or how do i do the one for the email?
I've added an example here of how to do it:
http://jsfiddle.net/tomgrohl/JMkAP/
I added an onsubmit handler to the form:
<form method="post" action="javascript" enctype="text/plain" onsubmit="return valForm(this);">
And added this at the top of the page, a simple validation function:
<script type="text/javascript">
function valForm( form ){
var firstVal, lastVal, emailVal, error = '';
firstVal= form.first.value;
lastVal= form.last.value;
emailVal= form.email.value;
//OR
//firstVal= document.getElementById('first').value;
//lastVal= document.getElementById('last').value;
//emailVal= document.getElementById('email').value;
if( firstVal.length == 0){
error += 'First name is required\n';
}
if( lastVal.length == 0){
error += 'Last name is required\n';
}
if( emailVal.length == 0){
error += 'Email is required\n';
}
if( error ){
alert( error );
return false;
}
return true;
}
</script>
OnSubmit is invoked once for the form.
You can validate all the form fields in one onSubmit function, during one call to that function.
function myOnSubmitHandler(theForm) {
if (theForm.data1.value == "") {
alert("This field is empty.");
return false; // suppress form submission
} else {
return true; // A-OK, form will be submitted
}
}
in HTML:
<form method="POST" ACTION="SomethingOnServer.php"
onSubmit="return myOnSubmitHandler(this);">
I need to have a onsubmit form handler
You said it; <form onsubmit="return myValidate(this);" .... >
myValidate is your validation function that returns true|false indicating whether or not you want the form to be submitted to its handler script (which your also missing).
might I suggest you use jQuery and jQuery validate to validate your form no need to re-invent the wheel
be sure to check out validator's demo

Categories