iT邦幫忙

0

php網站input送出後沒有任何反應

不明 2021-06-07 18:48:41436 瀏覽

大家好:
目前正在學習並練習php程式語言的開發,並練習試著做出一個簡單的線上預約系統的主題式網站,但是我做到(立即預約的功能:資料庫原本就有的紀錄,立即預約功能是更新資料庫原有的紀錄)。
但是為什麼立即預約的input按鈕按下去沒有任何反應?
我已經確認前端axios data傳送方式無誤,後端php程式也執行正常
希望可以尋求大家的協助!!
網站載圖圖片
https://ithelp.ithome.com.tw/upload/images/20210607/20138217O5UPdDCNgK.png
網頁中的立即預約按下去按鈕(執行後端php sql update)沒有任何反應

doselect.js 這是我前面選擇預約選項的網頁撰寫語法

import showInsertPage from './showInsertPage.js';
export default function doselect(){
    axios.post(`../admin/index.php?action=doselectcon`)
    .then(res => {
               let response = res['data'];
                let ans = response['result'];
                let str = `<table>`;
                str += `<tr>`;
                str += `<br>`+`<td>` +``+ `</td>`;
                str += `<td>` +`編號`+ `</td>`;
                str += `<td>` +`手機門號`+ `</td>`;
                str += `<td>` +`預約人`+ `</td>`;
                str += `<td>` +`聯繫方式` + `</td>`;
                str += `<td>` +`申辦方式` + `</td>`;
                str += `</tr>`;
                ans.forEach(element => {
                    str += `<tr>`;
                    str+=`<td>`+`<input type="radio" value="`+element["id"]+`" id="id" name="id">`+`</td>`;
                    str += `<td>` + element['id'] + `</td>`;
                    str += `<td>` + element['phonenumber'] + `</td>`;
                    str += `<td>` + element['name'] + `</td>`;
                    str += `<td>` + element['contact'] + `</td>`;
                    str += `<td>` + element['ways'] + `</td>`;
                });
                str += `</tr>`;
                str += `</table>`;
                str+=`<br>`+`<input type="button" value="我要預約" id="insert">`;
                str += `<p>` +`熱門門號需預約後,等待系統通知您進行正式申辦的程序!!`+ `</p>`;
                $(`#ans`).html(str);
                $(`#insert`).click(function(){
                    showInsertPage();
                });
    });

}
export { doselect };

showInsertPage.js

import doinsert from './doinsert.js';
export default function showInsertPage(){
    let data = {
        "id": $("input[name=id]:checked").val(),
    };
    axios.post("../admin/index.php?action=doselectcon",Qs.stringify(data))
    .then(res => {
        let response=res['data'];
        let ans=response["result"];  
        let rows=ans[0];
    let str =`<br>`+`編號:<input type="text" name="id" id="id" value="`+rows["id"]+`"><br>`;
    str += `門號:<input type="text" id="phonenumber" name="phonenumber" value="`+rows["phonenumber"]+`"><br>`;
    str += `姓名:<input type="text" id="name"><br>`;
    str += `聯繫方式:<select name="con" id="con"><option value="電話">電話</option><option value="手機">手機</option><option value="電子信箱">電子信箱</option></select><br>`;
    str += `申辦方式:<select name="reg" id="reg"><option value="線上辦理">線上辦理</option><option value="現場辦理">現場辦理</option><option value="電話辦理">電話辦理</option></select><br>`;
    str +=`<br>`+`<input type="button" value="立即預約" id="doinsert">`
    str += `<div id="ans"></div>`
    str += `<p>` +`手機門號線上預約登記表`+ `</p>`;
        $("#ans").html(str);
        $("#doinsert").click(function(){
                    doinsert();
        });
    })
    .catch(err => {
        console.error(err); 
    })
  
  
    } 
 export { showInsertPage };

doinsert.js


export default function doinsert() {
    let data = {
        "id": $("input[name=id]:checked").val(),
        "name": $("#name").val(),
        "con": $("select[name=con]").val(),    
        "reg": $("select[name=reg]").val()
    };
    axios.post("../admin/index.php?action=doinsert",Qs.stringify(data))
    .then(res => {
        let response = res['data'];
        $("#ans").html(response['message']);
    })
    .catch(err => {
        console.error(err); 
    })
}
export { doinsert };
`````````````````````````````````
doinsert.php
`````````````````````````````````
<?php
    require_once './mysql.inc.php';
    function doinsert(){
    $response = openDB();
    if($response['status']==200) {
    $id = $_POST['id'];               
    $name = $_POST['name'];
    $con = $_POST['con'];    
    $reg = $_POST['reg'];
    $conn=$response['result'];
    $sql = "UPDATE `numberphone` SET `name` = ?, `contact` = ?, `ways` = ? WHERE `numberphone`.`id` = ?";
    $stmt = $conn->prepare($sql);
    $result = $stmt->execute(array($name,$con,$reg,$id));
    if($result) {
        $count = $stmt->rowCount();
      if($count<1){
            $response['status'] = 500; 
            $response['message'] = "門號預約失敗!!";
      }
      else{
            $response['status'] = 200; 
            $response['message'] = "門號預約成功!!";
      }
    }
    else {
       $response['status'] = 400; 
       $response['message'] = "SQL連線或設定錯誤";
    }
} 
echo json_encode($response);
    }
