Использование javascript для получения информации из формы

по какой-то причине я не могу принять информацию, представленную через эту форму. Я пробовал много вещей, какие-то идеи?Использование javascript для получения информации из формы

EDIT: Я добавил остальную часть кода. По какой-то причине для его работы требуется дважды нажать кнопку отправки. Какие-либо предложения?

<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

Ваш код кажется нормально, но этот сценарий тег будет работать сразу же, если вы хотите, чтобы прочитать значения формы на представить вы можете это сделать как это:

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

я получил: Uncaught TypeError: Не удается прочитать свойство «addEventListener» нулевого –

проверить jsfiddle ссылку, Вам нужно добавить идентификатор атрибута в форме, в этом Я назвал форму myForm, но попытаюсь использовать идентификатор, который однозначно идентифицирует эту форму. – kainlite

Большое спасибо! Это сработало! Я редактировал полный код в свой первоначальный пост, все работает, за исключением того факта, что мне нужно дважды нажать submit, чтобы он работал. Ты знаешь почему? –

Использование javascript для получения информации из формы

ответ

Смежные вопросы