I'm trying to build some basic HTML form validation in Javascript. My form is held in a table and I've got an extra column to the right of each input with an ID of "ErrorX", which is initially populated with some text to show it's a required field.
<FORM NAME="ContactForm" METHOD=POST ACTION='Order3.php' onsubmit="return validateForm()">
<TABLE>
<TR>
<TD ALIGN=LEFT>Your name:</TD>
<TD ALIGN=RIGHT><INPUT TYPE=TEXT ID="Field1" NAME="Field1"></TD>
<TD ALIGN=LEFT ID="Error1">Required</TD>
</TR>
</TABLE>
<input type=submit value='Confirm ->'></FORM>
When the submit button is pressed, I've got the code validates the fields and attempts to change the right-most column text. The line of code that does this is:
document.getElementById("Error1").innerHTML = "ERROR";
The code executes and detects the error correctly, and the existing wording is removed, but the new text does not appear. If I query the value of document.getElementById("Error1").innerHTML, I get the correct text, but it's not appearing on the screen.
I'm using Safari v5.1.2 and it works with basic examples I've copied from the web, so I think it's my code rather than the browser.
innerHTML works for sure in safari. See this demo http://jsfiddle.net/zxMKM/
The obvious reason is that your html markup is invalid and the browser does its own error recovery and producing its own DOM in the process.
So please validate your html http://validator.w3.org/
Also please note that td.innerHTML is read only for IE8.
So, its more cross platform friendly to use td.innerText
I had similar issue on iPAD safari, it is not updating div value properly.
I have gone through lot of posts and tried out lot of options, but what works for me is text().
<td align="left"><div id="Error1">Required</div></td>
Related
Hello i have a problem... Suppose that i have a table whit two textBox and one button.. when i click the button i must read the value of a textBox and create a directory in a specific path and the directory must be named like the value that i read on the TextBox
I've tryed this code but it dosn't work :(
file = directory.php
<?php
$idCantiere = $_POST["idCantiere"];
$codiceCommessa = $_POST["codiceCommessa"];
echo("Registrazione avvenuta");
chdir("../inserimento");
opendir(".");
mkdir("../inserimento/prova/".$idCantiere);
?>
file prova.html
<table method="POST" action="directory.php">
<tr>
<td bgcolor="#B2E5FB">Cantiere</td>
<td colspan="11"> <input type="text" id="idCantiere"></td>
</tr>
<tr>
<td bgcolor="#B2E5FB">Codice Commessa</td>
<td colspan="11"> <input type="text" id="codiceCommessa"></td>
</tr>
<tr><td><button name="insAffidatario" type="submit" onclick="directory.php">Inserisci Affidatario</button></td></tr>
</table>
The problem with your code and it is a specific one; is that you used <table></table> for what should be a form, it should be <form></form>.
Then you used ID's instead of name attributes. You need to add name="idCantiere" and name="codiceCommessa" to their respective inputs.
You may also want to remove onclick="directory.php" here. The "action" already takes care of that.
Side note: Place your table inside the form and not outside. <form> cannot be made child of <table>.
Also make sure that the paths (and folders) correspond and that they are writeable with proper group/user permissions.
Error reporting will be of help also.
http://php.net/manual/en/function.error-reporting.php
and set to catch and display.
I am making a PHP webpage for database search using JavaScript (search suggest). I used div to show the search suggest items.When the user clicks on this a details page for that item opens. It seems to work fine in Firefox bt it doesnot work on IE.
HTML part:
<form method="post" name="searchform" id="searchform">
<table class="nostyle" width="80%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="30%">Customer
<input type="text" name="search_customer" id="customer_name" class="input-text" onKeyUp="searchsuggest();" autocomplete="off"/>
<br /><div id="search_suggest" onclick="document.getElementById('searchform').submit();"> </div></td>
</tr>
</table>
</form>
Please help me, I'm a newbie!
You don't need an ONCLICK event. type=submit already does this for you, but the element needs to be an input, not a div.
Take a look at http://jsfiddle.net/LM4Sg/1/ you can click on the click here in ie and it works. If you look at http://jsfiddle.net/LM4Sg/ you can click around the screen and never hit the EMPTY div.
You need to put something in it to click.
<div id="search_suggest" type="submit" onclick="document.getElementById('searchform').submit();">Click Here</div>
If you just want to leave the space between the div tags use an & nbsp; instead, this also makes it so you can click in ie. See the fiddle - http://jsfiddle.net/LM4Sg/4/
<div id="search_suggest" onclick="alert('searchform');"> </div>
(changed to use an alert to simplify things.)
It works now... I changed my javascript
var search_suggest = document.getElementById(customer_name);
search_suggest.onclick = function(){ document.getElementById('searchform').submit();
Tried doing it with jQuery bt still did not work and don't know why IE did not work with my previous code.
Ajax-returned HTML includes a table and a submit button (type=button)
The table includes jQuery routine to clone table row (each row allows choosing/uploading one file, and has two values: <input type="text"> for doc title, and <input type="file">.
<table id="MyTable">
<tr name="tr3" id="tr3">
<td>
<input type="text" name="dt[]" id="dt1">
</td>
<td>
<input type="file" name="fff[]" id="ff1">
</td>
</tr>
</table>
<input type="button" name="sub1" id="sub1" value="Submit" onclick="checkform();">
Upon form submit, I must check that each doc title has been filled-in, so the submit button calls a javascript routine:
function checkform()
{
if(document.updateprojectdocs.dt[0].value=='')
{
alert("Fields marked with an asterisk are required.");
document.updateprojectdocs.dt[0].focus();
return;
}
document.getElementById("TheForm").submit();
}
Of course, this does not work (script dies before form submit -- but submits if I remove the preceeding if structure). Can anyone tell me why and how to fix?
Also, there will be an indeterminate number of dt[] fields to check. How could I structure a loop to do this? I suspect jQuery's .find().each() could be used, but not sure what that would look like?
UPDATES:
Thanks to DaHaKa's response below, I am closer to a solution. I mod'd DaHaKa's suggested code into jQuery.
I was having trouble communicating with DaHaKa - for some reason his responses were not appearing until long, long, long after he posted them (the problem was probably on my end). While I was waiting (hours), I posted part of the problem in another question and ended up resolving it there. That other question grew into the FULL CORRECT ANSWER, and I direct future viewers there. Note that user thecodeparadox created a working JSFiddle of the full solution.
I have awarded this question to DaHaKa as he was more than willing and able to assist, but comm problems intervened. Thanks again, D.
In this case jQuery each function isn't neccessary, you can do it simple like this =>
try
<table id="MyTable">
<tr name="tr3" id="tr3">
<td>
<input type="text" name="dt" id="dt1">
</td>
<td>
<input type="file" name="fff" id="ff1">
</td>
</tr>
</table>
<input type="button" name="sub1" id="sub1" value="Submit">
JavaScript
document.getElementById("sub1").onclick = function(){
if (document.getElementById("dt1").value!=""){
document.getElementById("TheForm").submit();
} else {
alert("Empty Field(s) !");
}
};
you should use ids in JavaScript from html tags , NOT NAME tags
And whats about you file input , you could understand it from your server side scripting language like php , with super global variables $_FILES['file']['error'] types
I've been through a lot of questions on similar issues, but can't seem to get this working. What I'm trying to do is when a button is clicked, replace the value of a form field with the word 'now' and then submit the form. Initially, the HTML form looks like this:
<tr id="row43" bgcolor="#FF0000">
<form id="form43" name="loggingUpdate" action="index.php" method="POST">
<td>PersonsName</td><td>SGS 1-26</td>
<td><input type="text" name="takeoff" id="takeoff43"/><a href='#' onclick='startTakeoff(43);return false;'><img alt='Start Now' src='brush_24.png' border='0'></a></td>
<td><input type="text" name="landing" /></td><td>0 Mins</td>
<td><input type="text" name="towHeight" /></td>
<td><input type="hidden" name="flightIndex" value="43"/><input type="submit" value="Update..." /> <a href=deleteEntry.php?flightIndex=43><img src="close_24.png" /></a></td>
</form></tr>
The Javascript that's triggered by the onclick is as shown below:
function startTakeoff(flightIndex) {
var flightForm = document.getElementById("form"+flightIndex);
var flightRow = document.getElementById("row"+flightIndex);
flightRow.cells[2].innerHTML = "<input type=\"text\" name=\"takeoff\" value=\"now\"><img alt=\"Start Now\" src=\"brush_24.png\" border=\"0\">";
flightForm.submit();
}
So when the button is clicked, it should replace the cell's value with 'now' and submit the form. The trouble is while it does submit, the changed value doesn't actually get submitted. If I manually add something to one of the other fields (the towHeight for example) and click the button, it does get submitted successfully. In other words, it is only the 'takeoff' field that doesn't get submitted when the button is clicked. I've never worked with Javascript before, so this seems very odd to me.
In the way of background, there is a PHP script that's generating the HTML and taking the submitted input, hence some of the strange IDs. The entire page can be seen here in case I've left anything out http://ad7zj.net/logging/index.php I'd appreciate the help!
You are looking for the .onsubmit() event.
That said, you might be best off just getting the time from the server. It will save you from a whole world of time zones, day light savings time issues, and the number of computers out there with inaccurate time settings.
EDIT:
Ok, thanks to your comment I think I see what is going on.
You are trying to update the form using .innerHTML. .innerHTML is a rather strange beast and full of all sorts of heartache -- yield not to its temptations. It looks like the browser is waiting till the Javascript event is over before actually applying the innerHTML update. That would be my guess, anyways. Outside of the simplest of updates, I avoid the thing.
Nuke this:
flightRow.cells[2].innerHTML = "<input type=\"text\" name=\"takeoff\" value=\"now\"><img alt=\"Start Now\" src=\"brush_24.png\" border=\"0\">";
Try this instead:
// Assuming only one form with one name 'takeoff'
var el = document.getElementsByName("takeoff")[0];
el.value = 'now';
// The rest of the updates shouldn't matter -- the form is being submitted, nothing should be seen.
I am having an issue with accessing my form by it's name. When I use document.form[0].mylink.value it recognizes the value and outputs to the innerHTML that I specify. However, when I use document.myform.mylink.value it doesn't seem to recognize the form. I have tried this in chrome 6.0 and also firefox 3.6.3 and get the same result in both. I really need to be able to access my form values by using the form name (instead of document.form[0]), any ideas why document.myform.mylink.value doesn't work?
<form name="myform">
<table>
<tr><td valign="middle" align="center">
<div id="textResponse"></div>
</td></tr>
<tr><td height="30" valign="middle" align="center">
<input name="mylink" value="Enter a URL" size="31" />
</td></tr>
<tr><td valign="top" align="center">
Click
</td></tr>
</table>
</form>
<script type="text/javascript">
function submitForm2(){
//This one does NOT work:
my_link = document.myform.mylink.value;
//This one also does NOT work:
//my_link = document.forms['myform'].mylink.value;
//This one works:
//my_link = document.forms[0].mylink.value;
document.getElementById("textResponse").innerHTML="<p>"+my_link+"</p>";
}
</script>
Technically what you have should work ok... the full syntax below should also work:
var my_link = document.forms['myform'].elements['mylink'].value;
If by chance your variable in your "real" code is "mylink" not "my_link" you will get failures in IE as it will auto-reference the form element, not the value you are trying to extract.
That all said, your code as posted... works just fine in Firefox/IE (demo here: http://jsfiddle.net/Ymg8W/ )