作者 主題: select 表單 vs javascript 心得  (閱讀 5363 次)

0 會員 與 1 訪客 正在閱讀本文。

dark

  • 俺是博士!
  • *****
  • 文章數: 1581
    • 檢視個人資料
select 表單 vs javascript 心得
« 於: 2006-05-14 01:18 »
花了一天時間在這個部分
快一年沒碰電腦還答應幫忙寫程式 ... 趕快貼上心得 ... 好方便下次搜尋  :roll:

直接貼 PHP 跑完的結果

1. 為了讓 javascript 處理 , select 名稱不為陣列
但 php 接收時要陣列才可全數接收, 所以在 submit 前
更改 select.name="selectname[]"

2. 當 select 以 id.innerHTML 方式動態呈現時 , option 必須為 selected 才可取出值

代碼: [選擇]
<html><script type="text/javascript">
window_size_x=550;
window_size_y=300;
for(i=0;i<=0;i++){window_size_x=window_size_x-1;
window_size_y=window_size_y-1;
resizeTo(window_size_x,window_size_y);
}

</script>
<form name="send_msg_form_default" action="." method="POST">
<table><tr>






<td>
<script type="text/javascript">aa='全部寄出';
af='所有朋友';
as='所有同學';
a001='我的群組';
</script><select size="5" name="tmp_title_select" multiple style="font-size: 15pt" ONDBLCLICK="add_action()"><option value="aa">全部寄出</option><option value="af">所有朋友</option><option value="as">所有同學</option><option value="a001">我的群組</option><option value="user_no_modify">     </option></select><script type="text/javascript">

//  搬到最底  因為不能在 tmp_option 之前

</script>
</td>








<td><font size="14pt" color="blue">+</font></td>










<td>
<textarea rows="5" cols="12" style="font-size: 15pt" name="persons_number"  onkeyup="check_input_numbers_is_phone(this.value)"></textarea>

<script type="text/javascript">
function check_input_numbers_is_phone(input_all_numbers){
var j=1;
var last_ok_numbers="";
var output_is_ok_numbers="";
for(var i=0;i<input_all_numbers.length;i++){
if((input_all_numbers.charCodeAt(i)<58)&&(input_all_numbers.charCodeAt(i)>47)){
if(j==1 && input_all_numbers.charCodeAt(i)!=48){
continue;
}
if(j==2 && input_all_numbers.charCodeAt(i)!=57){
continue;
}
last_ok_numbers=output_is_ok_numbers;
output_is_ok_numbers=output_is_ok_numbers+input_all_numbers.charAt(i);
j++;
if(j==11){
output_is_ok_numbers=output_is_ok_numbers+"\n";
j=1;
}
}
}
document.send_msg_form_default.persons_number.value=output_is_ok_numbers;
}


</script>
</td>












<td><font size="14pt" color="blue">=</font></td>






<td><span id="tmp_option"></span></td>











</tr><tr>
<td colspan="5">

<table><tr>



<td rowspan="2">&nbsp;取<br>&nbsp;消<br>
<input type="button" value="<=&nbsp;" onclick="go_submit('back')"><br>&nbsp;返<br>&nbsp;回
</td>




<td rowspan="2">          
     
<textarea name="Input_Msg" disabled rows="6" cols="30" maxlength="130" scroll="no" style="BORDER-TOP-WIDTH: 0px; TABLE-LAYOUT: fixed; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; OVERFLOW: hidden; COLOR: rgb(0,0,0); BACKGROUND-COLOR: rgb(0,255,255); BORDER-RIGHT-WIDTH: 0px"></textarea>

</td>



<td> <input type="button" value="增加" onclick="add_action('phone_text')">  <input type="button" value="刪除" onclick="del_action()">  <input type="button" value="確定名單" onclick="go_submit('modify_ok')"></td>

</tr><tr><td>



<input type="text" name="ask_user_info_tmp" size="20">
<input type="button" value="搜尋" name="B1" onclick="ask_user_info_function()"></td>



</tr></table>





</td></tr></table>
<input type="hidden" name="what_to_do">
</form>






<form name="ask_tmp" action="." method="POST" target="_blank">
<input type="hidden" name="ask_user_info">
</form>

<script type="text/javascript">
function ask_user_info_function(){
document.ask_tmp.ask_user_info.value=document.send_msg_form_default.ask_user_info_tmp.value;
document.ask_tmp.submit();
}
</script>





<script type="text/javascript">


function go_submit(inputx){
if(inputx == "back"){
document.send_msg_form_default.what_to_do.value="";
document.send_msg_form_default.now_modify_list.value="";  // 有用嗎??
document.send_msg_form_default.Input_Msg.disabled=false;
document.send_msg_form_default.submit();
}else if(inputx == "modify_ok"){
document.send_msg_form_default.Input_Msg.disabled=false;


var count=document.send_msg_form_default.now_modify_list.length;
for( var i = 0; i < count; i++ ){
document.send_msg_form_default.now_modify_list[i].selected=true;
}
document.send_msg_form_default.now_modify_list.name='now_modify_list[]';


document.send_msg_form_default.submit();
}

}
</script>


















