JS傳值至HTML表單

php js html ajax

dawnchu 2019-12-18 11:27:29 ‧ 6876 瀏覽

<?php
	$query = "select * from event";
	$result = $link->query($query);
	$rows = $result->fetchAll();
	foreach($rows as $row)
	{
  	print "<tr><td>".$row['sn']."</td>".
           "<td>".$row['EID']."</td>".
           "<td>".$row['vName']."</td>".
           "<td>".$row['vStart']."</td>".
           "<td>".$row['vEnd']."</td>".
           "<td>".$row['vState']."</td>".
           "<td>".$row['LastUpdateId']."</td>".
           "<td>".$row['LastUpdateTime']."</td>".                                    
           "<td><a href='edit.html?sn=".$row['sn']."&eid=".$row['EID']."&vname=".$row['vName']."&vstart=".$row['vStart'].
										"&vend=".$row['vEnd']."&vstate=".$row['vState']."&lastupdateid=".$row['LastUpdateId'].
										"&lastupdatetime=".$row['LastUpdateTime']."'>"."編輯"."</a></td></tr>";
  }
echo "</table>";   
$link=null; //結束與資料庫連線
?>

<!DOCTYPE html>

<html>

  <script type="text/javascript">
    
     
    //URL
    var url = decodeURI(location.href);
    alert(url);
    //取得問號之後的值
    var temp = url.split("?");
	
    //將值再度分開
    var vars = temp[1].split("&");
    
    var vars0= vars[0].split("=");
    var vars1= vars[1].split("=");
    var vars2= vars[2].split("=");
    var vars3= vars[3].split("=");
    var vars4= vars[4].split("=");
    var vars5= vars[5].split("=");
    var vars6= vars[6].split("=");
	var vars7= vars[7].split("=");
	
   /* function process(){
    var name_element=document.getElementById('var[0]')
    var name=name_element.value;
    alert('結果'+name+);}
   */
  </script>



<head>
    <title></title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="../css/bootstrap-responsive.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../js/bootstrap.js"></script>
    <script type="text/javascript" src="../js/ckform.js"></script>
    <script type="text/javascript" src="../js/common.js"></script>

 
    <style type="text/css">
        body {
            padding-bottom: 40px;
        }
        .sidebar-nav {
            padding: 9px 0;
        }

        @media (max-width: 980px) {
            /* Enable use of floated navbar text */
            .navbar-text.pull-right {
                float: none;
                padding-left: 5px;
                padding-right: 5px;
            }
        }


    </style>
</head>
<body>
<form action="edit.php" method="post" class="definewidth m20">
    <table Id="agent" class="table table-bordered table-hover definewidth m10">
        <tr>
            <td class="tableleft">SN</td>    
            <td><input type="text" id="sn" name="sn"  value=""></td>
        </tr>
        <tr>
            <td class="tableleft">事件編號</td>
            <td><input type="text" id="eid" name="eid" value=""></td>               
        </tr>
        <tr>
            <td class="tableleft">事件名稱</td>
            <td><input type="text" id="vname" name="vname" value=""></td>
        </tr>
        <tr>
            <td class="tableleft">開始時間</td>
            <td><input type="text" id="vstart" name="vstart" value=""></td>
        </tr>
        <tr>
            <td class="tableleft">結束時間</td>
            <td><input type="text" id="vend" name="vend" value=""></td>
        </tr>
        <tr>
            <td class="tableleft">狀態</td>
            <td>
                <input type="radio" id="vstate" name="vstate" value="Enable" selected=\"selected\"> 啟用
                <input type="radio" id="vstate" name="vstate" value="Disable" selected=\"selected\"> 禁用
            </td>
        </tr>
        <tr>
            <td class="tableleft">最後更新人員</td>
            <td><input type="text" id="lastupdateid" name="lastupdateid" value=""></td>
        </tr>
        <tr>
            <td class="tableleft">最後更新時間</td>
            <td><input type="text" id="lastupdatetime" name="lastupdatetime" value=""></td>
        </tr>
        <tr>
            <td class="tableleft"></td>
            <td>
                <button type="submit" class="btn btn-primary" type="button">保存</button>				 
				&nbsp;&nbsp;
				<button type="button" class="btn btn-success" name="backid" id="backid" onclick="location.href='index.php'">返回列表</button>
            </td>
        </tr>
    </table>
</form>
</body>
</html>
<script>
    $(function () {       
		$('#backid').click(function(){
				window.location.href="index.php";
		 });
     
     document.getElementById("sn").value=vars0[1]; 
     document.getElementById("eid").value=vars1[1];        
     document.getElementById("vname").value=vars2[1];
     document.getElementById("vstart").value=vars3[1];
     document.getElementById("vend").value=vars4[1];
     document.getElementById("status").value=vars5[1];
     document.getElementById("lastupdateid").value=vars6[1];
	 document.getElementById("lastupdatetime").value=vars7[1];
     
    });
</script>

第一個程式碼是顯示資料庫內容
按下編輯後會至第二個程式碼
我想藉由網址的值預先填入HTML的表單內
但是表單內都沒有接收到
網址值確定是有抓到的
麻煩各位高手幫忙了..
看看是哪邊有寫錯

看更多先前的討論...收起先前的討論...

listennn08 iT邦高手 5 級 ‧ 2019-12-18 11:35:56 檢舉

是要用GET嗎

小魚 iT邦大師 1 級 ‧ 2019-12-18 11:47:47 檢舉

我怎麼看不懂你要做甚麼...

ccutmis iT邦高手 2 級 ‧ 2019-12-18 11:48:11 檢舉

建議事項::::
1.先用console.log(vars0[1]); //確認變數內容無誤
如果變數內容有問題可以參考這個
https://www.sitepoint.com/get-url-parameters-with-javascript/

2.既已用jquey，那就把
document.getElementById("sn").value=vars0[1];
改成
$("#sn").val(vars0[1]);