Не удалось получить значения из формы HTML

Я хочу использовать функцию JavaScript для сохранения значений из html-формы в базу данных Firebase.Не удалось получить значения из формы HTML

Следующий код работает (не используя форму):

<html> 
    <head> 
     <script src="https://cdn.firebase.com/js/client/2.2.1/firebase.js"></script> 
    </head> 
    <body> 
    <script> 
     var ref = new Firebase("https://mydatabase.firebaseio.com/"); 
     // Opmerking laten invullen 
     var _klas = "testk"; 
     var _datum = new Date().getTime(); 

     // Generate a reference to a new location and add some data using push() 
     var postsRef = ref.child("opmerkingen"); 
     var newPostRef = postsRef.push({ 
      klas: _klas, 
      datum: _datum 
     }); 
    </script> 
    </body> 
</html>

После кода, используя форму, не работает

<html> 
    <head> 
     <script src="https://cdn.firebase.com/js/client/2.2.1/firebase.js"></script> 
     <script language=javascript type="text/javascript"> 
     function buttonPressed(event) 
     { 
      var ref = new Firebase("https://mydatabase.firebaseio.com/"); 
      // Opmerking laten invullen 
      var _klas = document.getElementById("Klas").value; 
      var _datum = new Date().getTime(); 

      // Generate a reference to a new location and add some data using push() 
      var postsRef = ref.child("opmerkingen"); 
      var newPostRef = postsRef.push({ 
       klas: _klas, 
       datum: _datum 
      }); 
     } 
     </script> 
    </head> 
    <body> 
    <form method='post' action=''> 
     <input type='text' name = 'Klas' id='Klas'> 
     <input type='submit' name='submit' onClick='buttonPressed(event)'> 
    </form> 
    </body> 
</html>

Что не так?

Добавлен вопрос: изменил код, используя onFormSubmitted

<html> 
    <head> 
     <script src="https://cdn.firebase.com/js/client/2.2.1/firebase.js"></script> 
     <script language=javascript type="text/javascript"> 
     function onFormSubmitted(event) 
     { 
      event.preventDefault(); 

      var ref = new Firebase("https://mydatabase.firebaseio.com/"); 
      // Opmerking laten invullen 
      var _klas = document.getElementById("Klas").value; 
      var _datum = new Date().getTime(); 

      // Generate a reference to a new location and add some data using push() 
      var postsRef = ref.child("opmerkingen"); 
      var newPostRef = postsRef.push({ 
       klas: _klas, 
       datum: _datum 
      }); 

      // Get the unique ID generated by push() 
      var postID = newPostRef.key(); 
     } 

     </script> 
    </head> 
    <body> 
     <form method='post' action='' onsubmit="return onFormSubmitted(e)"> 
      <input type='text' name='Klas' id='Klas'> 
      <input type='submit' name='submit' value='Send'> 
     </form> 
    </body> 
</html>

источник

2015-03-27 user1837293

Какое поведение при нажатии на кнопку? Вы получаете какие-либо ошибки? –

Похоже, что ничего не случилось, нет сообщения об ошибке. При щелчке на поле содержимое сбрасывается в пустые как обычно. – user1837293

Вы проверили консоль? Я получаю ошибки при использовании вашего кода, и после их исправления проблема исправлена. –

Это проблема, которая может быть легко решена путем отладки в консоли. Пойдем шаг за шагом, чтобы вы могли видеть, что не так.

Если вы откроете консоль (как правило, F12 или в инструментах разработчиков), вы увидите сообщения и ошибки, которые генерирует страница. Начнем с вашего кода (что я скопировал в JSFiddle: http://jsfiddle.net/hu6g0w6r/).

Вы передаете переменную e (что не определено нигде) в функцию. Код JavaScript не работает, и браузер продолжает нормально отправлять. Если вы проверите консоль, вы увидите сообщение об ошибке:

Uncaught ReferenceError: e is not defined

Изобразительное. Давайте сделаем это изменение. Обновите эту строку кода, и удалить e (see full code here):

<form method='post' action='' onsubmit="return onFormSubmitted()">

Попробуйте запустить снова. И теперь вы получите новую ошибку, потому что event не определен:

Uncaught TypeError: Cannot read property 'preventDefault' of undefined

Это происходит потому, что event всегда присутствует, и вам не нужно определить его в заголовке функции (вы используете неопределенную переменную event вместо глобального объекта event). Так что просто удалить ссылку на функцию (но продолжайте использовать event.preventDefault(), see the full code here):

function onFormSubmitted() {

И это все! Больше ошибок и исправлена проблема.

Полный код можно увидеть in the last JSFiddle, или здесь:

JS:

function onFormSubmitted() { 
    event.preventDefault(); 

    var ref = new Firebase("https://mydatabase.firebaseio.com/"); 
    // Opmerking laten invullen 
    var _klas = document.getElementById("Klas").value; 
    var _datum = new Date().getTime(); 

    // Generate a reference to a new location and add some data using push() 
    var postsRef = ref.child("opmerkingen"); 
    var newPostRef = postsRef.push({ 
     klas: _klas, 
     datum: _datum 
    }); 

    // Get the unique ID generated by push() 
    var postID = newPostRef.key(); 
}

HTML:

<form method='post' action='' onsubmit="return onFormSubmitted()"> 
    <input type='text' name='Klas' id='Klas'> 
    <input type='submit' name='submit' value='Send'> 
</form>

В качестве примечания, вы находитесь возвращая результат функции onFormSubmitted(), но эта функция не возвращает никакого значения.Таким образом, вы можете изменить вызов onsubmit только onsubmit="onFormSubmitted()"as seen on this JSFiddle.

источник

2015-03-28 12:57:07

вместо «OnClick», ваш <form> тег должен слушать «onsubmit» событие.

<form method='post' action='' onsubmit="return onFormSubmitted(e)"> 
    <input type='text' name = 'Klas' id='Klas'> 
    <input type='submit' name='submit'> 
</form> 

<script> 
function onFormSubmitted(event) 
{ 
    event.preventDefault(); 

    // get text input value 
} 
</script>

источник

2015-03-27 21:59:52

Спасибо. Я пробовал это сейчас, но ничего не сохранилось. Может быть, это что-то маленькое, я не обращаю внимания. Я добавил полный код в вопросе, чтобы его можно было проверить. – user1837293

Я сделал несколько проверок. Теперь я нахожу, что значения действительно правильно передаются из формы, я даже получаю значение для newPostRef.key() (вызывая предупреждение (postID) после этой строки). Но все же данные не добавляются в базу данных Firebase? – user1837293

Не удалось получить значения из формы HTML

ответ

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