I am trying to submit a form using JavaScript however when I click my button the text in the form disapers but nothing is sent or posted to my php script.

<?php
    require_once("../content/includes/validation.php");
?>

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Contact | Buffalo Bridal Association</title>

        <meta charset="utf-8" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <meta name="author" content="Travus A. Gonzalez" />
        <meta name="robots" content="" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

        <!--<base href="http://localhost/buffalobridalassociation/" />-->
        <base href="http://hooksshoes.com/bbatest/" />

        <link rel="icon" href="content/images/favicon2.png" />
        <link rel="stylesheet" href="content/styles/reset.css" media="all">
        <link rel="stylesheet" href="content/styles/layout.css" media="screen" />
        <link rel="stylesheet" href="content/styles/site.css" media="screen" />

        <script src="content/scripts/jquery.js"></script>
        <script src="content/scripts/document_ready.js"></script>
        <script src="content/scripts/cufon-yui.js"></script>
        <script src="content/scripts/cufon-replace.js"></script>  
        <script src="content/scripts/Josefin_Sans_400.font.js"></script>
        <script src="content/scripts/Tangerine_700.font.js"></script>
        <script src="content/scripts/atooltip.jquery.js"></script> 
        <script src="content/scripts/jquery.nivo.slider.pack.js"></script>
        <script src="content/scripts/script.js"></script>
        <!--[if lt IE 9]>
            <script type="text/javascript" src="js/html5.js"></script>
            <style type="text/css">
                .aToolTip, .box1, .box1 .inner { behavior: url(js/PIE.htc); }
            </style>
        <![endif]-->
        <!--[if lt IE 7]>
            <div style='clear:both;text-align:center;position:relative'>
                <a href="http://www.microsoft.com/windows/internet-explorer/default.aspx?ocid=ie6_countdown_bannercode"><img src="http://www.theie6countdown.com/images/upgrade.jpg" border="0" alt="" /></a>
            </div>
        <![endif]-->
    </head>

    <body id="page6">
        <div class="body1">
            <div class="main">
                <header>
                    <div class="wrapper">
                        <h1><a href="site/index.php" id="logo"></a></h1>
                        <nav>
                            <ul id="menu">
                                <li class="first"><a href="site/index.php">Home</a></li>
                                <li><a href="site/members.php">Members</a></li>
                                <li><a href="site/shows.php">Bridal Shows</a></li>
                                <li id="menu_active"><a href="site/contact.php">Contact</a></li>
                            </ul>
                        </nav>
                    </div>
                </header>
            </div>
        </div>

        <div class="body3">
            <div class="main">
                <article id="content">
                    <div class="wrapper">
                        <div class="pad">
                            <div class="wrapper">
                                <section class="col1">
                                    <h2>Contact <span>Form</span></h2>

                                    <?php include("../content/includes/contact-email.php"); ?>

                                    <form id="ContactForm" action="site/contact.php" method="post">
                                        <div>
                                            <div class="wrapper">
                                                <span><label for="name">Name:</label></span>
                                                <input type="text" class="input" id="name" name="name" />
                                            </div>
                                            <div class="wrapper">
                                                <span><label for="email">Email:</label></span>
                                                <input type="text" class="input" id="email" name="email" />                              
                                            </div>
                                            <div class="textarea_box">
                                                <span><label for="message">Message:</label></span>
                                                <textarea name="message" id="message" cols="1" rows="1" placeholder="Tell us about your experience with our Member businesses."></textarea>                               
                                            </div>

                                            <a href="site/contact.php" onclick="document.getElementById('ContactForm').submit();" class="button"><strong>Send</strong></a>
                                            <a href="javascript:document.getElementById('ContactForm').reset();" class="button"><strong>Clear</strong></a>
                                        </div>
                                    </form>
                                    <p style="margin-top:75px;"><strong>Wedding professionals, not a member of the BBA, what are you waiting for?</strong><br /><a href="http://www.buffalobridalassociation.com/BBA_Application.pdf">Get your membership application today!</a></p>
                                </section>

                                <section class="col2 pad_left2">
                                    <h2>Our <span>Info</span></h2>
                                    <p class="pad_bot1">2727 Harlem Road, Buffalo NY, 14225</p>
                                    <div class="wrapper pad_bot1">
                                        <p class="address">
                                            Telephone:<br>
                                            Fax:<br>
                                            E-mail:
                                        </p>
                                        <p>
                                            +1 800 391 9741<br>
                                            716 884 1803<br>
                                            <a href="mailto:info@buffalobridalassociation.com">Click Here</a>
                                        </p>
                                    </div>
                                    <h2>Your <span>Feedback</span></h2>
                                    <p class="pad_bot1">All Members of Buffalo Bridal Association subscribe to a <a href="site/ethics.html">Code of Ethics</a> by which they pledge themselves to honesty and integrity.<br /><br />BBA Members acknowledge that their customers rely on their knowledge, experience and recommendations, and pledge not to betray the trust of their customers.</p>
                              </section>
                            </div>
                        </div>
                    </div>
                </article>
            </div>
        </div>

        <?php
            include("../content/includes/footer.php");
        ?>
    </body>
