您可以使用单个HTML文件制作表单吗？

如何解决您可以使用单个HTML文件制作表单吗？

我可以找到制作下拉式表格的所有示例，其中涉及一个单独的PHP文件。我试图将一些代码嵌入到Weebly页面中，所以不确定是否可以在服务器上保存单独的PHP文件。那么有可能完全避免PHP吗？也许用JavaScript和jQuery做所有事情？还是将表单和PHP放在同一个HTML文件中？

更具体地说，我要做的是创建一个页面，其中包含多个下拉表单。用户选择几个选项，单击提交，客户端后端对输入进行一些计算，然后打印出结果。

我一直在尝试按照该指南进行操作：https://www.w3schools.com/tags/tag_select.asp

我一直在遵循以下形式使用PHP：https://www.ntchosting.com/encyclopedia/scripting-and-programming/php/php-in/

在该指导下，我创建了以下无效代码：

<!DOCTYPE html>
<?php
  $Level = $_POST["level"];
?>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <form action="<?php echo $PHP_SELF;?>" method="post">
      Choose a level: <select name="level" id="level">
        <option value="high">High</option>
        <option value="med">Medium</option>
        <option value="low">Low</option>
      </select>
    </form>
    <p>
    <?php
      echo "".$Level;
    ?>
    </p>
  </body>
</html>

我说这是行不通的，因为当我单击下拉菜单中的任何内容时，什么都没有发生。

此进一步信息来自评论交流：

嗯，这确实不需要与服务器进行交互。它最终将只是一个工具，使客户可以获取价格的自动生成的估算报价。因此，他们回答了一些问题（即，选择一些下拉菜单并在字段中输入一些数字），然后点击提交，网页便会给出一个估算值。没有保存任何信息或类似信息，因此可以很好地处理客户端的所有内容。但是，从您的描述来看，这似乎无法使用PHP做到。我认为Weebly不会让我更改文件扩展名。

解决方法

您当然可以。您可以在表单上使用onSubmit属性来运行一些javascript（并通过扩展名jquery），而无需实际提交表单。更具体地说，它看起来像这样：

<form onSubmit="return yourJavascriptFunction()" method="post">

在脚本中，您可以使用document.getElementById(yourDropdownID)从表单的字段中获取下拉值，并执行任何必要的操作。如果您不希望表单重定向，只需在函数上return false;。使用此方法，您实际上不需要表单，可以使用带有ID的<select>标签和伪提交按钮：

<button onclick="yourFunction()">Submit</button>

如果要使用php进行此操作，则必须将扩展名更改为php并添加一个提交按钮，否则可以像下面这样无需php轻松地完成此操作。

<form action="#" method="post">
      Choose a level: <select name="level" id="level" onChange="document.getElementById('selectedValue').innerHTML = this.value;">
        <option value="high">High</option>
        <option value="med">Medium</option>
        <option value="low">Low</option>
      </select>
    </form>
    <p> <span id="selectedValue"></span></p>

删除DOCTYPE html，并将文件扩展名更改为.php

您可以使用单个HTML文件制作表单吗？

如何解决您可以使用单个HTML文件制作表单吗？

解决方法

相关推荐