bind unordered list item after form submitted
Hi,
I use unordered list item (<ul>) to replace select type <select> (select) in my form.
I have problem on bind the value after submit the form. Because <ul> is not a form element.
May i know how should I overcome it?
What i intend to do is similar effect as google contact book:
1. User click ADD button, then <ul> and <textbox> will be appended into the form.
2. After form submitted, user can see what are the value he has entered earlier.
I can bind the textbox, post the unorder list item with hidden element. but i have no clue how to bind the unordered list item..
Kindly refer to my code as below. It is working except cannot bind unordered list item...
p/s: I am using PHP + JQuery.
please help!!
- <?php
print "<pre>";
print_r($_GET);
print_r($_POST);
print "</pre>";
$select = $_POST["hidSelect"];
$text = $_POST["text"];
$totalcount = count($select) - 1;
$implode_text = implode("|%|", $text);
$implode_select = implode("|%|", $select);
?>
<style>
body { font-family:Arial, Helvetica, Sans-Serif; font-size:0.75em; color:#000;}
.desc { color:#6b6b6b;}
.desc a {color:#0092dd;}
.dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; }
.dropdown dd { position:relative; }
.dropdown a, .dropdown a:visited { color:#000000; text-decoration:none; outline:none;}
.dropdown a:hover { color:#000000;}
.dropdown dt a:hover { color:#000000; border: 1px solid #000000;}
.dropdown dt a {background:#FDFDFD url('<?php echo _APP_ICO?>/16x16/ico_desc.png') no-repeat scroll right center; display:block; padding-left:0px; padding-right:0px;
border:1px solid #d4ca9a;}
.dropdown dt a span {cursor:pointer; display:block; padding:1px;}
.dropdown dd ul { background:#D66970 none repeat scroll 0 0; border:1px solid #FDFDFD; color:#C5C0B0; display:none;
left:0px; padding:1px 0px; position:absolute; top:1px; width:auto; min-width:150px; list-style:none;}
.dropdown span.value { display:none;}
.dropdown dd ul li a { padding:5px; display:block;}
.dropdown dd ul li a:hover { background-color:#FDFDFD;}
.dropdown img.flag { border:none; vertical-align:middle; margin-left:10px; }
.flagvisibility { display:none;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
myCallBack("<?=$implode_text;?>", "<?=$implode_select;?>"); // use string because unable to pass array
var counter = 1;
function myCallBack(TextValue, SelectValue)
{
var arrTextValue = TextValue.split('|%|');
var arrSelectValue = SelectValue.split('|%|');
$.each(
arrTextValue,
function( intIndex, objValue ){
if (intIndex > 0)
{
addOption(intIndex, objValue);
}
}
);
}
$("#list dt a").live('click', function(){
$(this).closest("tr").find("#list dd ul").toggle(); // toggle unordered list item
});
$("#list dd ul li").live('click', function(){
var text = $(this).html();
$(this).closest("tr").find("#list dt a").html(text);
$(this).closest("tr").find("#list dd ul").hide();
var hidID = $(this).closest("tr").find("#hidSelect").attr("id");
var selVal = $(this).find("span.value").html();
$(this).closest("tr").find("#hidSelect").val(selVal); // set <li> value into hidden element
});
$(document).bind('click', function(e) {
var clicked = $(e.target);
if (! clicked.parents().hasClass("dropdown"))
$("#list dd ul").hide();
});
$('#text').live('click', function(){
var valString = $(this).val();
});
$('#button').live('click', function(){
counter++;
addOption(counter);
});
function getSelectedValue(id) {
return $("#" + id).find("span.value").html();
}
function addOption(counter, value)
{
if (counter > 5)
{
alert('cannot exceed 5 row');
}
else
{
var html = "<tr>"
+" <td>"
+" <dl id=list class=dropdown name=list[]>"
+" <dt><a href='#'>PLEASE SELECT</a></dt>"
+" <dd>"
+" <ul>"
+" <li id='option1' title=a><a href='#' id=option1>Option 1<span class=value>Option 1</span></a></li>"
+" <li id='option2' title=b><a href='#' id=option2>Option 2<span class=value>Option 2</span></a></li>"
+" <li id='option3' title=c><a href='#' id=option3>Option 3<span class=value>Option 3</span></a></li>"
+" </ul>"
+" </dd>"
+" </dl>"
+" </td>"
+" <td>"
+" <input type=textbox id=text name=text[] value='"+value+"'>"
+" <input type=button id=button value=add>"
+" <input type=hidden id=hidSelect name=hidSelect[]>"
+" </td>"
+"</tr>";
$("#alibaba").append(html);
}
}
});
</script>
<form action='<?php echo $_SERVER["PHP_SELF"];?>' method=post>
<table id=alibaba>
<tr>
<td>
<dl id=list class=dropdown>
<dt><a href='#'>PLEASE SELECT</a></dt>
<dd>
<ul>
<li id="option1" title=a value="option1"><a href='#' id=option1>Option 1<span class=value id=sel1>Option 1</span></a></li>
<li id="option2" title=b value="option2"><a href='#' id=option2>Option 2<span class=value id=sel2>Option 2</span></a></li>
<li id="option3" title=c value="option3"><a href='#' id=option3>Option 3<span class=value id=sel3>Option 3</span></a></li>
</ul>
</dd>
</dl>
</td>
<td>
<input type=textbox id=text name=text[] value="<?php echo $text[0];?>">
<input type=button id=button value=add>
<input type=hidden id=hidSelect name=hidSelect[]>
</td>
</tr>
</table>
<input type=submit value=SUBMIT>
<div id=hidden></div>
</form>