首页 > 解决方案 > 如何实现底部 javascript 以与 PHP 和 HTML 结合使用

问题描述

我创建了测验,它有效。测验有单选按钮。单选按钮 storaged 值(将值存储在本地存储中)。如果用户按下提交按钮,这些值将被发送到数据库(它有效!)。当信息到达数据库时,页面被刷新。页面进来了,单选按钮仍然选中了复选框,情况就是这样。将数据提交到数据库后,单选按钮应失去其选中状态。我希望按下提交按钮后表格清晰。我希望单选按钮在提交后失去选中状态。

我的解决方案:如果用户单击提交按钮,PHP 脚本会向已经在 HTML 页面(主页)中的按钮发送一些信息。如果 PHP 信息正确(onclick="" 将包含 "true"),则 javascript 将启动。如果 PHP 信息为假(onclick="" 将包含 "false"),则不会发生任何事情。

我想要的只是以某种方式修改要运行的 javascript 代码,并在 PHP 脚本向 HTML 发送正确的值(true)时删除选定的单选按钮复选框!

我不知道如何实现底层的 JAVASCRIPT。

JAVASCRIPT:

功能明确。我不知道当 $onclick = "true"; 时如何修改它被启动;

function clearStorage(){

localStorage.removeItem('q1');
localStorage.removeItem('q2');
localStorage.removeItem('q3');
localStorage.removeItem('q4');
localStorage.removeItem('q5');
}

PHP:

 if ($name_error == '' and $email_error == '' and $q1_error == '' and $q2_error == '' and $q3_error == '' and $q4_error == '' and $q5_error == ''){
    $query = "INSERT INTO `questions` (`name`,`email`,`q1`,`q2`,`q3`,`q4`,`q5`) VALUES ('$name','$email','$q1','$q2','$q3','$q4','$q5')";
    $query_run = mysqli_query($connection,$query);
  }

    if($query_run)
    {
      $onclick = "true";
      $success = "Sent!";
      $name = $email = $q1 = $q2 = $q3 = $q4 = $q5 = "";
    }
    else
    {
      $onclick = "false";
      $denied = "Something went wrong!";
    }

HTML(主页):

            <h3>5. JavaScript is a/an ________ language.</h3>
            <input type="radio" name="q5" value="a" id="q5a">a. compiled <br> 
            <input type="radio" name="q5" value="b" id="q5b">b. interpreted<br>

            <p class="error"><?= $q5_error ?></p>

            <br><br>
            <button type="submit" name="insert" value="Submit" onclick="<?= $onclick; ?>">Submit</button>

要保存单选按钮值,我使用此脚本:

JAVASCRIPT:

$(document).ready(function(){
  var radios = document.getElementsByName("q5");
  var val = localStorage.getItem('q5');
  for(var i=0;i<radios.length;i++){
    if(radios[i].value == val){
      radios[i].checked = true;
    }
  }
  $('input[name="q5"]').on('change', function(){
    localStorage.setItem('q5', $(this).val());

  });
});

标签: javascriptphphtml

解决方案


推荐阅读