我在 php 文件中有一个表单。
该表单中有一个表,其中包含一个必需的SELECT元素和一个必需的INPUT TEXT元素。
在表格下方还有一个提交按钮。
提交可以完美地检查表单中的必填字段是否具有值,并提醒用户哪些元素需要值。
问题:
我希望另一个按钮基本上检查提交按钮所做的检查,即提醒我哪些必填字段需要值但不提交表单。
基本上:
单击提交按钮时会调用哪些函数,以便我可以使用检查表单是否完成的方法。
ContactCard.php
<?php
require_once("config.php");
//Connect to our database
$mysqli = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME);
//Return an error if we have connection issues
if ($mysqli->connect_error)
{
die('Connect Error (' . $mysqli->connect_errno . ') '. $mysqli->connect_error);
}
//Query the database for the results we want
$query = $mysqli->query("SELECT field FROM `contact_fields`");
//Create an array of objects for each returned row
while($array[] = $query->fetch_object());
//Remove the blank entry at end of array
array_pop($array);
//Print our array results
//print_r_html($array);
?>
<?php
//Free result set and close connection
$query->close();
$mysqli->close();
?>
<html>
<head>
<title>Add a Contact</title>
<link <link rel="stylesheet" type="text/css" href="ContactCard.css">
<script>
function addOptRow()
{
var optTable = document.getElementById("optTable");
var optTableRows = optTable.rows.length;
var newOptRow = optTable.insertRow(optTableRows);
//create the dropbox fields for the new row
var optFieldNames = document.createElement("select");
optFieldNames.name = "optFieldNames";
optFieldNames.options[optFieldNames.options.length] = new Option("",null);
"<?php foreach($array as $option) : ?>"
optFieldNames.options[optFieldNames.options.length] = new Option("<?php echo $option->field; ?>",null);
"<?php endforeach; ?>"
var optFieldNamesCell = newOptRow.insertCell(0);
optFieldNamesCell.appendChild(optFieldNames);
//create the field value for the new row
var optFieldValue = document.createElement("input");
optFieldValue.type = "text";
optFieldValue.name = "optFieldValue";
optFieldValue.required = "true";
var optFieldValueCell = newOptRow.insertCell(1);
optFieldValueCell.appendChild(optFieldValue);
//create the field remove for the new row
var optFieldRemove = document.createElement("input");
optFieldRemove.type = "button";
optFieldRemove.value = "Remove";
optFieldRemove.onclick = function(){removeOptRow(this);}
var optFieldRemoveCell = newOptRow.insertCell(2);
optFieldRemoveCell.appendChild(optFieldRemove);
}
function removeOptRow(removeButton)
{
var optTable = document.getElementById("optTable");
optTable.deleteRow(removeButton.parentNode.parentNode.rowIndex);
}
function checkAllFieldsComplete()
{
//if(!isset( stuck here :(
}
</script>
</head>
<body>
<h1 id="title" >Add A Contact</h1>
<form>
<fieldset id="reqFields">
<legend>Required Fields</legend>
<table id="reqTable">
<tr>
<td>Company Name</td><td><input type="text" required></input></td>
</tr>
<tr>
<td>Company Code</td><td><input type="text" required></input></td>
</tr>
</table>
</fieldset>
<fieldset id="optFields">
<legend>Optional Fields</legend>
<table id="optTable">
<tr><th></th><th></th><th><input type="button" value="Add" onclick=addOptRow()></button></th></tr>
</table>
</fieldset>
<input type="submit"></input>
</form>
<div id="test" name="test">
</div>
</body>
</html>