|
JavaScript - Show More/less Text?
I am looking for a way to show more or less text. I want to show 600 characters by default and if show more is clicked it will show 600 more characters and then if clicked again shows 600 more untill there are no more characters. I also would like a show less button to collapse the text back to its default 600 characters. I have pages with 5000+ words and this would make reading much easier and make it look nicer. Right now I am using this to show the first 600 chars and when show more is clicked it expands all the way.
Code: $(document).ready(function() {
var showChar = 600;
var ellipsestext = "...";
var moretext = "View more";
var lesstext = "View less";
$('.more').each(function() {
var content = $(this).html();
if(content.length > showChar) {
var c = content.substr(0, showChar);
var h = content.substr(showChar-1, content.length - showChar);
var html = c + '<span class="moreelipses">'+ellipsestext+'</span> <span class="morecontent"><span>' + h + ' </span><a rel="nofollow" href="" class="morelink">'+moretext+'</a></span>';
$(this).html(html);
}
});
$(".morelink").click(function(){
if($(this).hasClass("less")) {
$(this).removeClass("less");
$(this).html(moretext);
} else {
$(this).addClass("less");
$(this).html(lesstext);
}
$(this).parent().prev().toggle();
$(this).prev().toggle();
return false;
});
});
I am looking for any code or this code to be altered to show 600 characters by default and 600 more when show more is clicked and so on. I don't care how it is done, whether it be javascript or jquery or anything I would just like it to work and I have very little knowledge of java and if anyone could help me I would really appreciate it. thanks. Similar TutorialsHi need a bit of expert help with some thing i am trying to achive but cant find any code on line. all i want to do is to have a list of items in a div box on the left of the screen and when i click on one of them it shows a div box with the related text on the right side of screen in the second div box and hides any previouse showing divs on the right. Thanks Ralph hi, the yahoo function below is for dragging a box around teh screen Code: (function() {
var Dom = YAHOO.util.Dom,
Event = YAHOO.util.Event,
dd1, dd2, dd3;
YAHOO.example.DDRegion = function(id, sGroup, config) {
this.cont = config.cont;
YAHOO.example.DDRegion.superclass.constructor.apply(this, arguments);
};
YAHOO.extend(YAHOO.example.DDRegion, YAHOO.util.DD, {
cont: null,
init: function() {
//Call the parent's init method
YAHOO.example.DDRegion.superclass.init.apply(this, arguments);
this.initConstraints();
Event.on(window, 'resize', function() {
this.initConstraints();
}, this, true);
},
initConstraints: function() {
//Get the top, right, bottom and left positions
var region = Dom.getRegion(this.cont);
//Get the element we are working on
var el = this.getEl();
//Get the xy position of it
var xy = Dom.getXY(el);
//Get the width and height
var width = parseInt(Dom.getStyle(el, 'width'), 10);
var height = parseInt(Dom.getStyle(el, 'height'), 10);
//Set left to x minus left
var left = xy[0] - region.left;
//Set right to right minus x minus width
var right = region.right - xy[0] - width;
//Set top to y minus top
var top = xy[1] - region.top;
//Set bottom to bottom minus y minus height
var bottom = region.bottom - xy[1] - height;
//Set the constraints based on the above calculations
this.setXConstraint(left, right);
this.setYConstraint(top, bottom);
}
});
I would like to show the final TOP and LEFT results in textboxes onMouseUP?! thanks in advance! Hi Im looking for a way to show hide text box on select option change PHP Code: <select name="letter_type" id="lt"> <option value="Registered">Registered</option> <option selected="selected" value="Unregistered">Unregistered</option></select> <input name="textfield7" id="regty" type="text" accesskey="1" tabindex="1" size="20" /> i wana show that text box if user select "Registered" from select option. any help would be great sorry for language errors. Thanks Hello! I am using this script for showing who is on the air. I would like to know if anyone has an idea how to make this show a picture file instead of text for who is on air. The script is great in that the gmt offset works. I would just rather have it show an image instead of text. Code: <span id = "dj" style="font-size:12px; font-weight:bold; font-family: Tahoma; color: #6600FF;"></span>
<script type = "text/javascript">
function display() {
var show = "No show scheduled at present";
var GMToffset = -5; // Your current GMT offset, whether Standard or Daylight
var now = new Date();
var dy = now.getDay(); // day of week 0-6
now.setHours(GMToffset + now.getHours() + now.getTimezoneOffset() / 60);
var hh = now.getHours();
var mn = now.getMinutes();
hh = hh + (mn/60); // minutes expressed as fractions of an hour
// The GMT offset ensures that every visitor, regardless of their timezone, will see the schedule
// that is appropriate for the site owner's local time.
// Tip - for testing purposes you can put here
//dy = 5;
//hh = 9.25;
// or whatever to check that the right show appears at that day/time.
if (dy >=1 && dy <=5) { // days in Javascript are 0 Sunday - 6 Saturday
if (hh >=0 && hh <3) {show = "Matt Knight at Night"}
if (hh >=3 && hh <9) {show = "Non-Stop Music"}
if (hh >=9 && hh <17) {show = "The Matt Knight Show"}
if (hh >=17 && hh <18) {show = "Saving the 70's with Mike Walker"}
if (hh >=18 && hh <20) {show = "Non-Stop Music"}
if (hh >=20 && hh <21) {show = "Eighties at Eight with Rockin' Ron"}
if (hh >=21 && hh <24) {show = "Matt Knight at Night"}
}
if (dy >= 2 && dy <=5) {
if (hh >=0 && hh <3) {show = "Matt Knight at Night"}
if (hh >=3 && hh <9) {show = "Non-Stop Music"}
if (hh >=9 && hh <18) {show = "The Matt Knight Show"}
if (hh >=18 && hh <19) {show = "Non-Stop Music"}
if (hh >=19 && hh <20) {show = "Non-Stop Music"}
if (hh >=20 && hh <21) {show = "Eighties at Eight with Rockin' Ron"}
if (hh >=21 && hh <24) {show = "Hank and Jim Show"}
}
if (dy >= 3 && dy <=5) {
if (hh >=0 && hh <3) {show = "Hank and Jim Show"}
if (hh >=3 && hh <9) {show = "Non-Stop Music"}
if (hh >=9 && hh <18) {show = "The Matt Knight Show"}
if (hh >=18 && hh <19) {show = "Non-Stop Music"}
if (hh >=19 && hh <20) {show = "Non-Stop Music"}
if (hh >=20 && hh <21) {show = "Eighties at Eight with Rockin' Ron"}
if (hh >=21 && hh <24) {show = "The Pete Sayek Show"}
}
if (dy >= 4 && dy <=5) {
if (hh >=0 && hh <1) {show = "The Pete Sayek Show"}
if (hh >=1 && hh <9) {show = "Non-Stop Music"}
if (hh >=9 && hh <15) {show = "The Matt Knight Show"}
if (hh >=15 && hh <18) {show = "Stafford's World - Mark Stafford"}
if (hh >=18 && hh <19) {show = "Non-Stop Music"}
if (hh >=19 && hh <20) {show = "Non-Stop Music"}
if (hh >=20 && hh <21) {show = "Eighties at Eight with Rockin' Ron"}
if (hh >=21 && hh <24) {show = "Matt Knight at Night"}
}
if (dy == 5) {
if (hh >=0 && hh <3) {show = "Matt Knight at Night"}
if (hh >=3 && hh <9) {show = "Non-Stop Music"}
if (hh >=9 && hh <15) {show = "The Matt Knight Show"}
if (hh >=15 && hh <18) {show = "Beachey Live from the U.K."}
if (hh >=18 && hh <19) {show = "Catt Live from California"}
if (hh >=19 && hh <20) {show = "Catt Live from California"}
if (hh >=20 && hh <21) {show = "Catt Live from California"}
if (hh >=21 && hh <23) {show = "Psychedelic Detached Garage - George Cannon"}
if (hh >=23 && hh <24) {show = "Matt Knight at Night"}
}
if (dy == 6) { // Saturday Note the two = signs to mean equals
if (hh >=0 && hh <10) {show = "Non-Stop Music"}
if (hh >= 10 && hh <13) {show = "Stafford's World - Mark Stafford"}
if (hh >=13 && hh <13.30) {show = "Cheeze Pleeze - Snarfdude and Dafodil"}
if (hh >=13.30 && hh <20) {show = "Non-Stop Music"}
if (hh >=20 && hh <23) {show = "Flashback with Matt Knight"}
if (hh >=23 && hh <24) {show = "Imagination Theater"}
} //End of Saturday Shows
if (dy == 0) { //Sunday Shows
if (hh >= 0 && hh <10) {show = "Non-Stop Music"}
if (hh >=10 && hh <11) {show = "Motown Memories with Tom Fallon"}
if (hh >=11 && hh <22) {show = "Non-Stop Music"}
if (hh >=22 && hh <23) {show = "Imagination Theater"}
if (hh >=23 && hh <24) {show = "Non-Stop Music"}
} // End of Sunday Shows
var a = "" + show + " \u00A0 \u00A0 \u00A0 \u00A0 "; // spaces must be separted by Unicode spaces to prevent collapse
document.getElementById("dj").innerHTML = a;
setTimeout("display()", 60000); // update every 60 seconds
}
</script>
Hi, my code below shows 2 radio buttons, when you click on one, it shows the content from a div, I would like to show the content of the checked radio button by default, at teh moment, they don't show any content until they are clicked! Code: <html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input[name$='group1']").click(function() {
var test = $(this).val();
$("div.desc").hide();
$("#"+test).show();
});
});
</script>
</head>
<body>
<input type="radio" name="group1" value="AvailableMon" checked>Available
<input type="radio" name="group1" value="Unavailable">Unavailable
<style type="text/css">
.desc { display: none; }
</style>
<div id="AvailableMon" class="desc">Available</div>
<div id="Unavailable" class="desc">Unavailable</div>
</body>
</html>
I can I take a code like this: Code: <script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
}
else {
ele.style.display = "block";
text.innerHTML = "hide";
}
}
</script>
<a href="javascript:toggle();" id="displayText">Show/Hide</a>
<div id="toggleText" style="display: none;">This is Hidden Text</div>
But make it so you see "Show" before you click, then change the text to "Hide" once you click the link? Hi, Can somebody help me with the coding. I have a long list of events and I want somebody to be able to select one of those events & there will be a text box that shows the address pertaining to the event selected. Exactly how this website did he http://svacpa.com/live-webinars-and-...-registration/ Please advise! Thanks -------------- Code: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>MySite Registration</title> </head> <body> <div style="width: 900px"> <p>Registration</P <form method="post" action="http://mysite.com" name="Registration"> <label id="Label1">First Name</label><input name="FirstName" type="text" /><br /><br /> <label id="Label1">Last Name</label><input name="LastName" type="text" /><br /><br /> <label id="Label2">Title</label><input name="Title" type="text" /><br /><br /> <label id="Label3">Company</label><input name="Company" type="text" /><br /><br /> <label id="Label5">Email</label><input name="Email" type="text" /><br /><br /> <label id="Label4">Phone</label><input name="Phone" type="text" /><br /><br /> <input name="Radio1" type="radio" class="input" /><label id="Label1" class="lableinput">San Francisco, Wednesday, March 16 Breakfast</label><br /><br /> <input name="Radio1" type="radio" class="input" /><label id="Label1" class="lableinput">San Francisco, Wednesday, March 16 Lunch</label><br /><br /> <input name="Radio1" type="radio" class="input" /><label id="Label1" class="lableinput">Santa Clara, Friday, March 18 Lunch</label><br /><br /> <input name="Radio1" type="radio" class="input" /><label id="Label1" class="lableinput">Santa Clara, Friday, March 18 Dinner</label><br /><br /> <br /> <input name="Submit1" type="submit" value="Register Now" class="submit" /> <input type="hidden" name="redirect" value="http://www.mysite.com/regsuccess.html"/> <input type="hidden" name="recipient" value="me@mysite.com"/> <input type="hidden" name="required" value="FirstName, LastName, Email, Phone"/> <input type="hidden" name="missing_field_redirect" value="http://mysite.com/regerror.html"/> </form> </div> </body> </html> udayanga0727@yahoo.comI need to a code to do the following. There is a Text Area that user can enter text. assume that user enter something and put a dot Following values should be populate in a drop down at the place where dot locate . -Hello -Hi _Test like when we get the string object using Net Beans IDE and when we put "Object." , drop down will be displayed with available methods for that particular object. idea is to build a editor using java script. can any one help me on this? Apologies if this question has been asked a million times. I am fairly new to this game, have got my head around html & css and now it's time to add a little interactivity... BUT i've hit my first brick wall... I am setting up a (big) panel of text which i wish to present in a more reasonable fashion by hiding the content and only showing the headers. Got the Hide:Show function working ok as shown below, but I am stuck on my next requirement... Basically The hidden text will show and hide when told by clicking on the relevant header - but i wish to hide the text in a visible area when clicking on a new header. I have: Header1 (on click) | bodycopy - visible Header2 | bodycopy - hidden leading to: Header1 | bodycopy - visible Header2 (on click) | bodycopy - visible But i'm after: Header1 (on click) | bodycopy - visible Header2 | bodycopy - hidden leading to: Header1 | bodycopy - hidden Header2 (on click) | bodycopy - visible Here is the code i'm using: 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" />
<title>Untitled Document</title>
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</script>
<style type="text/css">
<!--
#slide_text1 {
font-family: Arial, Helvetica, sans-serif; font-size: 0.8em; line-height: 1.4em;
color: #000; margin-bottom: 15px; }
#slide_text2 {
font-family: Arial, Helvetica, sans-serif; font-size: 0.8em; line-height: 1.4em;
color: #000; margin-bottom: 15px; }
.h3_toggle {
font-family: Arial, Helvetica, sans-serif; font-size: 1em; line-height: 1.2em;
color: #999; text-decoration: none;}
.h3_toggle:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
line-height: 1.2em;
color: #333;
text-decoration: none;
cursor: crosshair;
}
-->
</style>
</head>
<body>
<h3><a class="h3_toggle" onclick="toggle_visibility('slide_text1');">First heading </a> </h3>
<div style="display:none;"" id="slide_text1">Body copy content to be hidden lives in this area</div>
<h3><a class="h3_toggle" onclick="toggle_visibility('slide_text2');">Second heading</a> </h3>
<div style="display:none;"" id="slide_text2">Body copy content to be hidden lives in this area</div>
</body>
</html>
Any help from you all is very much welcome (or if this has been answer before - a nudge in the direction of the answer please) Thanx, Ozwaldo. Hello, I have this search box form with 2 select boxes : Code: <form action="search.php" method="get"> <select name="RingType"> <option value="Nose">Nose</option> <option value="Toe">Toe</option> <option value="Belly">Belly</option> </select> <select name="NecklaceType"> <option value="gold">Gold</option> <option value="diamond">diamond</option> <option value="pearl">pearl</option> </select> <input type="text" size="60" name="keywords" /> <input class="submit" type="submit" value="Search" /> </form> For example, when a visitor selects "Belly" RingType, I want "Belly Ring" to appear in the search box. and when the visitor selects "pearl" NecklaceType, I want "pearl necklace" to appear in the search box. if the visitor first selects "Belly" RingType, and then selects "pearl" NecklaceType, I want "Belly Ring pearl necklace" to appear in the search box. After making his selections in the search box, if he types something in the search box, it should add to what is already there in the search box. Or, if he first types something in the search box for example, "jewelry" and then selects "pearl" in the necklacetype select box, the search box should show : "jewelry pearl necklace" Can you please show how to do this ? Thanks a lot. Hey, I've got the following problem: I want to edit this code: <a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.pp"><img src="http://blog.bastian.info/wp-content/uploads/2010/02/facebook-glossy-logo.jpg"></a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script> So that after they click the button that triggers the facebook share, 7 seconds after they click it, some text appear and the picture they click disappears. Cheers Hi, I have been here before and was responded to quickly with professional results, and you guys have managed to bring me back! Anyway, I am horrible at coding, and I need to know how to write this, basically when the page loads a random number is generated <script type="text/javascript"> window.onload=function() { var random = Math.rand() * (6 + 1); Then later in the page if (random = 1) { document.write("1") //I'm not sure if thats the code to show simple text, but I'm pretty sure it is, correct me if I'm wrong } if (random = 2) { document.write("2") } if (random = 3) { document.write("3") } and so on so forth. I will be changing the numbers in the script to my accord and use of the script, so please use the //notes to mark where and what things is, with a brief explanation, so I don't have to unscramble the code to find out what it is. Thanks fellow nerds! Hi Guys i am a complete novice at ajax or javascript. I have been studying php for a while now and i know that, i am now starting php oop and that going well but i have never done anything like this. Anway i am creating a booking system which at the end of the process asks who supplied your voucher which they then select a supplier. The issue i have is my client wants it so if groupon is selected then an input text box should appear so that the user can input a security code from groupon. So basically it is Code: <select name="supplier" id="supplier"> <option value="">please select supplier</option> <option value="Groupon">Groupon</option> <option value="KGB Deals">KGB Deals</option> <option value="Other">Other</option> </select> So if value="Groupon" then Code: <input type="text" name="security" id="security" /> should appear next to it. Could someone please help me as the page cant refresh as it will lose its data which would have taken the user about 10 minutes to fill out Thanks in advance Hello all, firstly I'm trying to make a button which you press then it will create a text box, I'v seen scripts that hide / show a text box, but every time you press this link I want it to display another text box. Example Below. I'v created what I want in HTML, but when a player clicks the link it needs to display a new box everytime. Code: <input type='text' size='50' id='jsuniquecode'> This is my html box which I would like to show. thanks! I'm sure the code must not be that different to the ones which show / hide an item. Thanks for reading my thread and it would be much appreciated if somebody could help me figure out where I should start etc. Thanks. Code: <html>
<title> random!!</title>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
<div class="one" style="cursor: pointer;">
type1<br/><br/></div><div class="two" style="cursor: pointer;">type2<br/><br/></div><div class="three" style="cursor: pointer;">type3<br/><br/></div>
<div class="oneone">atrdjgkhgfyfygfykfyfkygfvkgvkhgv</div><div class="twotwo">hgfihygohgohsgoihgolhgshgoshdgchchj</div><div class="threethree">siucgdiuhsbcohbscjbsidjcksjdnck</div>
<script type="text/javascript">
$(document).ready(function()
{
$('div.twotwo').hide();
$('div.threethree').hide();
$('div.one').toggle(function()
{
$('div.twotwo').hide();
$('div.threethree').hide();
$('div.oneone').fadeIn('slow');
}, function()
{
return false;
});
$('div.two').toggle(function()
{
$('div.oneone').hide();
$('div.threethree').hide();
$('div.twotwo').fadeIn('slow');
}, function()
{
return false;
});
$('div.three').toggle(function()
{
$('div.twotwo').hide();
$('div.oneone').hide();
$('div.threethree').fadeIn('slow');
}, function()
{
return false;
});
});
</script>
</body>
</html>
The following code works perfectly when clicked once in each of the sub divisions(type1, type2, type3) for hide/show. But from the next time onwards we will have to click twice to initiate the hide/show. Can anyone suggest changes to make the code work as desired??.. P.S: sorry if i have made any stupid mistake.. i am quite new to this!! This should be a simple fix.. I hope. JS: Code: //-- This is a really awful script and if it could be re-written by someone who knows what they're doing that would be incredible.
window.addEvent('domready', function() { //new event wooooo
// -- vertical2
var myVerticalSlide = new Fx.Slide('vertical_slide'); //declaring the variable with the FXSlide property
var toggleThis = $('v_toggle'); //toggle variable
myVerticalSlide.hide(); //hides the variable off the bat.
toggleThis.addEvent('click', function(event){ // uses the type 'click' the id on the link, giving it the following function
event.stop(); //Prevents browser from following the link and instead initiates the next line
myVerticalSlide.toggle(); //Togles the div declared in the variable VerticalSlide
});
});
HTML: Code: <div>
<a id="v_toggle" href="#">Question 1</a>
<div id="vertical_slide">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div>
<a id="v_toggle" href="#">Question 2</a>
<div id="vertical_slide">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
I'm new to JS (and any programming language, i just know HTML, CSS/SASS) . I tried to make the code as stupid-simple as I could, as you can see with all the comments. The problem is when you click on question1, all the answers show. I just want the answer below the question to show. How can I write this to just show one answer at a time. Any explanation would be a huge help or a point in the right direction would be great help. I'd love to learn how to fix this as opposed to just copying pasting :\ How do I show the default icon for pdf, doc, etc... else show the image? Code: Show the default icon for pdf, doc, etc... else show image. Default icon: '<img alt="" src="images/icons/' + sIcon + '.gif" width="16" height="16" border="0"><\/a>' + The image: '<img alt="" src="' + fileUrl.replace( /'/g, '\\\'') + '" height="36" border="0"></a>' + Attempted javascript onError but only certain browsers support that or it's my code. Code: '<img alt="" src="' + fileUrl.replace( /'/g, '\\\'') + '" height="36" border="0" onerror="this.src=images/icons/' + sIcon + '.gif"></a>' + Any ideas? As of right now I have a code that will work in IE but wont work in FireFox...go figure. Basically what I want to have happen is when you type in an area code it will provide an output in a predetermined area of the page. For Example: Input- 512 Output - Austin, TX The code that I have doesn't work with firefox and I was just wondering if there was a code that would allow that to happen. Thanks! Hi, I have a form with 9 text fields and a text area. What I want to do is replace the text in the text area depending on how many fields contain text. For example my text boxes are named 1 to 9, if the user enters text in the first five boxes I want the text area to auto fill with 'you have selected boxes 1 to 5' if the user selects all nine it will say 'you have selected 1 to 9', therefore, the user must complete the text boxes in order. I have it working with an onchange event but i have a button on the form to also auto fill the text boxes and it does not work if this is clicked. Any help would be appreciated! Hi all, Thanks for reading. I'm having an issue trying to accomplish the following - I have a text field (field1) already displayed on the HTML page. However, there's a link where you can add additional text fields to the page as well. When the link is clicked, the second text field is added successfully (field2), and when the link is clicked again, the third text field (field3) is added successfully. However, the third field does not add itself to the page, and the text for anything greater than a third field also isn't displayed after. This obviously means that my "fields" variable is not working right, so I'm wondering, would anyone be able to assist me to help me get that variable processing correctly? Code: <script language="javascript">
fields = 1;
function addMore() {
if (fields = 1) {
document.getElementById('addedMore').innerHTML = "<input type='text' name='field2' size='25' /> <span>Field 2.</span>";
fields = 2;
} else if (fields = 2) {
document.getElementById('addedMore').innerHTML = "<input type='text' name='field3' size='25' /> <span>Field 3.</span>";
fields = 3;
} else {
document.getElementById('addedMore').innerHTML = "Only 3 fields are allowed.";
document.form.add.disabled=true;
}
}
</script>
Here is the code in my HTML - Code: <input type="text" name="field1" size="25" /> <span>Field 1.</span> <div id="addedMore"></div> <p class="addMore"><form name="add"><a onclick="addMore()">Add another field.</a></form></p> Thank you very much. |
|||||||