0

Basically I have a page that displays a seating plan using check boxes. These check boxes can be ticked to represent the seat being booked. I also have a text input where names are entered for the bookings, these forms are then posted to the next page to work out what check boxes are selected and save them in the database. This is some of the code:

        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>

Is there any way i can incorporate validation with my current code? I need the names text checked to make sure there is actually a name entered. This needs to happen before the next page is accessed. Any ideas?

4

2 に答える 2

0

Working example

http://jsfiddle.net/

The below example demonstrates how you can pass a value to the function checkInput and it will determine whether or not it is a valid input - the function uses jQuery but you can do it whthout jQuery too.

Demo HTML:

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

JS Function (goes with HTML demo):

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

Try first add ids to your text input:

<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 に答える