<script type="text/javascript">

/*
1. get_title_select() 欲加入之選取群組 ----- 傳入 無  
2. get_textarea_phones() 欲加入之個別電話
3. get_now_list() 現在已經加入之列表
4. get_now_list_select()  欲刪除之選擇 (動態下拉選單若不選取 value= NULL)
5. add_action(input_str) == ( 1 + 2 - 3 )  其實是 ( 1 + 2 - 3 )+3   input_str=phone_text||無
6. del_action() == ( 4 - 3 )
7. make_tmp_option_innerhtml()  製作動態下拉選單 ----- 傳入 input_str [x,y,z,]  傳出直接製作

add 動作 : doubleclick , 增加 :
1 -> 2 -> 3 -> 5( 1 + 2 - 3 ) -> 7

del 動作 :
4 -> 3 -> 6( 4 - 3 ) -> 7
*/



/**/
function get_title_select(){

return_str="";

for( var i = 0; i< document.send_msg_form_default.tmp_title_select.length; i++ ) {
if(document.send_msg_form_default.tmp_title_select[i].selected && document.send_msg_form_default.tmp_title_select[i].value != "user_no_modify"){
return_str=document.send_msg_form_default.tmp_title_select[i].value+","+return_str;
}
}
for(i=0;i<document.send_msg_form_default.tmp_title_select.length;i++){
document.send_msg_form_default.tmp_title_select[i].selected=false;
}
return return_str;
}





function get_textarea_phones(){

all_phones="";

phones=document.send_msg_form_default.persons_number.value.split("\r\n");  // 多換行字元

for(i=0;i<phones.length;i++){
if(phones[i].length == 10) all_phones=phones[i]+","+all_phones;
}
document.send_msg_form_default.persons_number.value="";

return all_phones;
}





function get_now_list(){

now_list="";

for(i=0;i<document.send_msg_form_default.now_modify_list.length;i++){
document.send_msg_form_default.now_modify_list[i].selected=true;
if(document.send_msg_form_default.now_modify_list[i].value != "user_no_modify" && document.send_msg_form_default.now_modify_list[i].value != ""){
now_list=document.send_msg_form_default.now_modify_list[i].value+","+now_list;
}
}
return now_list;
}





function get_now_list_select(){
select_to_del="";
for(i=0;i<document.send_msg_form_default.now_modify_list.length;i++){
if(document.send_msg_form_default.now_modify_list[i].selected && document.send_msg_form_default.now_modify_list[i].value != "user_no_modify" && document.send_msg_form_default.now_modify_list[i].value != ""){
var select_to_del=document.send_msg_form_default.now_modify_list[i].value+","+select_to_del;
}
}
return select_to_del;
}





function add_action(input_str){
str_1="";
str_2="";
str_3="";
no_match_str="";
str_1=get_title_select();
if(input_str=="phone_text") str_2=get_textarea_phones();
str_3=get_now_list();
str_1_add_2=str_1+str_2;

str_1_add_2_array=str_1_add_2.split(",");

for(i=0;i<str_1_add_2_array.length;i++){
if(! str_3.match(str_1_add_2_array[i])) no_match_str=str_1_add_2_array[i]+","+no_match_str;
}
make_tmp_option_innerhtml_str=no_match_str+str_3;
make_tmp_option_innerhtml(make_tmp_option_innerhtml_str);
return 0;
}





function del_action(){
str_4=get_now_list_select();
str_3=get_now_list();
no_match_str="";
str_3_array=str_3.split(",");

for(i=0;i<str_3_array.length;i++){
if(! str_4.match(str_3_array[i]) && str_3_array[i] != "") no_match_str=no_match_str+","+str_3_array[i];
}

make_tmp_option_innerhtml(no_match_str);
return 0;
}





function make_tmp_option_innerhtml(input_str){
option_str_first='<select size="5" name="now_modify_list" ONDBLCLICK="del_action()" multiple style="font-size: 15pt">';
option_str_end='<option value="user_no_modify">     </option></select>';
option_str_between='';


all_var=input_str.split(",");
for(i=0;i<all_var.length;i++)
if(all_var[i].substring(0,2) == "09"){
option_str_between='<option value="'+all_var[i]+'">'+all_var[i]+'</option>'+option_str_between;

}else if(all_var[i] != ""){
option_str_between='<option value="'+all_var[i]+'">'+eval(all_var[i])+'</option>'+option_str_between;
}

option_str_all=option_str_first+option_str_between+option_str_end;
tmp_option.innerHTML=option_str_all;
}

tmp_option.innerHTML='<select size="5" name="now_modify_list" ONDBLCLICK="del_action()" multiple style="font-size: 15pt"><option value="user_no_modify">     </option></select>';


</script>




寫法非常不正規 ..... 怕下次搜尋到自己也看不懂

herolin

  • 可愛的小學生
  • *
  • 文章數: 3
    • 檢視個人資料
select 表單 vs javascript 心得
« 回覆 #1 於: 2006-12-18 07:55 »
select.name="selectname[]"
這招真是酷呀!!

給你拍拍手!!