Блог

Я следил за проектом codepen для создания анимированной формы. Могу ли я узнать, как я могу сохранить ответ в своей базе данных SQL? Ответы хранятся в questions массиве с ключом answer , но я не уверен, как их извлечь. Спасибо!

 var questions = [
  {question:"What's your first name?"},
  {question:"What's your last name?"},
  {question:"What's your email?", pattern: /^[^s@] @[^s@] .[^s@] $/},
  {question:"Create your password", type: "password"}
]

var onComplete = function() {

    var h1 = document.createElement('h1')
    h1.appendChild(document.createTextNode('Thanks '   questions[0].answer   ' for checking this pen out!'))
    setTimeout(function() {
      register.parentElement.appendChild(h1)
      setTimeout(function() { h1.style.opacity = 1 }, 50)
    }, 1000)

}

;(function(questions, onComplete) {

    var tTime = 100 // transition transform time from #register in ms
    var wTime = 200 // transition width time from #register in ms
    var eTime = 1000 // transition width time from inputLabel in ms

    if (questions.length == 0) return

    var position = 0

    putQuestion()

    forwardButton.addEventListener('click', validate)
    inputField.addEventListener('keyup', function(e) {
        transform(0, 0) // ie hack to redraw
        if (e.keyCode == 13) validate()
    })

    previousButton.addEventListener('click', function(e) {
        if (position === 0) return
        position -= 1
        hideCurrent(putQuestion)
    })

    function putQuestion() {
        inputLabel.innerHTML = questions[position].question
        inputField.type = questions[position].type || 'text'
        inputField.value = questions[position].answer || ''
        inputField.focus()

        progress.style.width = position * 100 / questions.length   '%'

        previousButton.className = position ? 'ion-android-arrow-back' : 'ion-person'

        showCurrent()

    }

}(questions, onComplete))
  

Для того, чтобы это работало, вам нужна поддержка jquery для вашего веб-сайта

Попробуйте выполнить следующее:

1. Предположим, что вы храните свои переменные в массиве JS, например

var numbers = [45, 4, 9, 16, 25];

2. Вы можете попробовать использовать встроенную функцию JS для циклического перебора массива, например:

numbers.forEach(myFunction);

3. Вы определяете свою функцию, которую используете в пункте 2, с помощью ajax, что-то вроде

 myFunction(value){ 
// answers is used to indicate to your server side script type of operation to be performed to be use in isset(), as value is too general`

  var datastring = 'answers'   'amp;value='   value;
  // in URL indicate path to your actual server side script that will put records in database

  ajax({
    type: "POST",
    url: "/app/server.php",   
    data: datastring,
    success: function (html) {
      console.log(html);
    }
  }); //End of Ajax
  
  return false;
}