iT邦幫忙

0

PHP AJAX 傳遞value值

  • 分享至 

  • xImage

我有一個下拉選單(selection)
想透過不同選擇AJAX獲取不同資訊如下
1.原始選單
https://ithelp.ithome.com.tw/upload/images/20210412/20134470H6MNTvXcTx.jpg
2.如果選擇自訂名稱則會呼叫ajax.php回傳input格式
https://ithelp.ithome.com.tw/upload/images/20210412/201344709j3FU4cUr0.jpg
3.如果是選擇其他選項則直接使用該option value的值
https://ithelp.ithome.com.tw/upload/images/20210412/201344709duwvE1swT.jpg

選單頁程式碼如下:

<?
//執行新增的動作	
if(isset($_POST["action"])&&($_POST["action"]=="join")){
	
//如果是自訂名稱則出現input text文字輸入框(name="vclass2") 

//問題出在這裡抓不到$_POST["vclass2"]的值我只抓得到$_POST["vclass"]的值
//代表AJAX回傳的input text文字輸入框我輸入任何值都沒辦法正確的把值POST出去

if($_POST["vclass"]=="new"){$vlacs=$_POST["vclass2"];}else{$vlacs=$_POST["vclass"];}	
//我希望的正確顯示方式是:如果自訂名稱則打出來後的值是$_POST["vclass2"]然後新增到資料庫中,如果是其他已經有的項目則直接使用該值存到資料庫


//新增到類別表單
	$query_insert = "INSERT INTO  `class` (`classnid`,`cpid`,`vdnid`,`cvdname` ,`classname` ,`cdate` ,`cdates`,`ranges` ,`ranged`,`pd`,`taxr`)
    VALUES ('".$_GET["id"]."',$mid, '".$row_vde["vdnid"]."', '".$vdn."',  '".$vlacs."',  '".$_POST["date"]."',  '".$cymd."',  '".$_POST["ranges"]."',  '".$_POST["ranged"]."',  '$cpd',  '".$_POST["taxr"]."')";
    mysql_query($query_insert);
    
    
    }



?>
 <form action="" method="POST" name="formJoin" id="demo" onSubmit="return checkForm();">
 <select class="pretty-select" name="vclass" id="vclass"  onchange="showUser(this.value)">
       <option selected>-請選擇-</option>
						
	<option  value="new">自訂名稱</option>
	
<option value="鋼鐵工程">鋼鐵工程</option>
			
                            </select>
			  
                
       
			   <div class="container">
               <div  id="txtHint">

                //這裡是顯示ajax.php回傳的結果
               </div></div>

<input name="action" type="hidden" id="action" value="join">
            <input type="submit" name="Submit2" value="送出">
		  	
          </p>
        </form>




<script type="text/javascript">
		
		
	   function showUser(str) {
  if (str == "") {
    document.getElementById("txtHint").innerHTML = "";
    return;
  } else {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("txtHint").innerHTML = this.responseText;
      }
    };
    xmlhttp.open("GET","ajax.php?q="+str,true);
    xmlhttp.send();
  }
}


        </script>

ajax.php程式碼如下:


<?php
header("Content-Type: text/html; charset=utf-8");
require_once("mysql.php");

$q = $_GET['q'];
if($q=="new"){
echo "<input  class=pretty-input name=vclass2 type=text  id=vclass2 ></input>";
}
?>

今天問題是我from POST出去後只抓得到name="vclass"的值 但抓不到AJAX回傳自訂的值(name="vclass2") 請問哪裡出現了問題呢?

看更多先前的討論...收起先前的討論...
archer9080 iT邦研究生 3 級 ‧ 2021-04-12 14:45:45 檢舉
可能我見識太淺
整篇看起來怪怪的
但光attribute不加引號是正常的嗎@@
yhn2880 iT邦新手 5 級 ‧ 2021-04-12 14:49:33 檢舉
我測試如果透過echo 不加引號才會正常顯示耶 反而加上後會跑出錯誤
ccutmis iT邦高手 2 級 ‧ 2021-04-12 15:20:31 檢舉
echo 後面的字串不是不加引號才會正常 是你要在適當的地方加上跳脫符號
例如:
echo "<input class=\"pretty-input\" ...略>"
輸出結果:
<input class="pretty-input" ...略>

如果attribute內容只有一個值那有沒有用引號框起來結果是一樣的(例如class=aaa等同class="aaa") 但如果裡面的值有兩個或以上,就需要用引號框起來(例如class="aaa bbb")
yhn2880 iT邦新手 5 級 ‧ 2021-04-12 15:24:54 檢舉
但引號加上後還是無法讀取到正確的value值耶 (input name="vclass2" value)我在想問題會不會在其他地方
ccutmis iT邦高手 2 級 ‧ 2021-04-12 17:19:14 檢舉
input tag ...它的值帶入是用類似:
<input type="text" value="這是代入值的地方" ...略 />
如果是在 php裡面要echo出來就變成:
echo "<input type=\"text\" value=\"這是代入值的地方\" ...略>";
建議先打好html跟 http request基礎 再碰ajax
註: 有些html元素是只有開始標籤沒有結束標籤的(叫作空標籤),像img,br, input 都是,exam: <img src="..." /><br /> <input type="text" value="代入值的地方" />
小魚 iT邦大師 1 級 ‧ 2021-04-12 20:03:26 檢舉
是我對Ajax的理解錯誤嗎?
Dion iT邦新手 5 級 ‧ 2021-04-13 07:13:15 檢舉
這原始碼怎麼我複製貼上實際測試看POST是有送出去的?
yhn2880 iT邦新手 5 級 ‧ 2021-04-13 08:55:39 檢舉
你是用自訂名稱的欄位打上post後有正確的送出值嗎?
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

2
㊣浩瀚星空㊣
iT邦大神 1 級 ‧ 2021-04-13 09:07:55
最佳解答

今天問題是我from POST出去後只抓得到name="vclass"的值 但抓不到AJAX回傳自訂的值(name="vclass2") 請問哪裡出現了問題呢?

你要注意一個問題,AJAX的請求是非同步的。所以會有時間差的問題。
如果你是在AJAX後馬上要送值或取值。一般不會立即拿到的。

改善的做法有兩個
1.確保回應成功後再做處理,一般建議用BACKCALL的做法來處理。
2.加上時間計時器,延後取值或送值的時間。(不太建議的做法)

我要發表回答

立即登入回答