0

Hi I am trying to change the <p id="returnsuccess"></p> to say anything at this point. I have some code it's about a form submission I don't think the PHP part is that important in solving this problem. But I want to know why the code I have doesn't work and if anyone has a solution please tell me.

HTML

<!DOCTYPE html>
<html>
<head>
<title>Contact Me - Weblup</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel='stylesheet' type='text/css' href='files/main_style.css?1413656266' title='wsite-theme-css' />
<link href='http://fonts.googleapis.com/css?family=Dosis:400,300,200,700&subset=latin,latin-ext' rel='stylesheet' type='text/css' />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="css/contact_me/contact_form.css" />
<script src="javascript/contact_me/contact_me.js"></script>

</head>
<body class='tall-header-page  wsite-theme-light wsite-page-contact-me'>
<div class="bg-wrapper">
<div id="header-wrap" class="wsite-background wsite-custom-background">
  <div class="container">
    <table id="header" class="container">
      <tr>
        <td id="logo"><span class='wsite-logo'><a href='index.html'><span id="wsite-title">Weblup</span></a></span></td>
        <td id="nav"><ul class='wsite-menu-default'>
            <li id='pg611475163959785219'><a href='index.html'>Home</a></li>
            <li id='pg795699127864007860'><a href='about-me.html'>About Me</a></li>
            <li id='active'><a href='contact-me.html'>Contact Me</a></li>
            <li id='pg678103730359273510'><a href='need-a-website-built.html'>Need a Website Built?</a></li>
            <li id='pg461392837777438804'><a href='jobs.html'>Jobs</a></li>
          </ul></td>
      </tr>
      <tr>
        <td colspan="2" id="banner"><h2><span class='wsite-text wsite-headline'>Got a question?</span></h2></td>
      </tr>
    </table>
  </div>
</div>
<!-- end Header-wrap -->

<div id="main-wrap">
<div class="container">
<div id='wsite-content' class='wsite-elements wsite-not-footer'>
<div class="paragraph" style="text-align:center;">If you have a question of some kind, or just need to talk about something (that has to do with web design) then go ahead and fill out this form and I'll make sure to reply as soon as possible.</div>
<div id="mainform"> 
  <!-- Required div starts here -->
<div id="returnmessagecont"
    <p id="returnsuccess"></p>
</div>
  <div class="formcontainer">
    <form id="form">
      <h3>Contact Form</h3>
      <p id="returnmessage"></p>
      <label>Name: <span>*</span></label>
      <br/>
      <input type="text" id="name" placeholder="Name"/>
      <br/>
      <br/>
      <label>Email: <span>*</span></label>
      <br/>
      <input type="text" id="email" placeholder="Email"/>
      <br/>
      <br/>
      <label>Contact No: <span>*</span></label>
      <br/>
      <input type="text" id="contact" placeholder="10 digit Mobile no."/>
      <br/>
      <br/>
      <label>Message:</label>
      <br/>
      <textarea id="message" placeholder="Message......."></textarea>
      <br/>
      <br/>
      <input type="button" id="submit" value="Submit"/>
      <br/>
    </form>
  </div>
</div>
</body>
</html>

JS

$(document).ready(function(){  
$("#submit").click(function(){
    $("#submit").prop('value', 'Submitting');
    var name = $("#name").val();
    var email = $("#email").val();
    var message = $("#message").val();
    var contact = $("#contact").val();

    $("#returnmessage").empty(); //To empty previous error/success message.
//checking for blank fields 
if(name==''||email==''||contact==''||message=='')
{
    alert("Please Fill Required Fields");
    $("#submit").prop('value', 'Submit');
}
else{
// Returns successful data submission message when the entered information is stored in database.
$.post("http://weblup.net/php/contact_me/contact_me.php",{ name1: name, email1: email, message1:message, contact1: contact},
   function(data) {
                $("#returnmessage").append(data);//Append returned message to message paragraph
                    if(data=="Your Query has been received, We will contact you soon."){
                        $(".formcontainer").remove();
                        $("#submit").prop('value', 'Submit');
                        document.getElementById("returnsuccess").innerHTML = "Hello";
                    }
                    else{
                        $("#submit").prop('value', 'Submit');   
                    }
            });
         }

});
});
1
Contributor
1
Reply
5
Views
2 Years
Discussion Span
Last Post by Bensirpent07
0

Oh my gosh I feel so dumb, I was looking over the code and I noticed the <div> element that was containing where the inserted message would be wasn't closed it looked like this...

<div id="returncont"
    <p id="returnsuccess"></p>
</div>

So apparently the code all works... just gotta make sure I close my tags haha.

Edited by Bensirpent07

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.