Create a url with input box and javascript

**phantom** · 10-11-2009, 07:46 PM

Hello dynamic drive guru's,

I'm being to make a homepage with HTML (it's a start page with url link's).
Now i want to use a input box to add more url's on this page with javascript.
Is this possible with javascript without php?

I'm very newbie for javascript and search for a answer.

Ps: My english is not perfect, sorry for that.

Thank's for this great website and all people here.

matt

**codeexploiter** · 10-12-2009, 12:14 PM

You can do this using JS without much trouble. Here is an elementary demo:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Link Insertion</title>
	</head>
	<body>
		<div id="linkcontainer">
			<a href="http://www.google.com">Google</a><br/>			
			<a href="http://www.getfirebug.com">Firebug</a><br/>
		</div>
		
		<form style="margin-top: 10px;">
			<fieldset>
				<label>Url&nbsp;</label><input type="text" name="url" id="url" /><br/>
				<label>Caption&nbsp;</label><input type="text" name="cap" id="cap" />
			</fieldset>
			<input type="button" name="insert" value="INSERT LINK" id="insert" /> 
		</form>
		<script type="text/javascript">
			document.getElementById("insert").onclick = function(){
				if(document.getElementById('url').value !== ""){
					var a = document.createElement('a');
					var br = document.createElement('br');
					a.href = document.getElementById('url').value;
					var c = document.getElementById('cap').value || new Date().getTime();
					a.innerHTML = c;
					var container = document.getElementById('linkcontainer');
					container.appendChild(a);
					container.appendChild(br);
				}	
			}			
		</script>
	</body>
</html>

Note that I haven't created any validation code in the demo code at the moment. So when you enter the URL try to use a correct one.

As far as the caption of the link (link text) is concerned if you omit it then the code will use a random number as link text. After entering the url and caption press the button provided and you'll be able to view the a new link is being added to the end of the link list in the page.

Plz let me know if there is any issue in the demo.

**phantom** · 10-13-2009, 11:20 AM

Originally Posted by codeexploiter

You can do this using JS without much trouble. Here is an elementary demo:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Link Insertion</title>
	</head>
	<body>
		<div id="linkcontainer">
			<a href="http://www.google.com">Google</a><br/>			
			<a href="http://www.getfirebug.com">Firebug</a><br/>
		</div>
		
		<form style="margin-top: 10px;">
			<fieldset>
				<label>Url&nbsp;</label><input type="text" name="url" id="url" /><br/>
				<label>Caption&nbsp;</label><input type="text" name="cap" id="cap" />
			</fieldset>
			<input type="button" name="insert" value="INSERT LINK" id="insert" /> 
		</form>
		<script type="text/javascript">
			document.getElementById("insert").onclick = function(){
				if(document.getElementById('url').value !== ""){
					var a = document.createElement('a');
					var br = document.createElement('br');
					a.href = document.getElementById('url').value;
					var c = document.getElementById('cap').value || new Date().getTime();
					a.innerHTML = c;
					var container = document.getElementById('linkcontainer');
					container.appendChild(a);
					container.appendChild(br);
				}	
			}			
		</script>
	</body>
</html>

Note that I haven't created any validation code in the demo code at the moment. So when you enter the URL try to use a correct one.

As far as the caption of the link (link text) is concerned if you omit it then the code will use a random number as link text. After entering the url and caption press the button provided and you'll be able to view the a new link is being added to the end of the link list in the page.

Plz let me know if there is any issue in the demo.

Woww, it is able to make it real with javascript that's very very well, that's so great. Thank you much i'm very happy about your code and that you take your time to create this code for me. Now i will testing it for a while.

Ps: sorry for my english.

Appreciate and thankful

matt

**phantom** · 10-16-2009, 08:29 AM

Hi,
now this script from codeexploiter work great for me

, but i need to save it too to make the new url to this page permanent. I already read the thread about what you cannot do it's good to know especially for newbies like me.

http://www.dynamicdrive.com/forums/s...ad.php?t=21964

But is it able to create a button to save it manually like a "save as" button or another way to save the new url that i inserted to the page?

