這次帶給大家JavaScript怎麼使用ajax操作表單,JavaScript使用ajax操作表單的注意事項有哪些,以下就是實戰案例,一起來看一下。
用JavaScript操作表單和操作DOM是類似的,因為表單本身也是DOM樹。
不過表單的輸入框、下拉框等可以接收使用者輸入,所以用JavaScript來操作表單,可以得到使用者輸入的內容,或是對一個輸入框設定新的內容。
HTML表單的輸入控制項主要有以下幾種:
複選框,對應的,用於選擇多項;
取得值
#如果我們得到了一個節點的引用,就可以直接呼叫value取得對應的使用者輸入值:// <input type="text" id="email"> var input = document.getElementById('email'); input.value; // '用户输入的值'
// <label><input type="radio" name="weekday" id="monday" value="1"> Monday</label> // <label><input type="radio" name="weekday" id="tuesday" value="2"> Tuesday</label> var mon = document.getElementById('monday'); var tue = document.getElementById('tuesday'); mon.value; // '1' tue.value; // '2' mon.checked; // true或者false tue.checked; // true或者false
設定值
設定值和取得值類似,對於text、password、hidden以及select,直接設定value就可以:// <input type="text" id="email"> var input = document.getElementById('email'); input.value = 'test@example.com'; // 文本框的内容已更新
HTML5控件
HTML5新增了大量標準控件,常用的包括date、datetime、datetime-local、color等,它們都使用標籤:<input type="date" value="2015-07-01"> <input type="datetime-local" value="2015-07-01T02:03:04"> <input type="color" value="#ff0000">
提交表單
最後,JavaScript可以用兩種方式來處理表單的提交(AJAX方式在後面介紹)。 方式一是透過