0

I would like to replace my HTML button with a JavaScript action. Though I need to a function to submit the form for this to work.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>reCAPTCHA | Blazzike</title>
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script src='https://www.google.com/recaptcha/api.js'></script>
        <script> 
            $(function(){
              $("header").load("HTML/header.html"); 
              $("footer").load("HTML/footer.html"); 
            });
        </script>

        <script>
            var submit = function(){
                document.getElementById("rec").submit();
            }
        </script>
        <link rel="stylesheet" type="text/css" href="CSS/style.css">
        <style>
            #submit {
                background: #1a1a1a;
                color: #ffffff;
                font-size: 25px;
                margin: 0px;
                padding: 0.7em;
                border: 0px;
                width: 303px;
                min-width: 250px;
            }
        </style>
    </head>
    <header></header>
    <body>
        <center>
            <form id="rec" method="POST" action="<?php echo $_GET["r"]; ?>">
                <div data-theme="dark" class="g-recaptcha" data-sitekey="<siteKey>" data-callback="submit"></div>
                <input value="Continue" type="submit" id="submit">
            </form>
        </center>
    </body>
    <footer></footer>
</html>

the script above does not work because I assume JavaScript can't submit post forms this way. Any help will do.

Thanks, Blazzike.

Improve this question
4
  • 1
    And you call the function how? Commented Feb 23, 2016 at 20:52
  • Maybe you need to share more code. Commented Feb 23, 2016 at 21:04
  • I added the pages code. I hope you can enlighten me. Commented Feb 23, 2016 at 21:08
  • There's a little php I didn't remember that sorry. Commented Feb 23, 2016 at 21:10

2 Answers 2

Reset to default
1

If you want the user to click the submit button, have a Javascript function run and do some tasks, then submit the form you can do something like this using jQuery.

//First prevent form from submitting on button click
$("#rec").on('submit', function(e) {
    e.preventDefault();
});

//Detect submit button click and perform some actions, then submit form
$("#submit").on('click', function() {
   //Do whatever you want here
   //...

   $("#rec").submit();
});
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

Try some javascript to select the element by id. Make sure uou put the "rec" as id of the form jn the html!

document.getElementById("rec").submit();
  1. Docs about getElementById
  2. Docs about submit function

Edit 1: Use input type="button" instead of submit. Then use the second part of Matt Elliot's snippet:

//Detect submit button click and perform some actions, then submit form 
$("#submit").on('click', function() { 
    //Do whatever   you want here //... 
    $("#rec").submit(); 
});
Improve this answer

1 Comment

Sadly I have tried this method. I added all my code now. :) Thanks for help. I am very new to JavaScript sorry!