如何使用表單中的操作屬性管理自動提交

Question

我需要以某種形式創建依賴於動態的下拉列表，因此我找到了使用JS自動提交功能的解決方案：

function autoSubmit()
    {
         var formObject = document.forms['dados'];
            formObject.submit();
    }

然后我在第一個下拉菜單中使用onchange事件來調用自動提交功能：

<label>Campus:</label>
<select name="campus" onchange="autoSubmit();">
<option VALUE="null"></option>
<?php

//Popula a lista com os cursos do DB

$sql = "SELECT id,nome FROM campus";
$countries = mysql_query($sql,$conn);
while($row = mysql_fetch_array($countries))
{
if($row[nome]==$campus)
        echo ("<option VALUE=\"$row[nome]\" selected>$row[nome]</option>");
    else
    echo ("<option VALUE=\"$row[nome]\">$row[nome]</option>");
 }

 ?>
</select>

這樣，元素“ campus”將被設置為在第二個下拉SELECT語句中使用：

$campus = $_POST['campus'];
...
<label>Curso:
<span class="small">curso corrente</span>
</label>
<select name="curso">
<option VALUE="null"></option>
<?php

$consulta2 = "SELECT curso FROM campus_cursos WHERE campus = \"" . $campus . "\"";
$cursoslista = mysql_query($consulta2,$conn);
while($row = mysql_fetch_array($cursoslista))
{
    echo ("<option VALUE=\"$row[curso]\">$row[curso]</option>");
}

?>
</select>

這段代碼可以正常工作，但是問題是這樣我就不能在表單中設置動作屬性，因為如果我每次第一次更改下拉列表時都這樣做，它將重定向到動作的URL。這是有效的表單：

<form  name="dados" method="POST" onsubmit="return validar();">

沒有動作屬性，我無法使用“提交”按鈕將所有其他元素的數據發送到正確的URL。有沒有辦法做到這一點？

Answer 1

我使用由“ on change”事件觸發的ajax腳本解決了這個問題。ajax腳本調用一個外部文件，該文件返回一個元素數組。該腳本使用這些元素填充下拉列表。

Answer 2

您應該使用Ajax代碼填充第二個下拉值。

在表單頁面上：

<label>Campus:</label>
<select name="campus" id="campus">
<option VALUE="null"></option>
<?php

//Popula a lista com os cursos do DB

$sql = "SELECT id,nome FROM campus";
$countries = mysql_query($sql,$conn);
while($row = mysql_fetch_array($countries))
{
if($row[nome]==$campus)
        echo ("<option VALUE=\"$row[nome]\" selected>$row[nome]</option>");
    else
    echo ("<option VALUE=\"$row[nome]\">$row[nome]</option>");
 }

 ?>
</select>
<label>Curso:
<span class="small">curso corrente</span>
</label>
<select name="curso" id="curso">

</select>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#campus').change(function(){
var campusName = $(this).val();
$('#curso').load('generateCurso.php?campus='+campusName);
});
});
</script>

編寫一個名為generateCurso.php的PHP文件

<?php
$campus = $_GET['campus'];

$consulta2 = "SELECT curso FROM campus_cursos WHERE campus = \"" . $campus . "\"";
$cursoslista = mysql_query($consulta2,$conn);
?>
<option VALUE="null"></option>
<?php
while($row = mysql_fetch_array($cursoslista))
{
    echo ("<option VALUE=\"$row[curso]\">$row[curso]</option>");
}

?>