如何将sql添加到javaScipt函数中?

问题描述 投票:0回答:1

我希望我的用户输入到数据库中,但是它不起作用。我有一个可将数据插入数据库的sql代码工作块,但是当它运行时,我不断收到“未定义”错误。这是完全有效的sql代码

<?php
require 'creationlink.php';

$quizname = $_POST['name'];
$quest = $_POST['question'];
$ans1 = $_POST['answer1'];
$ans2 = $_POST['answer2'];
$ans3 = $_POST['answer3'];
$ans4 = $_POST['answer4'];
$correct = $_POST['A'];

  //initiates connection with database with creation file
  $sql = "INSERT INTO Quiz(question, answer1, answer2, answer3, answer4, correct) VALUES (?, ?, ?, ?, ?, ?)";

  if($stmt = mysqli_prepare($conn, $sql)){
      // Bind variables to the prepared statement as parameters
      mysqli_stmt_bind_param($stmt, "ssssss", $quest, $ans1, $ans2, $ans3, $ans4, $correct);

      // Attempt to execute the prepared statement
      if(mysqli_stmt_execute($stmt)){
          echo "Records inserted successfully.";
      } else{
          echo "ERROR: Could not execute query: $sql. " . mysqli_error($conn);
      }
  }
  else{
      echo "ERROR: Could not prepare query: $sql. " . mysqli_error($conn);
  }
  ?>

这是我希望将sql应用于的代码,这只是一个简单的测验模板,它根据用户输入进行迭代。

<html>
<body>

  <form id='namennumber' action="includes/dbquestions.php" method="post">

     <label for="quizname"><b>Quiz name</b></label>
     <input name="quizname" type="text" placeholder="Enter quizname" required>

     <div id="myHTMLWrapper">
     </div>
   </form>

   <div style="border:solid 1px #ddd; padding:10px; display:none;" id="cont">
  <div id="questionform" class="modal">
         <label for="question"><b>Enter a question</b></label>
         <input name="question" type="text" placeholder="Enter a question" value ="question" required>
         <br>
         <label for="answer1">Possible answer A</label>
         <input type="text" name="answer1" placeholder="Enter a possible answer" value ="answer1"required>
         <br>
         <label for="answer2">Possible answer B</label>
         <input type="text" name="answer2" placeholder="Enter a possible answer" value ="answer2"required>
         <br>
         <label for="answer3">Possible answer C</label>
         <input type="text" name="answer3" placeholder="Enter a possible answer" value ="answer3"required>
         <br>
         <label for="answer4">Possible answer D</label>
         <input type="text" name="answer4" placeholder="Enter a possible answer" value ="answer4"required>
         <br>

         <h3>Correct answer</h3>
         <br>
         <input type="radio" name="A" <?php if (isset($answer) && $answer=="A") echo "checked"; ?> value="A" />
         <label for="A">A</label>
         <br>
         <input type="radio" name="A" <?php if (isset($answer) && $answer=="B") echo "checked"; ?> value="B" />
         <label for="B">B</label>
         <br>
         <input type="radio" name="A" <?php if (isset($answer) && $answer=="C" )echo "checked"; ?> value="C" />
         <label for="C">C</label>
         <br>
         <input type="radio" name="A" <?php if (isset($answer) && $answer=="D" )echo "checked"; ?> value="D"/>
         <label for="D">D</label>
         <br>
         <form action="includes/dbquestions.php">
<button style="width:auto;" id="enter" class="btn btn-primary big-btn" >Save</button>
</form>
         </div>
       </div>

<script>
var wrapper = document.getElementById("myHTMLWrapper");

var number = prompt("Enter the number of questions");
var myHTML = '';
for (var i = 0; i < number; i++) {
  myHTML += '<span class="test">Question ' + (i + 1)
  myHTML += '<input type="button" value="Content" id="bt" onclick="toggle(\'cont\')">' +
  '</span><br/><br/>';
}

wrapper.innerHTML = myHTML
function toggle(cont) {
var cont = document.getElementById('cont');
if (cont.style.display == 'block') {
cont.style.display = 'none';

document.getElementById(ele.id).value = 'Show DIV';
}
else {
cont.style.display = 'block';
document.getElementById(ele.id).value = 'Hide DIV';
}
};
</script>
</div>
</body>
javascript html sql
1个回答
0
投票

在您的HTML中,所有<input>元素都在<form>之外,因此您会收到undefined错误。要解决该错误,请将<input>元素移至<form>标签。尝试如下替换您的html代码。

