How to create a dynamic text box / list

Ok, here’s what I’m trying to do. I want a form, consisting of two parts:

  1. A text field
  2. A list next to the text field (not an input field)

When you enter a value into the text field and hit enter, I want the value to appear in the list. In addition, I also need a link to delete any entries in the list. I would like this list of values stored in an array that is part of the form…like <input … name=“list” … /> so that when I submit, I can handle the data.

In addition, I would like this textbox and list to disappear based on whether or not a certain radio button is selected which is right above the textbox/list.

I just can’t seem to make sense out of this ajax stuff…

Thanks

None of what you ask is AJAX, it’s just JavaScript, no XMLHTTPRequest is needed. Does this do what you want?


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
		<title>Untitled Page</title>
		<style type="text/css" media="screen"><!--
button, input {
	vertical-align: top
	}

--></style>
		<script type="text/javascript"><!--
function addOption() {
	listBox.appendChild(new Option(inputBox.value,inputBox.value));
	inputBox.value = "";
}

function removeOption() {
	listBox.options[listBox.selectedIndex] = null;
}

window.onload = function() {
	hiddenFieldset = document.getElementById("hiddenFieldset");
	inputBox = document.FormName.inputBox;
	listBox = document.getElementById("listBox");

	document.FormName.radiogroup[0].onclick = function() {
		hiddenFieldset.style.display = "block";
	}
	document.FormName.radiogroup[1].onclick = function() {
		hiddenFieldset.style.display = "none";
	}

	hiddenFieldset.style.display = "none";
	document.getElementById("add").onclick = addOption;
	document.getElementById("remove").onclick = removeOption;
}
//-->
</script>
	</head>

	<body>
		<form id="FormName" action="(EmptyReference!)" method="get" name="FormName">
			<input type="radio" name="radiogroup" value="yes">Yes <input type="radio" name="radiogroup" value="no" checked>No
			<p>
				<fieldset id="hiddenFieldset">
					<legend>Title</legend>
					<input type="text" name="inputBox" size="24"> <button id="add" type="button">Add ></button> <select name="listBox[]" id="listBox" size="4" multiple></select> <button id="remove" type="button">Remove</button>
				</fieldset>
			</p>
		</form>
	</body>

</html>

Yes, just like that except I want the list to not be formatted like a form element. I want it to just look like a list consisting of body text line by line, with a little text link next to each value that says ‘delete’.

Also, if you’re typing in the box and hit enter it should add the value.

Would that require minor modifications?

Kinda minor :slight_smile: but still doable:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
		<title>Untitled Page</title>
		<style type="text/css" media="screen"><!--
button, input {
	vertical-align: top
	}

--></style>
		<script type="text/javascript"><!--
lineItem = "<li>XXX<input type=\\"hidden\\" name=\\"listBox[]\\" value=\\"XXX\\"> <button onclick=\\"removeOption(this);return false;\\">Delete</button></li>";

function addOption() {
	if (inputBox.value) {
		listBox.innerHTML += lineItem.replace("XXX",inputBox.value);
		inputBox.value = "";
	}
}

function removeOption(el) {
	el.parentNode.parentNode.removeChild(el.parentNode);
}

window.onload = function() {
	hiddenFieldset = document.getElementById("hiddenFieldset");
	inputBox = document.FormName.inputBox;
	listBox = document.getElementById("listBox");

	document.FormName.radiogroup[0].onclick = function() {
		hiddenFieldset.style.display = "block";
	}
	document.FormName.radiogroup[1].onclick = function() {
		hiddenFieldset.style.display = "none";
	}

	hiddenFieldset.style.display = "none";
	document.getElementById("add").onclick = addOption;
}
//-->
</script>
	</head>

	<body>
		<form id="FormName" action="submit.php" method="get" name="FormName">
			<input type="radio" name="radiogroup" value="yes">Yes <input type="radio" name="radiogroup" value="no" checked>No
			<p>
				<fieldset id="hiddenFieldset">
					<legend>Title</legend>
					<input type="text" name="inputBox" size="24"> <button id="add" type="button">Add ></button>
					<ul id="listBox"></ul>
				</fieldset>
			</p>
		</form>
	</body>

</html>

I have to say, you are good. Could you recommend some books or websites that teach javascript/AJAX?

PS: The only thing is that when I hit enter, it’s not using the add button, it’s trying to submit the whole form. Any idea on how to change that part?

Thanks

Thanks. I just learned it all from the web, couldn’t say one site, just pieced it together. Quirksmode.org is a great reference, and WebMonkey, though old, gave me my start.

On this line, why don’t you have to use getElementById?

inputBox = document.FormName.inputBox;

Check out the minor modifications I made :slight_smile:


<html>
<head>
<style type="text/css" media="screen">
button, input{
    vertical-align: top
}

label#list{
    display: block;
}
</style>
<script type="text/javascript">

lineItem = "<label id=\\"list\\">XXX<input type=\\"hidden\\" name=\\"listBox[]\\" value=\\"XXX\\"> | <a href=\\"#\\" onclick=\\"removeOption(this);return false;\\">delete</a></label>";

function addOption(){
    if(inputBox.value){
	listBox.innerHTML += lineItem.replace("XXX",inputBox.value);
	inputBox.value = "";
    }
}

function removeOption(el){
    el.parentNode.parentNode.removeChild(el.parentNode);
}

window.onload = function(){
    hiddenFieldset = document.getElementById("hiddenFieldset");
    inputBox = document.FormName.inputBox;
    listBox = document.getElementById("listBox");

    document.FormName.radiogroup[0].onclick = function(){
        hiddenFieldset.style.display = "block";
    }

    document.FormName.radiogroup[1].onclick = function(){
        hiddenFieldset.style.display = "none";
    }

    hiddenFieldset.style.display = "none";
    document.getElementById("add").onclick = addOption;
}
</script>
</head>

	<body>
		<form id="FormName" action="submit.php" method="get" name="FormName">
			<input type="radio" name="radiogroup" value="yes">Yes <input type="radio" name="radiogroup" value="no" checked>No
			<p>
				<fieldset id="hiddenFieldset">
					<legend>Title</legend>
					<input type="text" name="inputBox" size="24"> <button id="add" type="button">Add ></button>
					<div id="listBox"></div>
				</fieldset>
			</p>
		</form>
	</body>

</html>