SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2006
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

  2. #2
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    182
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    None of what you ask is AJAX, it's just JavaScript, no XMLHTTPRequest is needed. Does this do what you want?

    HTML Code:
    <!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 &gt;</button> <select name="listBox[]" id="listBox" size="4" multiple></select> <button id="remove" type="button">Remove</button>
    				</fieldset>
    			</p>
    		</form>
    	</body>
    
    </html>

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2006
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  4. #4
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    182
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Kinda minor but still doable:

    HTML Code:
    <!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 &gt;</button>
    					<ul id="listBox"></ul>
    				</fieldset>
    			</p>
    		</form>
    	</body>
    
    </html>
    Last edited by funkdaddy; Mar 1, 2007 at 14:55. Reason: Added code to not allow new item if box is blank

  5. #5
    SitePoint Enthusiast
    Join Date
    Jan 2006
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  6. #6
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    182
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by lschmidt View Post
    I have to say, you are good. Could you recommend some books or websites that teach javascript/AJAX?
    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.

  7. #7
    SitePoint Enthusiast
    Join Date
    Jan 2006
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    On this line, why don't you have to use getElementById?

    inputBox = document.FormName.inputBox;

    Check out the minor modifications I made

    Code:
    <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 &gt;</button>
    					<div id="listBox"></div>
    				</fieldset>
    			</p>
    		</form>
    	</body>
    
    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •