Menu icon Foundation
Data-abide submit with anchor tag instead of button

Does anyone know how to, or have an example of, using Foundations data-abide with an anchor tag submit instead of a button?

I imagine I need to use data-abide="ajax" but I simply do not know how to go about it.

When I attempt to use the on click event of the anchor tag I do not get any validation, and the form submits even when all fields are left blank.

<?php

session_start();

include("lib/bootstrap_time_mgnt.php");

include("../assets/php/class.acl.php");

 

/* UNRELATED CODE REMOVED FOR POST */

?>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />

<title>Time Management</title>

<!-- <link href="css/register.css" rel="stylesheet" type="text/css" media="screen" /> -->

<link rel="stylesheet" href="../css/normalize.css" />

<link rel="stylesheet" href="../css/foundation.css" />

<link rel="stylesheet" href="../css/app.css" />

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="application/javascript" src="../js/sha512.js"></script>

<script type="application/javascript" src="../js/modernizr.js"></script>

 

<!-- JAVASCRIPT FUNCTIONS -->

 

<script type="application/javascript">

// THIS FUNCTION CALLED BY BUTTON SUBMIT WORKS

function regformhash2(e){

    var form = document.getElementById('register_form');

   

    var pw = document.getElementById('password');

   

                var uid = document.getElementById('username');

                var email = document.getElementById('email');

                var fname = document.getElementById('first_name');

                var lname = document.getElementById('last_name');

               

                var p = document.createElement("input");

                form.appendChild(p);

                p.name = "p";

                p.type = "hidden";

                p.value = hex_sha512(password.value);

               

                return true;

}

 

// THIS FUNCTION CALLED BY ANCHOR TAG SUBMIT DOES NOT WORK

function regformhash3(e){

                e.preventDefault();

                var form = document.getElementById('register_form');

               

                var pw = document.getElementById('password');

                alert('PASSWORD: ' + pw.value);

                var uid = document.getElementById('username');

                var email = document.getElementById('email');

                var fname = document.getElementById('first_name');

                var lname = document.getElementById('last_name');

               

                var p = document.createElement("input");

 

                form.appendChild(p);

               

                p.name = "p";

                p.type = "hidden";

                p.value = hex_sha512(pw.value);

               

                form.submit();

 

                return false;

}

</script>

 

</head>

<body class="lang-<?php echo get_lang(); ?>">

<?php include("../nav2.php"); ?>

 

<form data-abide id="register_form" method="post" name="register_form">

  <!-- UNRELATED CODE REMOVED FOR FORUM POST -->

  <div class="row">

    <div class="large-4 large-centered columns" style="text-align:center;">

 

                <!-- THIS SUBMIT BUTTON WORKS WITH FUNCTION regformhash2 -->

      <button type="submit" class="small round button" onclick="return regformhash2(event);">Register2</button>

 

      <?php if(!isset($error_msg)) { ?>

                <button type="reset" class="small round button fixed-width-large">Reset</button>

      <?php } else { ?>

                <button class="small round button fixed-width-large" type="button" onClick="parent.location='register.php'">Reset</button>

      <? } ?>

    </div>

  </div>

 

  <div class="row">

    <div class="large-12 large-centered columns">

                <!-- THE ACHOR ONCLICK DOES NOT WORK WITH FUNCTION regformhash3 -->

      <a class="right bold-link" href="javascript:void(0);" onclick="regformhash3(event); return false">Register&nbsp;<img src="../img/icons/ArrowBTN.png"></a>

    </div>

  </div>

  <!-- UNRELATED CODE REMOVED FOR FORUM POST -->

</form>

  

  <!-- UNRELATED CODE REMOVED FOR FORUM POST -->

 

<script src="../js/vendor/jquery.js"></script>

<script src="../js/foundation.min.js"></script>

<script src="../js/stickyFooter.js"></script>

 

  <script>

    $(document).foundation();

  </script>

 

</body>

</html>


            

         

data-abideAJAXjavascript

Does anyone know how to, or have an example of, using Foundations data-abide with an anchor tag submit instead of a button?

I imagine I need to use data-abide="ajax" but I simply do not know how to go about it.

When I attempt to use the on click event of the anchor tag I do not get any validation, and the form submits even when all fields are left blank.

<?php

session_start();

include("lib/bootstrap_time_mgnt.php");

include("../assets/php/class.acl.php");

 

/* UNRELATED CODE REMOVED FOR POST */

?>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />

<title>Time Management</title>

<!-- <link href="css/register.css" rel="stylesheet" type="text/css" media="screen" /> -->

<link rel="stylesheet" href="../css/normalize.css" />

<link rel="stylesheet" href="../css/foundation.css" />

<link rel="stylesheet" href="../css/app.css" />

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="application/javascript" src="../js/sha512.js"></script>

<script type="application/javascript" src="../js/modernizr.js"></script>

 

<!-- JAVASCRIPT FUNCTIONS -->

 

<script type="application/javascript">

// THIS FUNCTION CALLED BY BUTTON SUBMIT WORKS

function regformhash2(e){

    var form = document.getElementById('register_form');

   

    var pw = document.getElementById('password');

   

                var uid = document.getElementById('username');

                var email = document.getElementById('email');

                var fname = document.getElementById('first_name');

                var lname = document.getElementById('last_name');

               

                var p = document.createElement("input");

                form.appendChild(p);

                p.name = "p";

                p.type = "hidden";

                p.value = hex_sha512(password.value);

               

                return true;

}

 

// THIS FUNCTION CALLED BY ANCHOR TAG SUBMIT DOES NOT WORK

function regformhash3(e){

                e.preventDefault();

                var form = document.getElementById('register_form');

               

                var pw = document.getElementById('password');

                alert('PASSWORD: ' + pw.value);

                var uid = document.getElementById('username');

                var email = document.getElementById('email');

                var fname = document.getElementById('first_name');

                var lname = document.getElementById('last_name');

               

                var p = document.createElement("input");

 

                form.appendChild(p);

               

                p.name = "p";

                p.type = "hidden";

                p.value = hex_sha512(pw.value);

               

                form.submit();

 

                return false;

}

</script>

 

</head>

<body class="lang-<?php echo get_lang(); ?>">

<?php include("../nav2.php"); ?>

 

<form data-abide id="register_form" method="post" name="register_form">

  <!-- UNRELATED CODE REMOVED FOR FORUM POST -->

  <div class="row">

    <div class="large-4 large-centered columns" style="text-align:center;">

 

                <!-- THIS SUBMIT BUTTON WORKS WITH FUNCTION regformhash2 -->

      <button type="submit" class="small round button" onclick="return regformhash2(event);">Register2</button>

 

      <?php if(!isset($error_msg)) { ?>

                <button type="reset" class="small round button fixed-width-large">Reset</button>

      <?php } else { ?>

                <button class="small round button fixed-width-large" type="button" onClick="parent.location='register.php'">Reset</button>

      <? } ?>

    </div>

  </div>

 

  <div class="row">

    <div class="large-12 large-centered columns">

                <!-- THE ACHOR ONCLICK DOES NOT WORK WITH FUNCTION regformhash3 -->

      <a class="right bold-link" href="javascript:void(0);" onclick="regformhash3(event); return false">Register&nbsp;<img src="../img/icons/ArrowBTN.png"></a>

    </div>

  </div>

  <!-- UNRELATED CODE REMOVED FOR FORUM POST -->

</form>

  

  <!-- UNRELATED CODE REMOVED FOR FORUM POST -->

 

<script src="../js/vendor/jquery.js"></script>

<script src="../js/foundation.min.js"></script>

<script src="../js/stickyFooter.js"></script>

 

  <script>

    $(document).foundation();

  </script>

 

</body>

</html>


            

         
Rafi Benkual about 4 years ago

I looks like it only works with the button tag, but this makes sense since the action is a button. It could be an anchor if you were sending the user to another page on submit. Is that you use case?

Richard Pereira about 4 years ago

Yes Rafi, this submit will go to another page.