2017-09-30 22 views
0

編輯:我應該提到的形式提交手工精細,但使用JavaScript好像沒有什麼改變提交表單並重定向不工作

我試圖讓一個表單自動提交頁面加載,然後重定向用戶。原因是這是一個PHP頁面的一部分,數據需要進入我的數據庫,然後將變量POST到第三方SMS平臺,然後返回到用戶儀表板。

我的形式如下:

<html> 
    <form action="https://www.example.com" id="myForm" method ="POST"> 
     <input type="hidden" name="apiKey" value="withheld"> 
     <input type="hidden" name="message" value="<?php echo $club_name ?> have requested you to play for them this weekend. Please login to your account to see more information and accept."> 
     <input type="hidden" name="to" value="<?php echo $to ?>"> 
     <input type="hidden" name="from" value="withheld"> 
     <input type="submit" name="submit" id="submit" value="Submit"> 
    </form> 
</html> 

這似乎很好地工作,所以我假定JavaScript是不正確是:

<script> 
document.getElementById('myForm').submit(); 
    window.location.replace("https://www.example.com"); 
</script> 
+0

你在哪裏放了腳本?你檢查控制檯是否有錯誤? – adeneo

+0

什麼實際上不能在你的代碼中工作?我猜重定向。您正在提交表單,然後獲取服務器響應,這是一種重定向。當任何服務器調用處於掛起狀態時,對位置對象的更改將被瀏覽器阻止。 – Teemu

+0

沒有意識到,所以謝謝你Teemu - 但形式本身不會提交這令我很沮喪。 – Rockhopper

回答

2

你必須使用不同的名稱 名= 「提交」 由於所有名稱屬性都設置爲表單上的屬性,所以 因此覆蓋表單上的默認「提交」屬性, 並且默認的表單方法「submit()」已不存在。

https://developer.mozilla.org/de/docs/Web/API/HTMLFormElement 「命名輸入被添加到他們的主人形式實例作爲屬性,如果它們共享相同的名字可以覆蓋本機屬性(例如用輸入命名動作的形式將其行動返還財產是輸入代替表單的動作HTML屬性)「。

+0

謝謝你這種「工作」,頁面現在重定向,這是完美的,但表格仍然不提交。 – Rockhopper

+0

我的猜測:對於瀏覽器來說,兩條線都是網絡請求,並且和往常一樣(並且通常如預期的那樣,例如當您點擊鏈接並且稍後在相同頁面上的另一鏈接上時),第一請求被取消且僅第二個是執行。 AFAIK有2個選擇:1)提交目標必須做重定向。 2)不要提交,而是通過ajax在ajax return上發佈數據,簡單地忽略結果並進行重定向。 –

0

在你的代碼window.location.replace("https://www.example.com");行不會有意義,因爲submit()函數會嘗試提交表單並且會改變頁面,然後替換函數將阻止提交表單並重定向頁面。通過js做到這一點的正確方法是,通過ajax提交表單並在Ajax運行成功回調中document.getElementById('myForm').submit()