JavaScript formタグの入力内容を取得/タグの基本動作をキャンセル

formの入力内容を取得

submitボタン押下時の処理

submitボタンが押されたらaction属性のURLに入力内容が送信される。 onsubmitイベントはボタンが押された直後で入力内容が送信される前に発生する

document.getElementById('id名').onsubmit = function(){
    実行したい処理;
};

フォームの入力内容を読み取る

document.getElementById('formのid名').読み取りたいフォーム部品のname属性の値.value;

• name属性でどの部品か判別
• フォーム部品に入力された内容はvalueプロパティに保存されている

タグの基本動作をキャンセル

HTMLタグの<form>や<a>にはあらかじめ基本動作が定義されているものがある。この基本動作をキャンセルさせる方法

document.getElementById('form').onsubmit = function(event){
    event.preventDefault();
}

• ある要素にイベントが発生するとイベントに代入しておいた関数が実行される。その実行される関数にはイベントオブジェクトがパラメータとして渡される。 そのイベントオブジェクトを関数で受取るfunction(event)
• preventDefaultメソッドでタグの基本動作をキャンセルする