msaz87 Posted November 5, 2010 Share Posted November 5, 2010 Hey All, I'm fairly inexperienced with javascript and jQuery, so hopefully someone can point me in the direction of something to accomplish this... Basically, I'm setting up a form where the user has a textbox to input multiple values one at a time. Each time they hit "add" next to the box, the value is inserted into a hidden input field in the form, added to a text list and the value is cleared from the original text box. To take it a step further, having the ability to delete off each list would be great as well... If anyone can point me in the right direction, I'd greatly appreciate it. Thanks in advance! Quote Link to comment Share on other sites More sharing options...
Adam Posted November 5, 2010 Share Posted November 5, 2010 This is fairly basic and doesn't cover removing elements from the list, but it's a good start to work from: The jQuery: // assign the click event to the button $('#addButton').click(function() { // get the input object var input = $('#addInput'); // create a new hidden input for value $('form[name=listForm]').append('<input type="hidden" name="hiddenList[]" value="' + input.val() + '" />'); // append to the visible list $('#selectedList').append('<br />' + input.val()); // finally clear the value of the input and set focus back input.val('').focus(); }); Demo HTML: <form name="listForm" method="post" action=""> <input type="text" id="addInput" /> <input type="button" id="addButton" value="Add" /> <div id="selectedList"></div> </form> To extend it to be able to remove elements, you'll need to associate each item in the list to the relevant hidden input using a common ID.. Quote Link to comment Share on other sites More sharing options...
Psycho Posted November 5, 2010 Share Posted November 5, 2010 I don't use JQuery, but here is a working example to add elements from a list, add them to a hidden input (I did not make the input hidden in the example for illustrative purposes), and the abilit to clear the values. For each list I used a single hidden input and delimited the values with a pipe (|) although you could use any character or even add a new hidden field for each item. <html> <head> <script type="text/javascript"> function addToList(listID) { var newInputObj = document.getElementById('add'+listID) if(newInputObj.value!='') { //Add value to hidden input var hiddenObj = document.getElementById('hidden'+listID); hiddenObj.value = hiddenObj.value + newInputObj.value + '|'; //Add value to list object var listObj = document.getElementById('list'+listID); var newListItem = document.createElement("LI"); newListItem.innerHTML = newInputObj.value; listObj.appendChild(newListItem); //Clear value and set focus on input newInputObj.value = ''; newInputObj.focus(); } } function clearList(listID) { var listObj = document.getElementById('list'+listID); //Remove all elements from the list while(listObj.childNodes.length>0) { listObj.removeChild(listObj.childNodes[0]); } //Clear the hidden input document.getElementById('hidden'+listID).value = ''; } </script> </head> <body> <table border="1"> <tr> <th>List 1</th><th>List 2</th><th>List 3</th> </tr> <tr> <td style="height:100px;" style="vertical-align:top;"> <ul id="list1"> </ul> </td> <td style="vertical-align:top;"> <ul id="list2"> </ul> </td> <td style="vertical-align:top;"> <ul id="list3"> </ul> </td> </tr> <tr> <td> <form onsubmit="addToList(1);return false" style="margin:0px;"> <input type="text" name="add1" /><br /> <button onclick="addToList(1);">Add</button> <button onclick="clearList(1);">Clear</button> </form> </td> <td> <form onsubmit="addToList(2);return false" style="margin:0px;"> <input type="text" name="add2" /><br /> <button onclick="addToList(2);">Add</button> <button onclick="clearList(2);">Clear</button> </form> </td> <td> <form onsubmit="addToList(3);return false" style="margin:0px;"> <input type="text" name="add3" /><br /> <button onclick="addToList(3);">Add</button> <button onclick="clearList(3);">Clear</button> </form> </td> </tr> <tr> <td> Hidden Input:<br /> <input type="text" name="hidden1" /> </td> <td> Hidden Input:<br /> <input type="text" name="hidden2" /> </td> <td> Hidden Input:<br /> <input type="text" name="hidden3" /> </td> </tr> </table> </body> </html> Quote Link to comment Share on other sites More sharing options...
msaz87 Posted November 5, 2010 Author Share Posted November 5, 2010 Thanks for the help! Quote Link to comment Share on other sites More sharing options...
.josh Posted November 6, 2010 Share Posted November 6, 2010 oh mjdamato...no jquery?? you are missing out...I resisted for so long but when I finally picked it up...my only bitch about it is why oh why did I not pick it up sooner! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.