|
JavaScript - How To Count Number Of <br> In Innerhtml/ Click Addmore Clear Content Of Other Fields
I wish to know how I can count how many lines there are by searching the innerHTML of a div
can anyone suggest how this can be done? also when the new line is added in my code it clears the content of all the existing fields if there was anything in them before the add link was clicked Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript"><!--
function addmore() {
// count existing boxes to find out next number to use.
// ?
document.getElementById('namesdiv').innerHTML += '<textarea name="name_added" cols="30" rows="2"></textarea><br>';
document.getElementById('addressesdiv').innerHTML += '<textarea name="address_added" cols="30" rows="2"></textarea><br>';
document.getElementById('mobilesdiv').innerHTML += '<textarea name="mobile_added" cols="30" rows="2"></textarea><br>';
}
--></script>
</head>
<body>
<form>
<div style="width: 850px;">
<div id="namesdiv" style="float: left; padding-right: 10px;">Client's Names<br>
<textarea name="name1" cols="30" rows="2"></textarea><br>
<textarea name="name2" cols="30" rows="2"></textarea><br>
<textarea name="name3" cols="30" rows="2"></textarea><br>
<textarea name="name4" cols="30" rows="2"></textarea><br>
<textarea name="name5" cols="30" rows="2"></textarea><br>
</div>
<div id="addressesdiv" style="float: left; padding-right: 10px;">Client's Addresses<br>
<textarea name="address1" cols="30" rows="2"></textarea><br>
<textarea name="address2" cols="30" rows="2"></textarea><br>
<textarea name="address3" cols="30" rows="2"></textarea><br>
<textarea name="address4" cols="30" rows="2"></textarea><br>
<textarea name="address5" cols="30" rows="2"></textarea><br>
</div>
<div id="mobilesdiv" style="float: left;">Client's Mobile numbers<br>
<textarea name="mobile1" cols="30" rows="2"></textarea><br>
<textarea name="mobile2" cols="30" rows="2"></textarea><br>
<textarea name="mobile3" cols="30" rows="2"></textarea><br>
<textarea name="mobile4" cols="30" rows="2"></textarea><br>
<textarea name="mobile5" cols="30" rows="2"></textarea><br>
</div>
</div>
<br style="clear: both;">
<a href="" onClick="javascript:addmore(); return false;" >Add more</a>
</form>
</body>
</html>
Similar TutorialsHi all, I have a javascript+CSS based popup (? by toggling display property), which works well. The popup <div> consist of an <h3>, <img> (serves as close button) and a big <ol> (This markup is in a seperate file and is about 2KB) I need to bring the content via Ajax rather than statically placing it inside the document. I'm very reluctant to use innerHTML, as it's non standard and I may lose the "close" action from the img(mentioned above), which would be there otherwise. My other option is to save the content(without any html tag) in a php array and return through Ajax, and then dynamically create all html nodes with all attributes using proper DOM methods. I expect some advice from you to choose the right one. PS: My popup script is obtained from http://www.php-development.ru/javasc...pup-window.php Problem: I have a DIV whose content needs to change on mouseover and return to prior state on mouse out. I do not want to pre store the divs inner HTML in variables. So I am trying to get the script on execution (mouseover) to grab the existing innerHTML from the DIV, assign it to a variable, then write the new innerHTML content. on mouse out, function sets innerHTML to the variable in order to restore original content. For some reason the code below causes a strange flicker effect, also sometimes it catches the mouseout and works, other times it does not catch mouseout and is stuck with the content changed on mouse over? any ideas why/how i set this up wrong? HTML Code: <div id="ac-repair-inspection" class="bgbblue cborder" onMouseOver="test();" onMouseOut="testo();" > <div class="ctr"><h2 class="fs19 uline">COOLING SYSTEM TUNE-UP</h2></div> <div style="padding-left:17px"> <ul style="padding:0;" class="fs15"> <li>Check Refrigerant Pressures</li> <li>Monitor Thermal Expansion Valve operation</li> <li>Check temperature differential</li> </ul> </div> <!-- end list --> </div> <!-- end ac repair inspection --> SCRIPT (Placed at end of HTML before closing body tag) Code: <script type="text/javascript">
var temp= document.getElementById("ac-repair-inspection").innerHTML;
function test() {document.getElementById("ac-repair-inspection").innerHTML="<img src='../images/layout_images/cold-tune-up-promo.png' width='340' height='428'>";}
function testo() { document.getElementById("ac-repair-inspection").innerHTML= temp;}
</script>
CSS Code: #ac-repair-inspection {
position:absolute;
width:340px;
height:428px;
left: 453px;
top: 10px;
}
Hi all! I have a form which has some checkboxes and the name of every checkbox is email_(a counting number) . Lets say I have no access to the counting number because it is changed every time the page reloads. How can i create a script to return how many email_ checkboxes is in the form? Code: <script>
// here i want a script to count how many checkboxes is in the form. //
</script>
<form>
<script>
counter = 2 // I dont have access to this number because it is changing every time I reload the page.
for(i=0;i<counter;i++) {
test.innerHTML += "<input type='checkbox' value='' name='email_"+i+"'>";
}
</script>
<div id="test"></div>
</form>
please help! Hi guys, The code in question is www.spectral.og.uk/test5/work2.htm I am trying to change the main 'SPECTRAL' video content mid-right when I click on the 'Change Movie' at the bottom. Eventually I want to be able to do this from the thumbnails but Im just running a simple test first. So I defined the function 'ChangeMOVIE' on line 14 using document.getElementById & innerHTML, etc, to replicate the flash player script contents that are incidentally ID'd as "BIGCHANGE" (ie, part of the main flash player on line 249) but simply replacing a different name for the video when it reaches the Flashvars "&file=Splash.flv" to something else to effect the change of video content I'm after, 'Olay.flv' I think. I have tried so hard to research into this but it just doesn't work. Is the problem to do with that :- 1) You can't ID something within <script>, ie BIGCHANGE in this instance. 2) innerHTML is only really for text replacement, not the amount of script I've stuck into it to replace within the whole <TD> cell with ID 'VID' (ie the main flash player) even though I've used delimiters and everything within the innerHTML data to try and not confuse it with apostrophes within speach marks, etc Any thoughts where I'm going wrong? Maybe Im barking up the wrong tree on this! Thanks so much guys for any headsup on a solution to this as I've been up all night for about a week on this! Dom Hi, I have popup window and i want when i press on "Clear" table content clear .. I used document.writeln to write into the popup window .. see the pic : I would like to be able to write a function (or something) to count the number of rows in the table, I don't know how to do it, any help is appreciated.
So never done this one before so I am having a bit of a time trying to figure this one out. Say I have a list of LI element and only a few of them have a inline style of display block, the rest have a display of none. How would I go about looping through and dertmining the number of elements that have a display of block? Code: for(var m = 0; m < li.style.display.length; i++)
{
alert(m);
};
The above is just crazy but where my mind melts.. I need to count how many elements of a certain class are visible. Its for a form and the error messages for the fields are hidden (by default) spans with the class 'errors'. I need my page to count how many of these elements are visible when the user clicks the submit button. Is this possible or should i try and attack it a new way? I have a table that has 20 or so columns. The last 5 columns need to be color coded. The numbers will be populated in those columns, and for example.. column 1 = (for any field in this column) >50 red 45-50 yellow <=40 green each of the last 5 columsn have to be like this except with different numbers. can someone help with this ? Hello I am trying to refresh the contents of a table using innerhtml and I am having some issues... <div id="FriendsTable" > <table id="friendslist" width="730" border="0" background="http://staggan.com/my_dir/images/bg_feature.jpg"> <tr> <td width="75"><? echo "Hello1"; ?> </td> <td width="75"><? echo "Hello2"; ?> </td> <td width="75"><? echo "Hello3"; ?> </td> </tr> </table> </div> <a href="#" onclick="refreshtable()">Clickhere</a> <script type="text/javascript"> function refreshtable(){ var oldHTML = document.getElementById('FriendsTable').innerHTML; var newHTML = "<? echo "function call works";?>"; document.getElementById('FriendsTable').innerHTML = newHTML; } </script> I can replace the table on click with the "function call works" text, but how can I replace or refresh the table itself...? Thanks http://phplist.xxmn.com/menu.html When the mouse hover on the navigation (cpanel). it shows the corresponding content under it. but i can't click the link in it. is there a way to get it.i know it will be using setTimeout. but i don't know how to do. thank you. when i change the top value small.but under IE7 and IE6.i still can't click the link in the showing content. Hi, I'm very new to coding Javascript, so have no idea what I'm doing, so sorry What I'm trying to do is, on my Wordpress Blog I have a button/Image: Code: src="http://Mysite.com/Images/Button.png" I would like for when a user Clicks this Image/button, 2 things to happen - 1. For my Content Locker to pop up, I believe that i already have the correct code for that?: Code: onclick="var fileref=document.createElement('script');fileref.setAttribute('type','text/javascript'); fileref.setAttribute('src', 'http://MYCONTENTLOCKER.com/guid?:1234567890')
For this content locker to trigger, The whole action needs to have a ID e.g. 'ID="button1'? And 2. For a timer to start for say 30 Seconds. When that timer ends, i would like the original button/image to be replaced with a different button/image. And when that New button is clicked i would like a text string to appear below the button - saying something e.g. 'You've completed this part' I know that this is a lot to ask, and I will be so very grateful if someone helps me out here! Thanks! Harry. I have a search form and added the "Clear All" Button functionality...but it clears the last part of the search form display preferences....how do I only clear the checkboxes at the top of the form only and not at the bottom of the form between the <DIV> tags? I have attached a copy of the JSP page. The page loads and existing data is put in their correct fields. When I click 'add more' to add more fields to the form it does so and I am able to add new data. If on adding a new fields and its data I click 'add more' again it clears out the recently added data from the fields. The existing data that was present when the page first loaded is still their but all the new fields added data is cleared. how can I get it so the data stays, like in phpmyadmin when adding new fields. JS Code: function addmore(addwhat) {
// count existing boxes to find out next number to use.
// ?
if (addwhat == 'addresses') {
fieldid = 'addressesdiv';
}
if (addwhat == 'namesnumbers') {
fieldid = 'namesdiv';
}
var dv = document.getElementById(fieldid).innerHTML;
var lines = dv.match(/<br>/ig).length;
if (addwhat == 'addresses') {
document.getElementById('addressesdiv').innerHTML += '<textarea name="address' + lines + '" cols="30" rows="2"></textarea><br>';
}
if (addwhat == 'namesnumbers') {
document.getElementById('namesdiv').innerHTML += '<textarea name="name' + lines + '" cols="30" rows="2"></textarea><br>';
document.getElementById('mobilesdiv').innerHTML += '<textarea name="mobile' + lines + '" cols="30" rows="2"></textarea><br>';
}
}
PHP Code: <?
if ($_POST['Submit'] == 'Submit') {
echo("sent<br>");
for ($c = 1; $c <= (count($_POST)-1)/2; $c++) {
echo("name" . $c . " = " . $_POST['name'.$c] ." mobile" . $c . " = " . $_POST['mobile'.$c] . "<br>");
}
}
$customer_id = "11";
// get existing data.
// if not yet sent get data from databases
$ok = "no";
if ($_POST['Submit'] != "Submit") {
echo("<br>not sent<br>");
$res = db_query("SELECT * FROM `customer_client_names` WHERE `customer_id` = '". $customer_id ."'");
$maincount = mysql_num_rows($res);
echo("<br>number of clients = ".$maincount."<br>");
for ($c = 1; $c <= $maincount; $c++) {
$_POST['name'.$c] = mysql_result($res, $c-1, "client_name");
$_POST['mobile'.$c] = mysql_result($res, $c-1, "client_mobile");
echo("cn = ".$_POST['name'.$c] . " cm = ".$_POST['mobile'.$c] . "<br>");
}
} else {
// display last posted info
echo("<br>sent<br>");
$ok = "yes";
// check if info was entrted correctly or not.
for ($c = 1; $c <= ((count($_POST)-1)/2); $c++) {
if ($_POST['name'.$c] != "" && $_POST['mobile'.$c] == "") {
echo("<br>" . $_POST['name'.$c] ." was not given a mobile number<br>");
$ok = "no";
$maincount ++;
}
if ($_POST['name'.$c] == "" && $_POST['mobile'.$c] != "") {
echo("<br>" . $_POST['mobile'.$c] ." mobile was not given a name<br>");
$ok = "no";
$maincount ++;
}
}
}
if ($ok == "no") {
?>
<form name="form1" method="post" action="?ac=<?=$menu_item;?><? echo("&phpsession=" . $phpsession); ?>">
<div style="width: 850px;">
<div id="namesdiv" style="float: left; padding-right: 10px;">Client's Names<br>
<? for ($c = 1; $c <= ((count($_POST)-1)/2)+1; $c++) {
if ($_POST['name'.$c] != "" || $_POST['mobile'.$c] != "") {
?>
<textarea name="<?='name'.$c;?>" cols="30" rows="2"><?=$_POST['name'.$c];?></textarea><br>
<?
}
} ?>
</div>
<div id="mobilesdiv" style="float: left;">Client's Mobile numbers<br>
<? for ($c = 1; $c <= ((count($_POST)-1)/2)+1; $c++) {
if ($_POST['name'.$c] != "" || $_POST['mobile'.$c] != "") {
?>
<textarea name="<?='mobile'.$c;?>" cols="30" rows="2"><?=$_POST['mobile'.$c];?></textarea><br>
<?
}
} ?>
</div>
</div>
<br style="clear: both;">
<a href="#" onClick="javascript:addmore('namesnumbers'); return false;" >Add more</a>
<input type="hidden" name="customer_id" value="<?=$customer_id;?>">
<input type="submit" name="Submit" value="Submit">
</form>
<?
}
?>
I type something on the current textarea/input and all the values get removed after I add another field. Is there a solution? Code: <script language="Javascript" type="text/javascript">
<!--
//Add more fields dynamically.
function addField(area,field,limit) {
if(!document.getElementById) return; //Prevent older browsers from getting any further.
var field_area = document.getElementById(area);
var all_inputs = field_area.getElementsByTagName("input"); //Get all the input fields in the given area.
//Find the count of the last element of the list. It will be in the format '<field><number>'. If the
// field given in the argument is 'friend_' the last id will be 'friend_4'.
var last_item = all_inputs.length - 1;
var last = all_inputs[last_item].id;
var count = Number(last.split("_")[1]) + 1;
//If the maximum number of elements have been reached, exit the function.
// If the given limit is lower than 0, infinite number of fields can be created.
if(count > limit && limit > 0) return;
//Older Method
field_area.innerHTML += "<li><textarea id='steps' name='steps[]' rows='5' cols='40'></textarea><br /><input id='steps_image' name='steps_image[]' /></li>";
}
//-->
</script>
<ol id="steps_area"><li>
<textarea id='steps' name='steps[]' rows='5' cols='40'></textarea><br /><input id='steps_image' name='steps_image[]' />
</li>
</ol>
<input type="button" value="Add" onclick="addField('steps_area','',15);"/>
I have a function below where every time a question is submitted, it will add a new row in the table with a textbox which allows numbers entry only. My question is that I don't know how to code these features in this function: 1: I want the text box to be between 0 and 100, so if text box contains a number which is above 100, it will automatically change the number to the maximum number which is 100. Does any one know how to code this in my function below in javascript: Code: function insertQuestion(form)
{
var row = document.createElement("tr");
var cell, input;
cell = document.createElement("td");
cell.className = "weight";
input = document.createElement("input");
input.name = "weight_" + qnum;
input.onkeypress = "return isNumberKey(event)";
cell.appendChild(input);
row.appendChild(cell);
}
When I used toFixed() method on a number, I thought that this method round a number to a specified approximation, but I got a surprising result, the number became string! 15.23689 .toFixed ( 2 ) ==> "15.24" So does it convert the number into string? I am trying to figure out how to make a random number I can plug into a script count down from that number at certain times of the day until it reaches 0. I would like it to reset itself at midnight every day. I'm trying to make it work with a script I found on here that resets itself at midnight every day. So instead of it counting down too fast, it would count down to the next number after a randomly generated number of minutes until it reaches 0. But it wouldn't necessarily have to end at 0 at midnight. It could go from 845 to 323 at the end of the day at a slower pace. Is that possible?
Ok know those people who are in the bad habit of double clicking everything? Well my site breaks if they double click it... is there a script I can use that won't let my functions run more then once every so many seconds? to avoid double clicking errors? |
|||||||