0

我在这里尝试做的是在表单中,如果没有输入任何字段,则会显示警报,如果即使输入了一个字段,也会提交表单。我正在使用 javascript 提交表单这里是我的表单-

   <form  method="POST" name="report" id="reportbean">

        <div id="maindiv">
            <div align="center">
                <p>&nbsp;</p>
                <p id="Title">CHANDNA COLD STORAGE
                </p>
            </div>
            <p>&nbsp;</p>
            <p>&nbsp;   </p>
            <p align="center" style="font-size: 20px; text-align: left;"> OCCUPANT    DETAILS:</p>
            <table width="770" height="97" cellpadding="10" >
                <tr>
                    <td><input type="text" name="FirstName" id="FirstName"     placeholder="FIRSTNAME" value="${firstname}" onchange="stringCheck(this);"  /></td>

                    <td><input type="text" name="LastName" id="LastName" placeholder="LASTNAME" value="${lastname}" onchange="stringCheck(this);"  ></td>
                    <td><input type="text" name="Village" id="Village" placeholder="VILLAGE" value="${village}" onchange="stringCheck(this);" ></td>
                </tr>
                <tr>
                    <td><input type="text" name="FatherName" id="FatherName" placeholder="FATHER'S NAME" value="${sonof}" onchange="stringCheck(this);" ></td> 
                    <td><input type="text" name="District" id="District" placeholder="DISTRICT" value="${district}" onchange="stringCheck(this);" ></td>
                    <td>&nbsp;</td>
                </tr>
            </table>
            <p>&nbsp;</p>
           <div id="occupationlist" >
            <display:table name="List" export="true" class="displaytag"   sort="list"   >
                <display:setProperty name="basic.empty.showtable" value="true" />

                <display:column  property="occid" title="ID" ></display:column>
                <display:column  property="firstName" title="First Name" ></display:column>
                <display:column  property="lastName" title="Last Name"   ></display:column>
                <display:column  property="sonOf" title="Father's Name"  ></display:column>
                <display:column  property="district" title="District"  ></display:column>
                <display:column  property="village" title="Village"  ></display:column>
                <display:column  title="Reservation Form">
                    <input type="button" id="reservationid" name="show reservation" onClick="javascript:toggle1();" value="show reservation det">
                </display:column>
                <display:column  title="Agreement Form">

                    <input type="button" id="agreementid" name="show agreement" onClick="javascript:toggle2();" value="show agreement det">
                </display:column>
            </display:table>
            </div>
            <br>
            <br>
            <div id="reservationlist" style="display: none">
                <display:table name="List1" export="true" class="displaytag" sort="list"  >
                <display:setProperty name="basic.empty.showtable" value="true"  />

                <display:column  property="resid" title="Reservation ID" ></display:column>
                <display:column  property="date" title="Date" ></display:column>
                <display:column  property="weight" title="Weight"   ></display:column>
                <display:column  property="bags" title="Bags"  ></display:column>
                <display:column  property="amount" title="Amount"  ></display:column>
                <display:column  property="advance" title="Advance"  ></display:column>

            </display:table>   
            </div>
            <br>
            <br>

            <div id="agreementlist" style="display: none" >
                <display:table name="List2" export="true" class="displaytag" sort="list" >
                <display:setProperty name="basic.empty.showtable" value="true" />

                <display:column  property="agreeNo" title="Agreement ID" ></display:column>
                <display:column  property="date" title="Date" ></display:column>
                <display:column  property="weight" title="Weight"   ></display:column>
                <display:column  property="rate" title="Rate"  ></display:column>
                <display:column  property="bags" title="Bags"  ></display:column>
                <display:column  property="amount" title="Amount"  ></display:column>
                <display:column  property="advance" title="Advance"  ></display:column>
                <display:column  property="lotNo" title="Lot No"  ></display:column>


            </display:table>            
            </div>
            <p align="CENTER">
              <input type="button" name="BACK" id="BACK" value="BACK"  width="10px" height="10px" onClick="javascript:goBack()">&nbsp;&nbsp;
              <input type="button" name="SUBMIT" id="submit" value="SEARCH" onclick="checkemptyreport();" >
            </p>

   </div>
   <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>

    </form>

这是我的javascript函数-

  function checkemptyreport()
 {
var firstname = document.getElementById("FirstName").value;
var lastname = document.getElementById("LastName").value;
var fathername = document.getElementById("FatherName").value;
var village = document.getElementById("Village").value;
var district = document.getElementById("District").value;
if((firstname=="") && (lastname == "") && (village == "") && (fathername == "") &&     (district == "")  )
{

    alert("Enter Atleast One field");
    document.getElementById("FirstName").focus();
    return false;
}
else
{
    alert(2);

    //document.forms["report"].submit();
   document.form["report"].action = "/reportbeanservlet";
    //document.location = "reportbeanservlet";
    return true;
    }
}
4

2 回答 2

3

将搜索按钮的类型更改为“提交”(类型按钮不提交表单),它将提交表单。或者你可以这样做:

  document.form["report"].submit();

函数内部checkemptyreport()

于 2013-04-12T16:42:07.133 回答
1

看这个例子:

Javascript

window.onsubmit = function()
{
    var firstname = document.getElementById("FirstName").value;
    var lastname = document.getElementById("LastName").value;
    var district = document.getElementById("District").value;

    if(firstname == "" && lastname=="" && district=="")
    {
        alert("Fill in at least one");
        return false;
    }
    else  
    {
        alert(2);
        //document.forms["report"].submit();
        document.form["report"].action = "/reportbeanservlet";
        //document.location = "reportbeanservlet";
        return true;
    }
}

标记

<form  method="POST" name="report" id="reportbean">
    <input type="text" name="FirstName" id="FirstName" />
    <input type="text" name="LastName" id="LastName" />
    <input type="text" name="District" id="District" />
    <input type="submit" value="Submit" />
</form>

这当然是您的代码的较小版本,但正如@tomor 所建议的那样,您可以使用提交按钮来完成它,并捕获表单的onsubmit事件。

jsFiddle:http: //jsfiddle.net/hescano/xZEbH/

于 2013-04-12T16:54:08.553 回答