HTML形式のJavaScriptを使用する

Question

JavaScriptコードから値を取得するためのHTMLフォームを取得しようとしています。隠しフィールド "SubID"がjavascript関数の値を取得したいと思います。

<form action="" method="post"> 
<fieldset><input name="firstname" type="text" placeholder="First Name" /></fieldset> 
<input type="hidden" name="SubID" value="uid1"> 
<fieldset><button id="contact-submit" name="submit" type="submit" data-submit="...Sending">Submit</button></fieldset> 

<script type="text/javascript"> 
    function getCookie(name) 
    { 
    var re = new RegExp(name + "=([^;]+)"); 
    var value = re.exec(document.cookie); 
    return (value != null) ? unescape(value[1]) : null; 
    } 
    var uid1 = document.write(getCookie("uid")); 
</script> 

Answer 1

は、フォームの提出イベントにリスナーを追加します：

最新のブラウザで動作するはず

// declare listener 
function handleSubmit() { 
    var myHiddenInput = document.querySelector('[name=SubID]'); 
    myHiddenInput.value = getCookie("uid"); 
} 
// hook listener to the event of the form 
var myForm = document.querySelector('form'); 
myForm.addEventListener("submit", handleSubmit, false); 

をこれは私がこれまで..私は間違って何をやっているものです。古いブラウザをサポートする必要がある場合は、.addEventListener()が少し変更されます。

詳細はhow to add simple event listeners hereです。

デモJSBinで以下：クッキーに対する多額の

function getCookie(name) { 
 
    var re = new RegExp(name + "=([^;]+)"); 
 
    var value = re.exec(document.cookie); 
 
    return (value != null) ? unescape(value[1]) : null; 
 
} 
 
//var uid1 = document.write(getCookie("uid")); 
 

 
var myForm = document.querySelector('form'); 
 

 
function handleSubmit() { 
 
    var myHiddenInput = document.querySelector('[name=SubID]'); 
 
    // myHiddenInput.value = getCookie("uid"); 
 
    myHiddenInput.value = "test -- have a look at the network tab to check if this was submitted"; 
 
} 
 
myForm.addEventListener("submit", handleSubmit, false);

<form action="https://httpbin.org/post" method="post"> 
 
    <fieldset><input name="firstname" type="text" placeholder="First Name" /></fieldset> 
 
    <input type="hidden" name="SubID" value="uid1"> 
 
    <fieldset> 
 
    <button id="contact-submit" name="submit" type="submit" data-submit="...Sending">Submit</button> 
 
    </fieldset> 
 
</form>

最新の質問

• 1.
• 2.
• 3.
• 4.
• 5.

 関連する問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.