2015-09-17 3 views
4

У меня есть страница, которая загружает случайный файл MP3 при каждом обновлении. Пользователь должен угадать имя, основанное на звуке, через ввод текстовой формы. Я хочу проверить их ввод в отношении сохраненной строки и обновить страницу, если она верна. В противном случае, я wan't, чтобы дать им неверную предупреждение и остаться на той же странице, чтобы они могли догадаться, снова:HTML text input conditional submit

<div class="ui-widget" align="center"> 
<form method="post" action="" class="answer_box" onsubmit="return submit();"> 
    <p>Which hero is it? <input id="tags" name="guess" /></p> 
    <script> 
     var key = <?php echo json_encode($rand_key) ?>; 
     var info = document.getElementById("guess").value; 

     function submit() { 
      if (key==info){ 
       alert('Correct!'); 
       return true; 
      } 
      else { 
       alert('Incorrect!'); 
       returnToPreviousPage(); 
       return false; 
      } 
     } 
    </script> 

</form> 
</div> 

Сейчас он представляет информацию на новую страницу, независимо от входа. Предупреждения javascript также не отображаются (я подозреваю, что они показывают, но страница затем обновляется, и они исчезают). Ключевая переменная - это ключ от случайного значения массива PHP, а информация должна быть текстом, который вводит пользователь.

+4

Не очень безопасный подход, если честно, они могли бы просто открыть сценарий и посмотреть ключ прямо там. – MinusFour

+0

Вы можете указать содержимое '$ rand_key'? – CodeGodie

+0

Показать 'var_dump (json_encode ($ rand_key)); result. Вы пытались запустить этот JS через ввод кнопки вместо формы? Кажется лучшим подходом (независимо от комментария @MinusFour, который также следует учитывать) –

ответ

6

Проблема найдено:

  1. вы не можете использовать submit как имя функции а это объект HTMLForm
  2. document.getElementById("guess").value; ищет элемент с идентификатором «угадать», и что не существует.

Я хотел бы переписать сценарий, как это:

<script> 
    var key = <?php echo json_encode($rand_key) ?>; 

    function my_submit(curr) { 
     var info = curr.guess.value; 
     if (key == info) { 
      alert('Correct!'); 
      return true; 
     } 
     else { 
      alert('Incorrect!'); 
      returnToPreviousPage(); 
      return false; 
     } 
    } 
</script> 

<form onsubmit="return my_submit(this);"> 
    <p>Which hero is it? <input id="tags" name="guess"/></p> 
</form> 
+0

CodeGodie, так как 'submit' является частью объекта HtmlForm, он может использоваться как глобальный JS, он не конфликтует с какими-либо другими функциями. –

+0

Вы можете легко проверить это, открыв здесь F12 и набрав 'window.submit' или' submit'. В обоих случаях вы получите 'undefined'. –

+1

Это сработало отлично! Я заменил returnToPreviousPage() с event.preventDefault(), и он работает точно так, как должен. Спасибо! – Mason

2

У вас есть проблема здесь:

<input id="tags" name="guess" />

Ваш id является tags, не guess.

Вы должны использовать document.getElementById("tags").value.

2

Вы пытаетесь получить значение элемента с идентификатором «догадка». Измените это на «теги».

var info = document.getElementById("tags").value; 

Кроме того, как указано в @CodeGodie, вам нужно изменить название своей функции на что-то другое, кроме submit.