<html>
  <body>
    <form id='namennumber' action="includes/dbquestions.php" method="post">
      <label for="quizname"><b>Quiz name</b></label>
      <input name="quizname" type="text" placeholder="Enter quizname" required>
      <div id="myHTMLWrapper">
      </div>
    </form>
    <div style="border:solid 1px #ddd; padding:10px; display:none;" id="cont">
      <div id="questionform" class="modal">
        <form action="includes/dbquestions.php"> //moved all the input elements
          <label for="question"><b>Enter a question</b></label>
          <input name="question" type="text" placeholder="Enter a question" value="question" required>
          <br>
          <label for="answer1">Possible answer A</label>
          <input type="text" name="answer1" placeholder="Enter a possible answer" value="answer1" required>
          <br>
          <label for="answer2">Possible answer B</label>
          <input type="text" name="answer2" placeholder="Enter a possible answer" value="answer2" required>
          <br>
          <label for="answer3">Possible answer C</label>
          <input type="text" name="answer3" placeholder="Enter a possible answer" value="answer3" required>
          <br>
          <label for="answer4">Possible answer D</label>
          <input type="text" name="answer4" placeholder="Enter a possible answer" value="answer4" required>
          <br>

          <h3>Correct answer</h3>
          <br>
          <input type="radio" name="A" <?php if (isset($answer) && $answer=="A") echo "checked"; ?> value="A" />
          <label for="A">A</label>
          <br>
          <input type="radio" name="A" <?php if (isset($answer) && $answer=="B") echo "checked"; ?> value="B" />
          <label for="B">B</label>
          <br>
          <input type="radio" name="A" <?php if (isset($answer) && $answer=="C" )echo "checked"; ?> value="C" />
          <label for="C">C</label>
          <br>
          <input type="radio" name="A" <?php if (isset($answer) && $answer=="D" )echo "checked"; ?> value="D" />
          <label for="D">D</label>
          <br>
          <button style="width:auto;" id="enter" class="btn btn-primary big-btn">Save</button>
        </form>
      </div>
    </div>
    <script>
      var wrapper = document.getElementById("myHTMLWrapper");

      var number = prompt("Enter the number of questions");
      var myHTML = '';
      for (var i = 0; i < number; i++) {
        myHTML += '<span class="test">Question ' + (i + 1)
        myHTML += '<input type="button" value="Content" id="bt" onclick="toggle(\'cont\')">' +
          '</span><br/><br/>';
      }

      wrapper.innerHTML = myHTML

      function toggle(cont) {
        var cont = document.getElementById('cont');
        if (cont.style.display == 'block') {
          cont.style.display = 'none';

          document.getElementById(ele.id).value = 'Show DIV';
        } else {
          cont.style.display = 'block';
          document.getElementById(ele.id).value = 'Hide DIV';
        }
      };
    </script>
  </body>
</html>

注意,对于HTML中的两个action,您对<form>使用相同的参数。见下文。

action="includes/dbquestions.php"

由于在服务器端代码中使用$_POST,因此您必须将methodpost指定为<form>,因为<form>的默认方法是get,而不是post ]。

UPDATE从您在评论中发布的错误中,我将您正在使用的2种表格进行了合并。

<html>
  <body>
    <form id='namennumber' action="includes/dbquestions.php" method="post">
      <label for="quizname"><b>Quiz name</b></label>
      <input name="quizname" type="text" placeholder="Enter quizname" required>
      <div id="myHTMLWrapper">
      </div>
    <div style="border:solid 1px #ddd; padding:10px; display:none;" id="cont">
      <div id="questionform" class="modal">
          <label for="question"><b>Enter a question</b></label>
          <input name="question" type="text" placeholder="Enter a question" value="question" required>
          <br>
          <label for="answer1">Possible answer A</label>
          <input type="text" name="answer1" placeholder="Enter a possible answer" value="answer1" required>
          <br>
          <label for="answer2">Possible answer B</label>
          <input type="text" name="answer2" placeholder="Enter a possible answer" value="answer2" required>
          <br>
          <label for="answer3">Possible answer C</label>
          <input type="text" name="answer3" placeholder="Enter a possible answer" value="answer3" required>
          <br>
          <label for="answer4">Possible answer D</label>
          <input type="text" name="answer4" placeholder="Enter a possible answer" value="answer4" required>
          <br>

          <h3>Correct answer</h3>
          <br>
          <input type="radio" name="A" <?php if (isset($answer) && $answer=="A") echo "checked"; ?> value="A" />
          <label for="A">A</label>
          <br>
          <input type="radio" name="A" <?php if (isset($answer) && $answer=="B") echo "checked"; ?> value="B" />
          <label for="B">B</label>
          <br>
          <input type="radio" name="A" <?php if (isset($answer) && $answer=="C" )echo "checked"; ?> value="C" />
          <label for="C">C</label>
          <br>
          <input type="radio" name="A" <?php if (isset($answer) && $answer=="D" )echo "checked"; ?> value="D" />
          <label for="D">D</label>
          <br>
          <button style="width:auto;" id="enter" class="btn btn-primary big-btn">Save</button>
        </form>
      </div>
    </div>
    <script>
      var wrapper = document.getElementById("myHTMLWrapper");

      var number = prompt("Enter the number of questions");
      var myHTML = '';
      for (var i = 0; i < number; i++) {
        myHTML += '<span class="test">Question ' + (i + 1)
        myHTML += '<input type="button" value="Content" id="bt" onclick="toggle(\'cont\')">' +
          '</span><br/><br/>';
      }

      wrapper.innerHTML = myHTML

      function toggle(cont) {
        var cont = document.getElementById('cont');
        if (cont.style.display == 'block') {
          cont.style.display = 'none';

          document.getElementById(ele.id).value = 'Show DIV';
        } else {
          cont.style.display = 'block';
          document.getElementById(ele.id).value = 'Hide DIV';
        }
      };
    </script>
  </body>
</html>
© www.soinside.com 2019 - 2024. All rights reserved.