1

I am using zurb's foundation as my css framework and unfortunately it won't let me submit the form. Even if I fill out everything and click the submit button nothing happens. Here is my current code.

  <div class="row panel clearfix">
     <div class="small-9 large-centered columns">
        <form action="record-time-out.php" method="POST" data-abide>
           <div class="small-8" >
              <div class="row">
                 <div class="small-3 columns">
                    <label class="right">PURPOSE</label>
                 </div>
                 <div class="small-9 columns">
                    <input type="text" name="txt_purpose" required>
                    <small class="error">Input your purpose.</small>
                 </div>
              </div>
           </div>
           <div class="small-8">
              <div class="row">
                 <div class="small-3 columns">
                    <label class="right">DESTINATION</label>
                 </div>
                 <div class="small-9 columns">
                    <input type="text" name="txt_destination" required>
                    <small class="error">Input your destination.</small>
                 </div>
              </div>
           </div>
           <div class="small-8">
              <div class="row">
                 <div class="small-3 columns">
                    <label class="right">Expected TIME-IN</label>
                 </div>
                 <div class="small-9 columns">
                    <input type="text" name="txt_time" required>
                 </div>
              </div>
           </div>
           <div class="row">
              <div class="small-3 columns">
              </div>
              <div class="small-9 columns">
                 <input type="submit" class="button" value="OUT"/> 
              </div>
           </div>
        </form>
     </div>
  </div>
Knut Holm
  • 3,988
  • 4
  • 32
  • 54
wobsoriano
  • 12,348
  • 24
  • 92
  • 162
  • 1
    Where is your PHP code? Any errors showing? Add an attribute `name` for your submit button too... – bcesars Mar 24 '15 at 12:42
  • I think it is, but i suspect you are not collecting properly. I would need to see the php code but to check its actually submitting Add **** to the top of record-time-out.php – CodingInTheUK Mar 24 '15 at 12:45
  • Same, I just confirmed that the form can submit. I think your problem lies else where. – robbmj Mar 24 '15 at 12:46
  • @bcesars It is working already, weird – wobsoriano Mar 24 '15 at 13:28
  • @Chris working already, weird – wobsoriano Mar 24 '15 at 13:29
  • @Chris I tried and it didn't work, not even loading or what – wobsoriano Mar 24 '15 at 16:10
  • if you have your php file already setup omit the php open and close tags you dont need them twice just use the print_r($_POST); It should just throw out an array it wont look pretty but its not meant to, if you want something more legible add echo '
    '; and echo '
    '; on the lines before and after respectively.
    – CodingInTheUK Mar 24 '15 at 16:33

3 Answers3

0

Remember the form code is always executed by the browser, so it won't know where is the "record-time-out.php" My suggestion is just add the url of your site and it will work, test it, would be something like this:

<div class="row panel clearfix">
 <div class="small-9 large-centered columns">
    <form action="http://example.com/record/record-time-out.php" method="POST" data-abide>
       <div class="small-8" >
          <div class="row">
             <div class="small-3 columns">
                <label class="right">PURPOSE</label>
             </div>
             <div class="small-9 columns">
                <input type="text" name="txt_purpose" required>
                <small class="error">Input your purpose.</small>
             </div>
          </div>
       </div>
       <div class="small-8">
          <div class="row">
             <div class="small-3 columns">
                <label class="right">DESTINATION</label>
             </div>
             <div class="small-9 columns">
                <input type="text" name="txt_destination" required>
                <small class="error">Input your destination.</small>
             </div>
          </div>
       </div>
       <div class="small-8">
          <div class="row">
             <div class="small-3 columns">
                <label class="right">Expected TIME-IN</label>
             </div>
             <div class="small-9 columns">
                <input type="text" name="txt_time" required>
             </div>
          </div>
       </div>
       <div class="row">
          <div class="small-3 columns">
          </div>
          <div class="small-9 columns">
             <input type="submit" class="button" value="OUT"/> 
          </div>
       </div>
    </form>
 </div>

KronuZ
  • 378
  • 2
  • 13
  • As long as the html file and php file are in the same directory then relative links are perfectly acceptable and can aid in portability if you happen to develop in one directory and then copy and paste into another final directory. – CodingInTheUK Mar 24 '15 at 16:36
0

Hope this may help you.

Add

<small class="error">Input Expected TIME-IN.</small>

after Expected TIME-IN text box.

Shravan Sharma
  • 989
  • 8
  • 17
0

Adding novalidate might help.

<form action="record-time-out.php" method="POST" data-abide novalidate>

In your form, You might have hidden input having required attribute.

Sky
  • 4,244
  • 7
  • 54
  • 83
  • What exactly does novalidate do? – wobsoriano Mar 24 '15 at 12:53
  • @FewFlyBy It ignores `required`. You have to validate inputs using JavaScript or you have to fix 'required's. In your form, You might have hidden input having required attribute. – Sky Mar 24 '15 at 12:58
  • It already worked without the novalidate. So can I just remove novalidate already? – wobsoriano Mar 24 '15 at 13:02
  • @FewFlyBy You added, it worked. Now you removed, it's still working? It's because of cache. Press `ctrl + F5` and check again. – Sky Mar 24 '15 at 13:05
  • @FewFlyBy also take a look at: http://stackoverflow.com/questions/22148080/an-invalid-form-control-with-name-is-not-focusable – Sky Mar 24 '15 at 13:06
  • @FewFlyBy So unfortunately you need to add `novalidate` – Sky Mar 24 '15 at 17:46
  • @FewFlyBy Go to developer mode (press `ctrl + shift + c`) then go to console tab and see what error occurs when you click on submit button. – Sky Mar 24 '15 at 17:48