matt

**phantom** · 10-16-2009, 05:35 PM

I found document.execCommand("SaveAs") to save the whole page but, it saves without the new inserted url's. :-(
How can i save it with the new inserted url's ?

**phantom** · 10-19-2009, 12:16 PM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Link Insertion</title>

		<!-- START----------- DOM javascript insert url's to this page. ----------- START -->
		<!-- CREDITS TO CODEEXPLOITER dynamicdrive.com -->
		<script type="text/javascript">
			function Insertme(){
				if(document.getElementById('url').value !== ""){
					var a = document.createElement('a');
					var br = document.createElement('br');
					a.href = document.getElementById('url').value;
					var c = document.getElementById('cap').value || new Date().getTime();
					a.innerHTML = c;
					var container = document.getElementById('linkcontainer');
					container.appendChild(a);
					container.appendChild(br);
				}	
			}			
		</script>
		<!-- END----------- DOM javascript insert url's to this page. ----------- END -->


		<!-- START----------- Javascript to save the whole page. ----------- START -->
		<script type="text/javascript">
			function doSaveAs(){
				if (document.execCommand){
					document.execCommand("SaveAs", true, "domTEST3.html")
				}
				else {
					alert("Save-feature available only in Internet Exlorer 5.x.")
				}
			}
		</script>
		<!-- END----------- Javascript to save the whole page. ----------- END -->

	</head>
	<body>

		<div id="linkcontainer">
			<a href="http://www.google.com">Google</a><br/>			
			<a href="http://www.getfirebug.com">Firebug</a><br/>
		</div>
		
		<form style="margin-top: 10px;">
			<fieldset>
				<label>Url </label><input type="text" name="url" id="url" /><br/>
				<label>Caption </label><input type="text" name="cap" id="cap" />
			</fieldset>
			<input type="button" name="insert" onclick="Insertme();" value="INSERT LINK" id="insert" /> 
		</form>

		<form>
			<input type="button" value="Save This WebPage" onClick="doSaveAs()">
		</form>	

	</body>
</html>

Hi,
This was my inserted homepage with codeexploiter javascript with element method, after that i try save it after insert new url's with execCommand("SaveAs"), but hopeless to save the new added url's too.

Can someone here help me out ? Or give me another way to finish it ?

Grateful thanks
Matt

**phantom** · 10-22-2009, 04:52 AM

Can someone here help me or give me advice?

an another question how can i order the code after inserting the new url's. I have try to use '\n' to breakline the code, i have read some tuturials from www.w3schools.com about JS and DOM but can't get some breakline in this code?

Please help me next.

Matt

**phantom** · 10-24-2009, 05:58 AM

Originally Posted by phantom

Can someone here help me or give me advice?

an another question how can i order the code after inserting the new url's. I have try to use '\n' to breakline the code, i have read some tuturials from www.w3schools.com about JS and DOM but can't get some breakline in this code?

Please help me next.

Matt

Up up

**phantom** · 10-29-2009, 08:37 AM

Hi dynamic guru's,
let me explain more about to order the code after inserting the new elements (url's). I need the output of the code in order line like a write it my self.

Example of the inserted code:

Code:

<div id="linkcontainer">
<a href="http://www.google.com">Google</a><br>			
<a href="http://www.getfirebug.com">Firebug</a><br>
<a href="http://www.newsite.com">New Site</a><br><a href="http://www.newsite.com">New Site2</a><br><a href="http://www.newsite.com">New Site3</a><br></div>

need to order it a little with break lines:

Code:

<div id="linkcontainer">
<a href="http://www.google.com">Google</a><br>			
<a href="http://www.getfirebug.com">Firebug</a><br>
<a href="http://www.newsite.com">New Site</a><br>
<a href="http://www.newsite.com">New Site2</a><br>
<a href="http://www.newsite.com">New Site3</a><br>
</div>

How can i do it to order my output code?

Matt

Thread: Create a url with input box and javascript

Thread Tools

Search Thread

Create a url with input box and javascript

Bookmarks

Bookmarks

Posting Permissions