0

基本上我有一个使用复选框显示座位计划的页面。可以勾选这些复选框以表示正在预订的座位。我还有一个文本输入，其中输入了预订的名称，然后将这些表格发布到下一页以计算出选中了哪些复选框并将它们保存在数据库中。这是一些代码：

        title>School Hall</title>

<script>


        function confirmReservation() {

        var selectedList = getSelectedList('Confirm Reservation');

        if (selectedList) {
            if (confirm('Do you want to CONFIRM this Reservation :  ' + selectedList + '?')) { 
                document.forms[0].statusA.value=0;
                document.forms[0].statusB.value=1;
                document.forms[0].previousPage.value='schoolHall';
                document.forms[0].action='bookingQueries.php';      
                document.forms[0].submit();
            } else {
                clearSelection();
            }
        }
    }



        function cancelReservation() {

        var selectedList = getSelectedList('cancel Reservation');

        if (selectedList) {
            if (confirm('Do you want to CANCEL this Reservation :  ' + selectedList + '?')) { 
                document.forms[0].statusA.value=1;
                document.forms[0].statusB.value=0;
                document.forms[0].previousPage.value='schoolHall';
                document.forms[0].action='bookingQueries.php';
                document.forms[0].submit();
            } else {
                clearSelection();
            }
        }
    }




    function getSelectedList(actionSelected) {

        // get selected list
        var obj = document.forms[0].elements;
        var selectedList = '';
        for (var i = 0; i < obj.length; i++) {
            if (obj[i].checked && obj[i].name == 'seats[]') {
                selectedList += obj[i].value + ', ';
            }
        }

        // no selection error
        if (selectedList == '') {
            alert('Please select a seat ');
            return false;
        } else {
            return selectedList;
        }

    }




    function validateForm()
    {
    var x=document.forms["0"]["fname"].value;
    if (x==null || x=="")
      {
      alert("First name must be filled out");
      return false;
      }
    }


</script>



</head>
<body topmargin="0" leftmargin="0" rightmargin="0"  >
<table>
<tr><td width="100%" align="left" id='table-2'>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
<input type="hidden" name="previousPage" value=""/>
<input type="hidden" name="statusA" value=""/>
<input type="hidden" name="statusB" value=""/>
</tr>
<table>
<tr><td width="100%" align=left" id='table-2'>
<INPUT Type="BUTTON" VALUE="Home Page" ONCLICK="window.location.href='/final/homePage.php'" align='lef'>
<INPUT Type="BUTTON" VALUE="Bookings" ONCLICK="window.location.href='/final/schoolHallBookings.php'"> 


<?php


 // Connection
$con = mysql_connect("localhost","root","");
if(!con)
{
die('Could not connect:' . mysql_error());
}

 mysql_select_db("systemDatabase",$con); // Connection to DB

 echo '<br>';  

 echo '<font face="Trebuchet MS" color="Black" size="9" >School Hall </font>';


 $query = "SELECT * from schoolHall order by rowId, columnId"; // Create Select Query
 $result = mysql_query($query); // Retrieve all data from query and hold in $result
 $prevRowId = null;
 $seatColor = null;
 $tableRow = false;


 echo "<table align='center' id='table-2'"; // Create table
 while (list($rowId, $columnId, $status, $updatedby, $firstName, $lastName) = mysql_fetch_row($result)) //      Itterates through fetched data
 {
if ($prevRowId != $rowId) 
{
    if ($rowId != 'A') 
    {
        echo "</tr></table></td>";
        echo "\n</tr>";
    }
    $prevRowId = $rowId;
    echo "\n<tr><td align='center'><table class='center' border='1' cellpadding='15' cellspacing='8'        align='center' id='table-2' ><tr>";
} 
else 
{
    $tableRow = false;
}
if ($status == 0) 
{
    $seatColor = "lightgreen"; // Available
}
 else 
{
    $seatColor = "red"; // Booked
}

echo "\n<td bgcolor='$seatColor' align='center'>";
echo "$rowId$columnId";
if ($status == 0 || ($status == 1)) {
    echo "<input type='checkbox' name='seats[]' value='$rowId$columnId' align='center'></checkbox>"; //   Create Checkboxes giving value RowId, ColumnId
}


    }

 echo "</tr></table></td>";
  echo "</tr>";
 echo "</table>";

 // Con close
 mysql_close();
 ?> 



  <table width='100%' border='0'>
