我能找到的所有制作下拉表单的例子都涉及到有一个单独的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