Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jun 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need ajax/jquery help

    Hi,

    I am trying to build a custom contact form.

    The form is here at Contact | NED | Logo Print & Web Design | North Conway, N.H

    here is my code in the <head> section of my header.php - i am using wordpress.

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
    <script src="http://malsup.github.com/jquery.form.js"></script>
    <script>
    $(document).ready(function(){
    $("#myform").submit(function(){
    alert("Submitted");
    return false;
    $('#myForm').ajaxForm(function() {

    });
    $(this).ajaxSubmit();
    });
    });
    </script>

    I seem to be able to get the form to display the submit message, and not reload the browser. I have the form action="comment.php" with that file located in my site files folder.

    Here is my form code:

    <form id="myform" action="comment.php" method="post">
    <div class="row">
    <div class="col-md-2">
    <p>Name:</p>
    </div>
    <div class="col-md-10">
    <input id="name" type="text" name="name" style="width:100%;"/></div>
    </div>
    <div class="row" id="mbal">
    <div class="col-md-2">
    <p>E-Mail:</p>
    </div>
    <div class="col-md-10">
    <input id="name" type="text" name="e-mail" style="width:100%;"/>
    </div>
    </div>
    <div class="row" id="mbal">
    <div class="col-md-2">
    <p>Message:</p>
    </div>
    <div class="col-md-10">
    <textarea id="name" name="message" style="height:200px; width:100%;"></textarea>
    </div>
    </div>
    <div class="row" style="margin-top:25px;">
    <div class="col-md-2"></div>
    <div class="col-md-10">
    <center><input type="submit" value="send to ned" class="button"/></center>
    </div>

    </div>
    </form>

  • #2
    New to the CF scene
    Join Date
    Jun 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The problem I am having is I can not get anything to post to the comment.php file

  • #3
    New Coder
    Join Date
    Jul 2014
    Location
    Athens, Greece
    Posts
    38
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If you want, not your page to be reloaded to the browser, you can do this trick.

    <form id="myform" action=" method="post" target="myiframe">

    And add an iframe like this

    <iframe src="comment.php" style="margin:0;padding:0;width:0;height:0"></iframe>

    And into your comment.php, add

    <script>
    $(document).ready(function(){

    $("#myform").submit(function(){
    window.top.alert("Submitted");
    return false;

    });
    </script>

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,436
    Thanks
    23
    Thanked 629 Times in 628 Posts
    @travied123
    Please do not use iframes. It is not a 'trick'
    If you want, not your page to be reloaded to the browser, you can do this trick.
    It the road to hell!

    First learn how to write a form. All over the internet. Second, and very important, YOU CAN ONLY HAVE ONE ID WITH SINGLE NAME. You use it three times"
    <input id="name"....
    Lastly, you do not need JS to send a form. But it has advantages, like not reloading the page.

    Your JS ends with the return statement.
    Here is what your form could be coded as:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Title of the document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    
    <body>
    <form id="myform" action="comment.php" method="post">
    <table>
    <tr><td>
    <label for="name">Name : </label></td><td><input id="name" type="text" name="name"/>
    </td></tr><tr><td>
    <label for="email">E-Mail : </label></td><td><input id="email" type="text" name="e-mail"/>
    </td></tr><tr><td>
    <label for="name">Message :  </label></td><td><input id="message" type="text" name="message"/>
    </td></tr><tr><td colspan="2" style="text-align:right;">
    <input type="submit" value="send to ned" class="button"/>
    </td></tr>
    </table>
    </form>
    
    
    <!--
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
    	$(document).ready(function(){
    		$("#myform").submit(function(){
    			alert("Submitted");
    			return false;
    		});
    	});
    </script>
    -->
    </body>
    </html>
    If you un-comment the JS Then it will submit your form. The return ends the JS but it also keeps your page on the browser.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •