|
JavaScript - Small Qs About Innerhtml
Hello all
i've made Contact me form with JS validation , my qs is : i do not want the alert pop up small window a post text the alert in DIV i have read it's innerHTML here the JavaScript Code: function isEmpty( inputStr ) { if ( null == inputStr || "" == inputStr ) { return true; } return false; }
// Vadate name
function checkname (strng){
var error="";
if (strng == ""){
error = "Please Enter your name."
}
return error;
}
//Vadate last name
function checkprename (strng){
var error="";
if (strng == ""){
error = " Please Enter your name"
}
return error;
}
function checkPhone (strng) {
var error = "";
if (strng == "") {
error = "Vous n'avez pas inscrit un numero de telephone.\n";
}
var stripped = strng.replace(/[\(\)\.\-\ ]/g, ''); //strip out acceptable non-numeric characters
if (isNaN(parseInt(stripped))) {
error = "vous entrez le numero de telephone errone.";
}
if (!(stripped.length == 10)) {
error = "vous entrez le numero de telephone errone.\n";
}
return error;
}
//Validate Email
function checkEmail (strng) {
var error="";
if (strng == "") {
error = "Vous n'avez pas entre une adresse email.\n";
}
var emailFilter=/^.+@.+\..{2,3}$/;
if (!(emailFilter.test(strng))) {
error = "S'il vous plait entrer une adresse email valide.\n";
}
else {
//test email for illegal characters
var illegalChars= /[\(\)\<\>\,\;\:\\\"\[\]]/
if (strng.match(illegalChars)) {
error = "L'adresse email contient des caracteres illegaux.\n";
}
}
return error;
}
Now here in html Code: function checkWholeForm(theForm) {
var why = "";
why += checkname(theForm.name.value);
why += checkprename(theForm.prename.value);
why += checkEmail(theForm.Email.value);
why += checkPhone(theForm.Phone.value);
if (why != "") {
var leDiv = document.getElementById('errormsg');
var nouveauDiv = document.createElement('div');
var divIdName = 'errormsg';
nouveauDiv.setAttribute('id',divIdName);
nouveauDiv.innerHTML = "u had Enter wrong information bla bla";
leDiv.appendChild(nouveauDiv);
var nouveauDiv2 = document.createElement('div');
var divIdName = 'errormsg';
nouveauDiv2.setAttribute('id',divIdName);
nouveauDiv2.innerHTML = ' ';
leDiv.appendChild(nouveauDiv2);
return false;
}
return true;
}
MY qs is how to let the innerHTML past past each error from the validate.js file which i call it erorr i mean near to input filed of phone it will be div id erorrmsg and in this div will past the error from the validate.js which it code from my start of this post thanks for advance Similar TutorialsCan somebody explain me why this isn't working? Code: <SCRIPT TYPE="TEXT/JAVASCRIPT">
// Check lotto
var goed = frmTrekking.EersteGetal.value
var fout = frmGetallen.Opgegeven_1.value
function checkLotto() {
if (frmTrekking.EersteGetal.value == frmGetallen.Opgegeven_1.value) {
document.getElementById('boldStuff').style.color='#00ff00';
document.getElementById('boldStuff').innerHTML = goed;
}
else {
document.getElementById('boldStuff').style.color='#ff0000';
document.getElementById('boldStuff').innerHTML = fout;
}
}
</script>
When I don't use the var, but give for example this: it works ok. Code: document.getElementById('boldStuff').innerHTML = '6';
Hey, for some reason, this isn't working because of the src="images/edit.png" attribute. Here is my code: Code: <a href="#" onclick="change('HEYYY')"><img src="images/edit.png" alt="Edit" id="edit1" /></a>
Javascript (External) Code: function change(message)
{
document.getElementById('edit1').innerHTML = '<input type="text" value="'+message+'" />';
}
It does nothing. But if I take the src attribute out, it works fine. Any help? Thanks. Hello, I am a newbie for Javascript. Currently I am doing a website which consists of a lot of contents. Therefore, I hope to get a solution which all my contents are arranged into a table (rows and columns). The condition is that there is only a html page to hold all the contents where there is a "view more" or 'next" button at the bottom and each times user can click to go to the different contents. I have tried to use the innerHTML and I was able to do for 2 pages only...Now I encountered a problem which I need to update more contents to more pages . Can you kindly give some guidelines according to this? Below shows the example code of my website: 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="JavaScript" type="text/javascript">
function OpenWindow()
{
var content=document.getElementById('achieve').rows[0].cells;
content[1].innerHTML="<br/><div align='justify' class='style1 style8'><span class='style11'>Another content</span></div>" + "<div align='left' class='style23 style13'>more details</div>";
var content=document.getElementById('achieve').rows[1].cells;
content[1].innerHTML="";
var content=document.getElementById('achieve').rows[2].cells;
content[1].innerHTML="<strong><em><font class=style13 style23 color=#FF6600><a href='test.html'>back</a></font></em></strong>";
}
</script>
</head>
<body>
<!--id starts-->
<table id="achieve" width="780" height="387" border="0">
<tr>
<td width="10" height="39"> </td>
<td width="340"><div align="center" class="style6">My Title</div></td>
<td width="416"> </td>
</tr>
<tr>
<td> </td>
<td><div align="justify" class="style1 style8"><span class="style11">More Contents here</span></div></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><div align="right"><strong><em><font class="style23 style13" color="#FF6600"><a href="#" onclick="OpenWindow()">+ view more </a></font></em></strong></div></td>
<td> </td>
</tr>
</table>
</body>
</html>
How would you make a if for a input box =this do this Some if the input boxe value = this then get innerHTMl Does anyone have any suggestions as to how I can get IE working properly with this? It's a, (exempting IE), straight forward line numbering and plain text code view function. When using the line numbering portion, it works fine in Moz based browsers etc, as it does in IE for the initial numbering. On trying to remove the numbers though, (on the second call), IE just seems to cascade the list entries rather than removing them. Code: function process_code(id, number, print)
{
if (document.getElementById(id))
{
var current = document.getElementById(id);
var code = current.innerHTML.split('\n');
var count = 0;
var xcount = 0;
if (number)
{
if (current.innerHTML.indexOf('<li class="code-entry">') != -1)
{
code = code.join('\n');
code = code.replace(/\<\/(li\>\<\/ol|li)\>/ig, '\n');
code = code.replace(/\<ol\>\<li[^\>]+\>|\<li[^\>]+\>/ig, '');
current.innerHTML = code.replace(/^\n+|\n+$/g, '');
}
else
{
current.innerHTML = '<ol><li class="code-entry">'+code.join('</li><li class="code-entry">')+'<
/li></ol>';
}
}
else
{
var doc = window.open('', 'code_print');
var newdoc = doc.document;
newdoc.open('text/plain');
newdoc.write(decode_code(code.join('\n')));
newdoc.close();
if (print)
{
if (navigator.userAgent.indexOf('Opera') != -1)
{
window.print();
}
else
{
doc.print();
}
doc.close();
}
}
}
}
Hey guys, I'm trying to hide a TR if a TD within it has only specific html in it. Why would this not work: Code: if(document.getElementById('website1').innerHTML.toLowerCase()=="<a href='' title=''></a>")
{
document.getElementById('website-row').style.display='none';
}
I'm working on a script that inserts things into tables. It's complicated and involves xmlhttp and lots of stuff, but I've narrowed the problem down to something simple. The following code does not work in IE. It doesn't generate an error, but simply displays nothing. Here is the code: Code: <body>
<table id="test">
</table>
<script type="text/javascript">
document.getElementById('test').innerHTML = '<tr><td>test<\/td><\/tr>';
</script>
</body>
I have no idea why it isn't working as it works in Safari and Firefox. Help is much appreciated. Julian Ok I want to be able to include a html file into my template. I want the php include to work when I press a button that will put the include into a specific element with the document.getElementById("").innerHTML method in javascript. I want the include to be able to be more then a single line. For example I want to be able to write my code like this <div> some text </div> and not have to write it like this <div>some test</div> Thanks Shelby Hello. I'm trying to change the text on my page dynamically using getElementById etc. Just not quite sure how to do it. Code: <script>
function changeIt() {
document.getElementById('change').innerHTML = '*i want the stuff below here (from 'var' to 'text')*';
}
var Result= ((correct / 5) * 100) + '%';
document.write('<p>Result<b>' + score + '</b></p>');
document.write('<p>some text</p>');
</script>
//
<div id = "change">
*all the info I'm going to replace*
</div>
Just need to know how to put the variables and stuff in the 'innerhtml' part? Thanks. hi, i have a problem with innerHTML if i wrote document.getElementById('someid').innerHTML = "ok"; then it wroks but when i wrote document.getElementById('someid').innerHTML = "<sometext> ok"; it does not work. i.e. <sometext> is not visible if check on firebug / dom it display.. <sometext> ok </sometext> please help.. how do i print / display above string as it as. you may download file or check below link.. please click here Hey everyone, I'm struggling to get this to work, I have a countdown timer with the timer itself declared as, 'out'. This is then set as the content for a div using: Code: document.getElementById(iid).innerHTML=out; My code basically says, if the countdown timer hasn't finished, do the above, if however it has reached the end, set the contents of the div to something else. What I need to do is add an image above the timer which disappears with it when it reaches 0, so essentially, I need to be able to do something like the following (except obviously in the correct syntax, if it exists). Quote: document.getElementById(iid).innerHTML="<img src='images/dateheader.png'><br>" out; Is this possible? Thanks I can't seem to get my innerHTML to display my content. This works fine, if I was to put it all in one line. Code: document.getElementById('addedText').innerHTML = '<table><tr><td>'+"My text goes here"+'</tr></td></table>';
If I was to break it up, which I wanted then nothing seem to show up. Code: document.getElementById('addedText').innerHTML = '<table><tr><td>';
document.getElementById('addedText').innerHTML = "My text goes here";
document.getElementById('addedText').innerHTML = '</tr></td></table>';
Here's my code Code: <html>
<head>
<script type="text/javascript">
function display() {
document.getElementById('addedText').innerHTML = '<table border=1><tr><td>';
document.getElementById('addedText').innerHTML = "My text goes here";
document.getElementById('addedText').innerHTML = '</tr></td></table>';
}
</script>
</head>
<body onload="display()">
<div id="addedText"></div>
</body>
</html>
thanks Hello all. I'm new here and new to JavaScript. Ive got a snippet of code that's not working. Can you guys help me out? The code is the following: Code: function image()
{
var image = document.getElementById('add_image');
image.style.height = '30px';
image.innerHTML = '<div style="margin:5px; width:520px; height:20px;" id="add_images"><input type="file" name="pic" /></div>';
}
The first half of the function is working, but the second half isn't. I originally tried style.visibility = 'visible' but that didn't work so I try innerHTML. Since that didn't work either, I've decided to seek help. Thanks ahead of time. since there are troubles with innerHTML in IE ..... instead of : Code: target.innerHTML = src.innerHTML; --> Code: this.copy_innerHTML = function(src,target)
{
//remove all target inner elements
while(target.hasChildNodes()){target.removeChild(target.childNodes[0])}
for (var j = 0; j<src.childNodes.length-1; j++)
{
target.appendChild(src.childNodes[j].cloneNode(true));
}
}
a) Tested in FF and GC b) in IE this works, but stuff does not appear where it should. EDIT: if text nodes removed , then even in ff does not work, does not find textarea inside target node. That is, the error pops up, previously only notable at IE. HTML & CSS validation is OK. Any advice ? Hello everyone! I'm a student and am trying to write some very simple code. My problem is I use innerHTML in my script file to send some text to a div in my html. When it's sent it renders and then quickly disappears. I've attached my code. Any help is dearly appreciated. There are two separate "files" .html & .js: Code: <?xml version = "1/0" encoding = "utf-8"?>
<!DOCTYPE html Public "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999.xhtm">
<head>
<!-- -->
<!-- CS111 Quiz -->
<title>CS111 Quiz</title>
<script text = "text/javascript" src = "script.js">
</script>
</head>
<body>
<h1 align="center">Mike Overholt</h1>
<br/>
<br/>
<form id="answers" name="answers" onSubmit="return quiz();">
<table width="100%">
<tr>
<td align="center"><h3>1. What is 1+1?</h3></td>
<td align="center"><h3>2. What is 2+2?</h3></td>
<td align="center"><h3>3. What is 3+3?</h3></td>
</tr>
<tr>
<td align="center">
<input type="text" id="1" name="answer1" value=" " align="center"/>
</td>
<td align="center">
<input type="text" id="2" name="answer2" value=" " align="center"/>
</td>
<td align="center">
<input type="text" id="3" name="answer3" value=" " align="center"/>
</td>
</tr>
<tr>
<td align="center">
</td>
<td align="center">
<input type="submit" id="submit" name="submit" value="submit" onClick="quiz();" align="center"/>
</td>
<td align="center">
</td>
</tr>
</table>
</form>
<div id="div1" align="center" name="answer_box" style="border:2px; border-color:gray; border-style:solid; width:50%; margin-left:auto; margin-right:auto; height:200px;">
<p id="p1"></p><br/>
<p id="p2"></p><br/>
<p id="p3"></p>
<!--<script>alert(1);</script>-->
</div>
</body>
</html>
//script.js
//Mike Overholt
//Quiz 1
function quiz()
{
var i=1;
var ans=new Array();
ans[1]=2;
ans[2]=4;
ans[3]=6;
for(i=1;i<ans.length;i++)
{
var a=document.getElementById("p"+i);
if(document.getElementById(i).value==ans[i])
{
a.innerHTML="You answered number "+i+" correctly!";
}
else
{
alert("You answered number "+i+" incorrectly, please try again.");
}
}
}
I trying to display a random number using innerHTML Here's my code: Code: <html>
<head>
<script language="JavaScript">
var myArray = new Array("String1", "String2", "String3", "String4", "String5", "String6", "String7", "String8", "String9", "String10");
var num = Math.floor(myArray.length * Math.random());
document.writeln(myArray[num]);
//document.getElementById("myString").innerHTML = myArray[num];
</script>
</head>
<body>
<div id="myString"></div>
</body>
</html>
it works when I use document.writeln(myArray[num]); but does NOT work for document.getElementById("myString").innerHTML = myArray[num]; any ideas?? tks Hello. I have the following: bottomCell.innerHTML = "apples 0"; bottomCell.innerHTML.replace("apples", "oranges", "gi"); The first line works fine, the second one doesn't. In the end, I want it to replace all instances of the numerical variable named myNumber to the string "t" + newNumber (where newNumber is another numerical variable) but neither this, nor the above mentioned line work. Any ideas? Thanks! How would you make a case statment that creates a button without reloading the page??
Hello all, I'm trying to lern javascript, but my knowledge doesn't cover what I want, so I could use some help. I'm trying to make a lotto check form for our family. What it as to do is check the numbers(B) with numbers(A) Code: <SCRIPT TYPE="TEXT/JAVASCRIPT">
// Check lotto
function checkLotto() {
var goed = frmTrekking.EersteGetal.value
var fout = frmGetallen.Opgegeven_1.value
if (frmTrekking.EersteGetal.value == frmGetallen.Opgegeven_1.value) {
document.getElementById('boldStuff').style.color='#00ff00';
document.getElementById('boldStuff').innerHTML = goed;
}
else {
document.getElementById('boldStuff').style.color='#ff0000';
document.getElementById('boldStuff').innerHTML = fout;
}
}
</script>
Code:
<body onload="checkLotto();">
<form id="frmGetallen" name="frmGetallen" method="post" action="">
<table width="100%" border="0" cellspacing="5" cellpadding="5">
<tr>
<td width="9%"><strong>A</strong></td>
<td width="6%"><strong>Naam</strong></td>
<td width="10%"><strong>1</strong></td>
<td width="10%"><strong>2</strong></td>
<td width="10%"><strong>3</strong></td>
<td width="10%"><strong>4</strong></td>
<td width="10%"><strong>5</strong></td>
<td width="10%"><strong>6</strong></td>
<td width="10%"><strong>7</strong></td>
<td width="10%"><strong>8</strong></td>
<td width="10%"><strong>9</strong></td>
<td width="10%"><strong>10</strong></td>
</tr>
<tr>
<td><strong>1</strong></td>
<td><strong>Joop</strong></td>
<td><b id='boldStuff'><input name="Opgegeven_1" type="hidden" id="Opgegeven_1" value="6" size="5" /> </b></td>
<td><b id='boldStuff'><input name="Opgegeven_2" type="hidden" id="Opgegeven_2" value="8" size="5" /></b></td>
<td><b id='boldStuff'><input name="Opgegeven_3" type="hidden" id="Opgegeven_3" value="16" size="5" /></b></td>
<td><b id='boldStuff'><input name="Opgegeven_4" type="hidden" id="Opgegeven_4" value="18" size="5" /></b></td>
<td><b id='boldStuff'><input name="Opgegeven_5" type="hidden" id="Opgegeven_5" value="26" size="5" /></b></td>
<td><b id='boldStuff'><input name="Opgegeven_6" type="hidden" id="Opgegeven_6" value="28" size="5" /></b></td>
<td><b id='boldStuff'><input name="Opgegeven_7" type="hidden" id="Opgegeven_7" value="32" size="5" /></b></td>
<td><b id='boldStuff'><input name="Opgegeven_8" type="hidden" id="Opgegeven_8" value="36" size="5" /></b></td>
<td><b id='boldStuff'><input name="Opgegeven_9" type="hidden" id="Opgegeven_9" value="38" size="5" /></b></td>
<td><b id='boldStuff'><input name="Opgegeven_10" type="hidden" id="Opgegeven_10" value="41" size="5" /></b></td>
</tr>
</table>
</form>
<form id="frmTrekking" name="frmTrekking" method="post" action="">
<label></label>
<table width="58%" border="0" cellspacing="5" cellpadding="5">
<tr>
<td width="7%"><strong>B</strong></td>
<td width="10%"><input name="EersteGetal" type="text" id="EersteGetal" value="6" size="5" /></td>
<td width="10%"><input name="TweedeGetal" type="text" id="TweedeGetal" value="12" size="5" /></td>
<td width="10%"><input name="DerdeGetal" type="text" id="DerdeGetal" value="20" size="5" /></td>
<td width="10%"><input name="VierdeGetal" type="text" id="VierdeGetal" value="32" size="5" /></td>
<td width="10%"><input name="VijfdeGetal" type="text" id="VijfdeGetal" value="5" size="5" /></td>
<td width="10%"><input name="ZesdeGetal" type="text" id="ZesdeGetal" value="15" size="5" /></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</form>
What I have now is the check between 2 numbers, I need to have it checked all, so all the B numbers have to be checked with all the A numbers. I think i'll need a sort of loop in a array, but I really don't know how to do this. Can somebody help me with this please? |
|||||||