使用JavaScript從表單獲取信息

出於某種原因，我無法通過此表單提交信息。我嘗試了很多東西，有什麼想法？使用JavaScript從表單獲取信息

編輯：我添加了其餘的代碼。出於某種原因，它需要按下兩次提交按鈕才能正常工作。有什麼建議麼？

<style> 
     #movingBall { 
     position: fixed; 
     width:100px; 
     height:100px; 
     border-radius:200px; 
     background-color:black; 
     top:50%; 
     visibility:hidden; 
     left:50%; 

     } 
     #center{ 
     margin-left:40%; 
     font-size:1.5em; 
     } 

    </style> 
</head> 
<body > 
    <div id="movingBall"></div> 

    <section id= "center"> 
     <form id="myForm" method="POST" onsubmit="startAnimation()"> 
     Color? 
      <input type ="text" placeholder="#000000"></br> 
      Direction? 
      <select name = "direction" style="width:174px"> 
       <option value="1">Left</option> 
       <option value="2">Right</option> 
       <option value="3">Up</option> 
       <option value="4">Down</option> 
      </select><br/> 
      <input type = "submit"> 
      <input type="button" value="stopper" onclick="stopAnimation()"> 
     </form> 
    </section> 
</body> 

<script type='text/javascript'> 
    var col, pos; 
    var radius = 50; 
    var x = 1000, y = 500;  
    var incrX =2, incrY=2; 
    var timerId; 
    form = document.getElementById("myForm"); 
    form.addEventListener("submit", function (evt) { 
     evt.preventDefault(); 
     evt.stopPropagation(); 
    col = document.forms[0][0].value; 
    pos = document.forms[0][1].value; 

    }); 

    function startAnimation() { 

     document.getElementById("movingBall").style.visibility="visible"; 
     document.getElementById("movingBall").style.backgroundColor=col; 

     if (pos==1) 
     {timerId = setInterval(updateAnimation,1);} 
     else if (pos==2) 
     {timerId=setInterval(updateAnimation2,1);} 
     else if (pos==3) 
     {timerId=setInterval(updateAnimation3,1);} 
     else if (pos==4) 
     {timerId=setInterval(updateAnimation4,1);} 

    } 


    function stopAnimation() { 
     clearTimeout(timerId); 
    } 


    function updateAnimation() { 

     x = x - incrX; 
     var e = document.getElementById("movingBall"); 
     e.style.left=x+"px"; 

     if (x >= window.innerWidth - radius*2) 
     { 
      incrX *=-1; 
     } 
     else if (x <=0) 
     { 
      incrX *=-1; 
     } 
    } 

    function updateAnimation2() { 

     x = x + incrX; 
     var e = document.getElementById("movingBall"); 
     e.style.left=x+"px"; 

     if (x >= window.innerWidth - radius*2) 
     { 
      incrX *=-1; 
     } 
     else if (x <=0) 
     { 
      incrX *=-1; 
     } 
    } 
    function updateAnimation3() { 

     y = y - incrY; 
     var e = document.getElementById("movingBall"); 
     e.style.top=y +"px"; 

     if (y >= window.innerHeight -radius*2) 
     { 
      incrY *=-1; 
     } 
     else if (y <=0) 
     { 
      incrY *=-1; 
     } 
    } 

    function updateAnimation4() { 

     y = y + incrY; 
     var e = document.getElementById("movingBall"); 
     e.style.top=y +"px"; 

     if (y >= window.innerHeight -radius*2) 
     { 
      incrY *=-1; 
     } 
     else if (y <=0) 
     { 
      incrY *=-1; 
     } 
    } 

</script>

來源

2015-06-21 Danyal Khan

你的代碼看起來很好，但如果你想讀的形式的值提交你能做到這script標籤會被立即執行，像這樣：

http://jsfiddle.net/nhkph6ew/

偵聽該事件的d執行任何你需要的行動......

form = document.getElementById("myForm"); 
form.addEventListener("submit", function (evt) { 
    evt.preventDefault(); 
    evt.stopPropagation(); 

    var col = document.forms[0][0].value; 
    var pos = document.forms[0][1].value; 

    console.log(col); 
    console.log(pos); 
    form.submit(); 
});

來源

2015-06-21 23:45:01 kainlite

我有一個：遺漏的類型錯誤：無法讀取空的特性「的addEventListener」 –

檢查的jsfiddle鏈接，你需要的屬性ID添加到窗體，在此case我命名的形式myForm，但嘗試使用唯一標識該窗體的ID。 – kainlite

非常感謝！這工作！我將完整的代碼編輯到我的初始文章中，除了我需要按提交兩次以使其正常工作外，所有內容都可以工作。你知道爲什麼嗎？ –

使用JavaScript從表單獲取信息

回答

相關問題