</html>

Also when I try to use

<input type="submit" value="Submit">

the form text disapers but nothing is posted.

ok so I have gotten the input to work by adding the name="submit" but I still can not get the button to behave the same way. Sorry for the triple post, please help.

Member Avatar for stbuchok

Try this.

<a href="#" onclick="document.getElementById('ContactForm').submit(); return false;" class="button"><strong>Send</strong></a>

Also, I'd avoid using "name" as the name of a control, I'd call it fullName instead. I can't remember if name is a reserved word or not and could cause issues.

Also, you can try using <input type="submit" ... /> first and make sure that everyting is posting properly before using javascript to call submit.

Thank you for your reply. I have tried using <input type="submit"> and it works just fine. Except I can't get the styles to work with an input button.

I have also tried your fix with onclick and returning false and it still is not posting.

Member Avatar for stbuchok

and the href for the anchor tag is?

I tried href="#" that then redirects to the base path.

I also tried href="site/contact.php" that redirects to its self but nothing was posted to my php script.

This is just a hack.
You have to look for the part of the script in your external js that has connection with the anchor tag, and edit it.

<a href="site/contact.php" onclick="event.preventDefault();$(this).closest('form').submit()" class="button">

You have to look at your external js for the part of the code that causes the problem, still.

I have no external JS connecting with the anchor tag. I may not understand your solution but it still does not work. Thank you for your reply.

Would a simple <a href="site/contact.php" onclick="event.preventDefault();"> prevents it from going anywhere?

If it doesn't work, please try this.

<a href="site/contact.php" onclick="event.preventDefault();$(this).closest('form')[0].submit()" class="button">

I tried both of your solutions, plus a few varrations on them and have come up with nothing. It is such an odd bug since things work fine with the input button or button tags. I am leaving this problem for the day and will return to it tomorrow. Maybe fresh eyes will help.

Thank you all for your replys keep them comming.

Member Avatar for stbuchok

change it from <a...></a> to <div...></div> and see what happens. Also are there any javascript errors (make sure that you have show errors on)

That's really pretty weird. Can you do an alert only on onclick handler like this,
onclick="alert('Hello')"
and see if the alert box runs.

The alert hello does indeed work as expected. I am tring the Div tag thing now.

Some more information, would it matter that I am trying to retrieve _POST[] values in my php script not _GET[]?

The Div seems to act exactly as the link does. It has to be a problem with the JavaScript I am using because when I use a button tag or an input it works fine.

Ok so I believe the javascript is working fine, and as it should. I think the problem is how I expected the php to pick up the submit.

if(isset($_POST['submit'])){
 ... Send email ...
}

I don't think the POST varable is being set to submit. Why is this and how can I fix my php to work with the way javascript submits the form?

There were no input tag, nor button that have a name "submit" that was passed from your form.

How can I make the anchor pass submit to the form, or rather how can I check if the anchor was submitted. This seems like the root of the problem and im sorry for the mis direction in the beginning. I want to thank everyone who has been helping for there time.

Hi Travus,

You can just put this somewhere in your code, it will create a hidden input tag with the name "submit" and a value of "submit".

$(document).ready(function(){
    $("#ContactForm").on("submit", function(evt){
        var $this = $(this),
            attr = {
                    "type": "hidden",
                    "name": "submit",
                    "value": "submit"
                },
            $submit = $("<input>").attr(attr);

        $this.append($submit);
    });
})

I tried this, also tried putting a hidden input into the form with html. Trying to find a way to edit my php to only run when the anchor is pressed. Thanks for all your help.

Solved! By omiting the href in the link (so it does not send a $_GET) and checking for the data name not the submit it works great!

Thank everyone so much for all your help!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.