JavaScript form not submitting

Question

Travus 0 Light Poster

11 Years Ago

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>

javascript

3 Contributors
21 Replies
2K Views
2 Days Discussion Span
Latest Post 11 Years Ago Latest Post by Travus

stbuchok

11 Years Ago

Try this.

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.

stbuchok

11 Years Ago

and the href for the anchor tag is?

gon1387 22 Newbie Poster

11 Years Ago

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.

gon1387 22 Newbie Poster

11 Years Ago

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

stbuchok

11 Years Ago

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)

Reply to this topic

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.

Travus 0 Light Poster · Answer 1 · 2013-02-05T19:00:28+00:00

Also when I try to use

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

the form text disapers but nothing is posted.

Travus 0 Light Poster · Answer 2 · 2013-02-05T19:15:25+00:00

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.

Travus 0 Light Poster · Answer 3 · 2013-02-05T20:40:05+00:00

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.

Travus 0 Light Poster · Answer 4 · 2013-02-05T20:51:03+00:00

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.

Travus 0 Light Poster · Answer 5 · 2013-02-05T21:21:36+00:00

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.

Travus 0 Light Poster · Answer 6 · 2013-02-05T21:58:14+00:00

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.

gon1387 22 Newbie Poster · Answer 7 · 2013-02-06T16:13:26+00:00

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.

Travus 0 Light Poster · Answer 8 · 2013-02-06T17:29:58+00:00

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

Travus 0 Light Poster · Answer 9 · 2013-02-06T17:31:52+00:00

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

Travus 0 Light Poster · Answer 10 · 2013-02-06T17:37:20+00:00

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.

Travus 0 Light Poster · Answer 11 · 2013-02-06T18:02:13+00:00

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?

gon1387 22 Newbie Poster · Answer 12 · 2013-02-06T22:10:05+00:00

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

Travus 0 Light Poster · Answer 13 · 2013-02-06T23:29:40+00:00

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.

gon1387 22 Newbie Poster · Answer 14 · 2013-02-07T00:29:08+00:00

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

Travus 0 Light Poster · Answer 15 · 2013-02-07T16:29:16+00:00

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.

Travus 0 Light Poster · Answer 16 · 2013-02-07T19:15:26+00:00

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!