小事例

做一个小例子。

在提交表单时，显示等待图标，并把表单中所有的元素置为disabled,提交完毕后恢复状态！

<刚学，写得不成熟>

 

<form method="post" action="http://192.168.0.109:8888/magento/greeting.php" id="test-form" name="test-form"> <div id="div1"> <label for="name">Enter your name:</label> <input id="username" name="username" type="text" /><input id="password" name="password" type="text" /><input id="testbutton" name="testbutton" type="button" value="testbutton" > </div> <div id="loading" style="display:none;" mce_style="display:none;"><img src="/ajax-loader.gif" mce_src="ajax-loader.gif"/></div> <div id="divResult" ></div> </form>

 

Ajax.js

 

Event.observe(window, 'load', init, false); function init(){ Event.observe('testbutton', 'click', replaceDiv); } function disableEnableAll(element, isDisabled) { var descendants = element.descendants(); for (var k in descendants) { descendants[k].disabled = isDisabled; } element.disabled = isDisabled; } function replaceDiv() { var myAjax = new Ajax.Request( 'http://192.168.0.109:8888/magento/greeting.php', { method: 'get', parameters: 'username='+$F('username') , onSuccess:showResponse } ) } function showResponse(response) { $('divResult').innerHTML = response.responseText; } ; var handle = { onCreate: function() { disableEnableAll(true); Element.show('loading'); }, onComplete: function() { if (Ajax.activeRequestCount == 0) { disableEnableAll(false); Element.hide('loading'); } } } Ajax.Responders.register(handle); 

greeting.php

$the_name = $_POST['username']; if ( empty($the_name)){ echo "<p>please input the name</p>"; }else { echo ""; }