?>
0
小魚
iT邦大師 1 級 ‧ 2021-06-07 19:20:12

你確定有跑到後端嗎?
所以得到的回應是甚麼?

看更多先前的回應...收起先前的回應...
不明 檢舉

但是立即預約的imput button按鈕按下去沒有任何反應
問題在於showInsertPage.js
立即預約的imput button按鈕沒有反應,
導致我input欄位所輸入的資料無法傳送到後端去

小魚 iT邦大師 1 級 ‧ 2021-06-07 19:50:38 檢舉

我沒看到所以不是很確定,
不過你的這一段為什麼不另外寫呢?

$("#doinsert").click(function(){
  doinsert();
});

是不是應該要拉出來放在document.ready之類的地方,
我還沒把這種事件放在function裡面過...

不明 檢舉

因為學校目前教到php網站程式設計
老師希望我們先透過這種方式來開發php網站

小魚 iT邦大師 1 級 ‧ 2021-06-07 20:22:29 檢舉

你先想辦法釐清問題出在哪個步驟吧...
說了半天我看到的都是你覺得...

不明 檢舉

問題內容我更新了網頁圖片載圖
問題在於網頁中的立即預約按下去按鈕(執行後端php sql update)沒有任何反應

小魚 iT邦大師 1 級 ‧ 2021-06-07 21:51:11 檢舉

問題不是這個,
問題是你要找出錯誤出在哪一行的哪個地方.

不明 檢舉

但是我確認過前端和後端程式語法撰寫
瀏覽器開發人員工具沒有出現任何錯誤訊息
後端php也沒有出現任何錯誤訊息
沒辦法找出來錯誤出在哪一行

小魚 iT邦大師 1 級 ‧ 2021-06-07 23:12:36 檢舉

所以就是要看功力了,
console.log
echo + exit
errorlog
全部都來吧...
如果是錯在php而且看的到log的話,
應該會比較好找.

0
Peter學程式
iT邦新手 1 級 ‧ 2021-06-07 19:37:29

不專業猜測:
我在想可能是因為事件處理器沒有被正確的註冊?
因為你的 Form 表單是在呼叫 doselectcon 才插進網頁的,事件處理器的註冊方法可能要換一下。

但我自己沒在寫 Jquery ,猜錯的話鞭小力點 XD

不明 檢舉

但是我的form表單有接收到/admin/index.php?action=doselectcon
傳過來的資料

0
japhenchen
iT邦大師 1 級 ‧ 2021-06-08 08:41:37

更正....因為doinsert是在JS內產生,所以要在加入元素後再綁定事件,用ON

showInsertPage.js改一下

        $("#ans").append($(str));
        $("#ans").on("click","#doinsert",(function(){
                    doinsert();
        });
看更多先前的回應...收起先前的回應...

有更正做法

淺水員 iT邦研究生 2 級 ‧ 2021-06-08 10:04:23 檢舉

他有註冊事件吧?有寫到:

$("#ans").html(str);
$("#doinsert").click(function(){
    doinsert();
});

其實我把他用 axios 抓後端資料的部分先註解掉
改用 Promise.resolve 餵假資料後
可以正常執行

不明確click事件是否會被綁定在.html(str)產生出來的HTML裡,所以我才會用on讓這個事件持續監聽

這裡有討論,對於動態產生的HTML元素,你該用的是on("click"而不是click(

https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements

Explanation:

This is called event delegation and works as followed. The event is attached to a static parent (staticAncestors) of the element that should be handled. This jQuery handler is triggered every time the event triggers on this element or one of the descendant elements. The handler then checks if the element that triggered the event matches your selector (dynamicChild). When there is a match then your custom handler function is executed.

淺水員 iT邦研究生 2 級 ‧ 2021-06-08 12:22:03 檢舉

查了幾篇類似的討論
之所以會用 on 是因為想要統一在一開始就註冊事件的監聽
而 on 允許第二個參數作為 selector 去檢查發出事件的子元素是否符合目標

這樣的寫法的確比較簡潔
但發問者的寫法目前我看不到會發生錯誤的地方

除非 $("#ans").html(str); 執行完後不能保證元素還沒建立好
不然發問者的寫法執行上應該是沒問題的

PS. 這篇 在下面也是有對動態元素使用 click 添加事件的寫法,重點是要放在哪個地方。

或是請樓主把click(換成on(看看會不會因此解決問題,如果是,那就有可能在html()的過程中沒有把click綁定上去

1

首先,我不認為你老師會教你將樣式寫在程式內輸出。
再來,控制及程式在內容輸出就是一個很不智的行為。
理論上你得要做監控處理,並將元件事件註冊好才對。

最後 japhenchen 已經有提到了其中一點,註冊好對應事件處理。

總之...我提醒你。
你那按鍵沒有作用是很正常的一件事。
因為你只是輸出文字生成樣式出來。
然後生成像程式碼的文字。

因為不是程式,自然就不會給你有任何作用。

我要發表回答

立即登入回答