Form should submit only when all data is filled

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • vikas251074
    New Member
    • Dec 2007
    • 198

    Form should submit only when all data is filled

    I now creating material outpass for taking material out from our campus.
    In the first page, persons name taking material out, issue_date, department, vehicle_no, driver_name, purpose, received_by and remarks is entered.
    In the second page no. of materials to taken out is given.
    In the third page, it creates no. of row as mentioned in the second page. suppose 5. Five row is created. Fields in this page are material_name, company_sr_no, department_sr_n o, quantity, weight, remarks. Two buttons are there. One is 'Cancel' and other is form submit button 'Add'.

    Here in third page, one problem regular occurs. When enter key is pressed by mistake without filling all details, the form is submitted (i.e. 'Add' button is pressed). How can I stop this? I want to there should be no effect of enter key without filling all the five row. If any one tries to click 'Add', 'Add' button should not work untill and unless all the five rows of material are filled.

    Thanks and regards,
    Vikas
  • DrBunchman
    Recognized Expert Contributor
    • Jan 2008
    • 979

    #2
    Hi Vikas,

    You can use Javascript to validate your form after you've clicked your Add button and prevent it from submitting if certain conditions are not met.

    Let's assume we have a form called TestForm with two textboxes and a submit button.
    Code:
     <form name="TestForm" action="JS_Val.asp">
      <input type="text" name="txt1" />
      <input type="text" name="txt2" />
      <input type="submit" value="Submit" OnClick="return Val();" />
     </form>
    Notice that the submit button has an action defined for the OnClick event which means that when it is clicked the function Val() will be fired. It says "return Val();" which means the function is going to return a value telling the form whether to submit or not. Without that "return" the form would submit regardless of what we tell it to do. Here's an example of the Javascript function Val() which we could place between our head tags:
    Code:
    <head> 
    <script type="text/javascript">
     {
     var txt1 = document.TestForm.txt1.value;
     var txt2 = document.TestForm.txt2.value;
     if (txt1 == '')
       {
       return false;
       }
     if (txt2 =='')
       {
       return false;
       }
     } 
    </script>
    </head>
    Can you see what the code is doing? If either of the textboxes are blank then the function will return false to the submit button preventing it from continuing. Otherwise the function will return it's default value of true and your form will submit.

    Let me know if this helps,

    Dr B

    Comment

    • vikas251074
      New Member
      • Dec 2007
      • 198

      #3
      What coding if there is an array of records like as below.

      Each record contains five fields, material_name, comp_sr_no, dept_sr_no, qty, wt.
      And suppose there are three records. Now I want to check only material_name, if all the three records are filled with material_name. How can I check this? I don't know how to do this. I have tried to searched this solution on internet.

      Thanks and regards,
      Vikas

      Comment

      • DrBunchman
        Recognized Expert Contributor
        • Jan 2008
        • 979

        #4
        Vikas,

        The Javascript example I gave you above will validate the controls on your page so that your user cannot submit the form until they have filled in all the fields which you specified.

        I don't understand what you mean 'an array of records'? Are you talking about database records? Is this a new question or does it relate to your original problem?

        Please give code examples to explain your problem.

        Dr B

        Comment

        • vikas251074
          New Member
          • Dec 2007
          • 198

          #5
          OK Sir, I am giving you code through attachment.


          Thanks and regards,
          Vikas
          Attached Files

          Comment

          • printedgoods
            New Member
            • Nov 2007
            • 9

            #6
            I have had this same problem on a form that i was using custom buttons for. And through days of research found out that pressing the "enter key" will bypass your validation.

            You can run a javascript that will disable the enter key. Do a google search for more if this link doesn't help.

            enter key

            I hope this helps.

            Jason
            printedgoods.co m

            Comment

            • vikas251074
              New Member
              • Dec 2007
              • 198

              #7
              Yes sir, this problem has been solved by using javascript method.

              Thanks and regards,
              Vikas

              Comment

              • Jerry Winston
                Recognized Expert New Member
                • Jun 2008
                • 145

                #8
                Originally posted by printedgoods
                I have had this same problem on a form that i was using custom buttons for. And through days of research found out that pressing the "enter key" will bypass your validation.

                You can run a javascript that will disable the enter key. Do a google search for more if this link doesn't help.

                enter key

                I hope this helps.

                Jason
                printedgoods.co m
                printedgoods,

                did you ever find a solution to your form submit/validation? If not heres one that works for me using FireFox or IE.

                Code:
                <form id='frmMyform' action='go.asp' method='post'>
                         <input type="text" id='txtFirstName'>
                         <input type="text" id='txtLastName'>
                         ...
                         <input type="button" onclick="getElementById('frmMyform').submit();">
                </form>
                the reason this works is because you dont have a submit button in the form. the submit action can be triggered by pressing enter. By using a "button" type input element, there is no submit button to be triggered and the only way the form can be submitted is through the onclick action.

                Comment

                Working...