<tr><td align='right'>
  &nbsp;
 &nbsp; First Name: <input type="text" name="fname">
 &nbsp; Last Name: <input type="text" name="lname">
</td>
<td><td align='left'>


</td>
 <td><td align ='right'>

    &nbsp;<input type='button' value='Confirm Reservation' onclick='confirmReservation()'/>  
</td></tr>
<tr>
<td><td align='left'>



</td>
<td><td align='left'>


</td>
 <td align='right'>
    &nbsp;<input type='button' value=' Cancel Reservation' onclick='cancelReservation()'>
   </td>
 </table>
 </td></tr>
 <tr><td width="100%" align="center">


 </td></tr>
  <tr><td>&nbsp;</td></tr>
  <tr><td width="100%" align="center">
<table border="1" cellspacing="6" cellpadding="4" align="center">
    <tr>
        <td bgcolor='lightgreen'>Available</td>
        <td bgcolor='red'>Unavailable</td>
    </tr>
</table>
</td></tr>
<tr><td>&nbsp;</td></tr>
<tr><td width="100%" align="center">
</td></tr>
</table>

</body>

有什么办法可以将验证与我当前的代码结合起来吗？我需要检查名称文本以确保确实输入了名称。这需要在访问下一页之前发生。有任何想法吗？

4

2 回答 2

0

工作示例

http://jsfiddle.net/

下面的示例演示了如何将值传递给函数checkInput，它将确定它是否是有效输入 - 该函数使用 jQuery，但您也可以在没有 jQuery 的情况下执行此操作。

演示 HTML：

<form>
    <input id="first-name" value="some value" />
    <input id="last-name" value="" />
</form>

JS 函数（与 HTML 演示一起使用）：

function checkInput(fieldID){
    var isValid = true;

    if($("#" + fieldID).val() == ''){
        isValid = false;
    }

    return isValid;

}


$(document).ready(function(){
    if(!checkInput("first-name")){
        alert("error found with first name");
    }
    if(!checkInput("last-name")){
        alert("error found with last name");
    }
});
于 2013-03-24T15:08:07.430 回答
0

尝试首先将 ID 添加到您的文本输入中：

<table width='100%' border='0'>
  <tr>
    <td align='right'>
      &nbsp;
      &nbsp; First Name: <input type="text" id="fname" name="fname"/>
      &nbsp; Last Name: <input type="text" id="lname" name="lname"/>
    </td>
  <td>
  <td align='left'>

function getSelectedList(actionSelected) {
    // get selected list
    var obj = document.forms[0].elements;
    var selectedList = '';
    for (var i = 0; i < obj.length; i++) {
        if (obj[i].checked && obj[i].name == 'seats[]') {
            selectedList += obj[i].value + ', ';
        }
    }
    var fname = document.getElementById('fname');
    var lname = document.getElementById('lname');
    // no selection error
    if (selectedList == '') {
        alert('Please select a seat ');
        return false;
    } else if (actionSelected.beginsWith('Confirm') &&  (fname .value.replace(/^\s+|\s+$/g, '').length == 0 || /[0-9]/.test(fname))) {
        alert('Please Enter valid first name.');
        return false;
    } else if (actionSelected.beginsWith('Confirm') && (lname.value.replace(/^\s+|\s+$/g, '').length == 0 || /[0-9]/.test(lname))) {
        alert('Please Enter valid last name.');
        return false;
    } else {
        return selectedList;
    }
}
于 2013-03-24T15:18:42.603 回答