iT邦幫忙

2

如何確保 change 事件完成後才送出表單

<form action='' method='POST' id='myForm'>
	<input type='text' name='aaa' id='aaa' />
	<input type='text' name='output' id='output' />
	<input type='submit' name='one' value='按鈕01' />
	<input type='submit' name='two' value='按鈕02' />
</form>

我在此表單內的 aaa 欄位輸入數據後,用 change 事件來計算並設定 output 欄位的值,然後在送出表單後會用 PHP 判斷按下的是哪個送出按鈕,再對 output 欄位的值做不同的計算。

通常會在 aaa 欄位輸入完數據後,在空白處點一下離開該元素,等 change 執行完成並設定好 output 欄位的值之後再去按送出按鈕。

但如果有使用者在 aaa 欄位一輸入完數據,就直接去按送出按鈕,想請問:

  1. 瀏覽器會保證 output 欄位的值是在設定完成之後才送出表單嗎?

  2. 如果 change 事件內有用到 ajax 計算 output 欄位的值的話,如何保證 ajax 設定完成 output 欄位的值之後才送出表單?

謝謝!

以下是 javascript 程式碼

'use strict';
var aaa = document.getElementById('aaa'),
	output = document.getElementById('output'),
	myForm = document.getElementById('myForm');
function fn_change(){
	var ajax = new XMLHttpRequest();
	ajax.onreadystatechange = function(){
		if( ajax.readyState !== 4 ){ return; }
		if( ( ajax.status >= 200 && ajax.status < 300 ) || ajax.status == 304 ){
			output.value = aaa.value + ajax.responseText;
		}
		else{
			alert( 'ajax 回傳錯誤: ' + ajax.statusText );
		}
	};
	ajax.open('POST', 'ajax-data.php', true);
	ajax.send(null);
}

aaa.onchange = fn_change;

2 個回答

1
froce
iT邦新手 3 級 ‧ 2017-11-14 16:34:19
最佳解答

1.你要這樣的話,可以不要使用submit button,利用一般button寫完處理函式,最後送出。
使用jQuery。

<form action='' method='POST' id='myForm'>
	<input type='text' name='aaa' id='aaa' />
	<input type='text' name='output' id='output' />
	<input type='button' name='one' value='按鈕01' id="b1"/>
	<input type='button' name='two' value='按鈕02' id="b2"/>
</form>
$("#b1").click(function(){
    ...
    ...
    $("#myForm").submit();
});

2.寫在ajax的function裡或是使用promise。

看更多先前的回應...收起先前的回應...
samjam iT邦新手 5 級 ‧ 2017-11-15 14:42:56 檢舉

謝謝 froce 的回答。
我查到這篇說事件順序是 change-->submit,我自己測試 Chrome / IE11 / Firefox57 都會等 change 執行完才送出表單,所以應該瀏覽器會保證 change 事件設定完 output 欄位的值是之後才送出表單,這樣我的問題1應該算是解決了。
http://blog.csdn.net/cui_angel/article/details/7721617

samjam iT邦新手 5 級 ‧ 2017-11-15 14:45:20 檢舉

但問題2如果 change 事件內用 ajax 來設定 output 欄位的值(我有補充我的 javascript 程式碼在問題內),如果 aaa 欄位輸入完數據後,先在空白處點一下離開該元素,再按下送出,則都不會有問題。
但如果輸入完數據後直接按下送出,有時會回報錯誤。
要如何確認 ajax 已完成執行呢?

froce iT邦新手 3 級 ‧ 2017-11-15 15:30:04 檢舉

上面有說過啦,promise。
在jQuery裡面是可以寫成

$.ajax().done(fun1).done(fun2)

純javascript我很少寫,你可以去查。

samjam iT邦新手 5 級 ‧ 2017-11-17 10:48:15 檢舉

好的,我知道了,謝謝您

0
fysh711426
iT邦新手 4 級 ‧ 2017-11-14 21:58:05

可以先把按鈕鎖起來,所有欄位都驗證 OK,再把按鈕打開。
/images/emoticon/emoticon01.gif

小魚 iT邦新手 2 級 ‧ 2017-11-15 00:39:11 檢舉

disabled...

samjam iT邦新手 5 級 ‧ 2017-11-17 10:51:30 檢舉

您這方式也是可行的方式,謝謝您

我要發表回答

立即登入回答