0

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>
3
Contributors
21
Replies
22
Views
4 Years
Discussion Span
Last Post by Travus
0

Also when I try to use

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

the form text disapers but nothing is posted.

0

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.

0

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.

0

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.

0

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.

0

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.

0

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.

0

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">
0

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.

0

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)

0

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.

0

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

0

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

0

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.

0

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?

0

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

0

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.

0

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);
    });
})
0

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.

0

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!

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.