使用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从表单获取信息

回答

相关问题