Databases
StackOverflow2013
Postsdbo
POjQuery getting these functions to work together
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery getting these functions to work together
    text
    copied!<p>I'm new to jQuery and have tried looking around for an answer on how to do this. I have 2 functions and I would like both to work together. The one function is submitHandler and its used to hide a form and at the same time add a class to a hidden element to unhide it - ie a thank you for submitting h1. The other function is to grab the input data and display it onsubmit in the form. So the problem is that I can get that one to work but then the other doesnt. Ie on form submit I can see the data input but not the h1 Thank you message.</p> <p>Here are the functions:</p> <p>SubmitHandler: </p> <pre><code> submitHandler: function() { $("#content").empty(); $("#content").append( "&lt;p&gt;If you want to be kept in the loop...&lt;/p&gt;" + "&lt;p&gt;Or you can contact...&lt;/p&gt;" ); $('h1.success_').removeClass('success_').addClass('success_form'); $('#contactform').hide(); }, </code></pre> <p>onsubmit="return inputdata()"</p> <pre><code> function inputdata(){ var usr = document.getElementById('contactname').value; var eml = document.getElementById('email').value; var msg = document.getElementById('message').value; document.getElementById('out').innerHTML = usr + " " + eml + msg; document.getElementById('out').style.display = "block"; return true; }, </code></pre> <p>The form uses PHP and jQuery - I dont know about AJAX but after some reading even less sure. Please help me out I dont know what I'm doing and at the moment I am learning but its a long road for me still.</p> <p>Thank you</p> <p>The form: </p> <pre><code> &lt;form method="post" action="&lt;?php echo $_SERVER['PHP_SELF']; ?&gt;" id="contactform" onsubmit="return inputdata()"&gt; &lt;div class="_required"&gt;&lt;p class="label_left"&gt;Name*&lt;/p&gt;&lt;input type="text" size="50" name="contactname" id="contactname" value="" class="required" /&gt;&lt;/div&gt;&lt;br/&gt;&lt;br/&gt; &lt;div class="_required"&gt;&lt;p class="label_left"&gt;E-mail address*&lt;/p&gt;&lt;input type="text" size="50" name="email" id="email" value="" class="required email" /&gt;&lt;/div&gt;&lt;br/&gt;&lt;br/&gt; &lt;p class="label_left"&gt;Message&lt;/p&gt;&lt;textarea rows="5" cols="50" name="message" id="message" class="required"&gt;&lt;/textarea&gt;&lt;br/&gt; &lt;input type="submit" value="submit" name="submit" id="submit" /&gt; &lt;/form&gt; </code></pre> <p>The PHP bit:</p> <pre><code>&lt;?php </code></pre> <p>$subject = "Website Contact Form Enquiry";</p> <p>//If the form is submitted if(isset($_POST['submit'])) {</p> <pre><code>//Check to make sure that the name field is not empty if(trim($_POST['contactname']) == '') { $hasError = true; } else { $name = trim($_POST['contactname']); } //Check to make sure sure that a valid email address is submitted if(trim($_POST['email']) == '') { $hasError = true; } else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) { $hasError = true; } else { $email = trim($_POST['email']); } //Check to make sure comments were entered if(trim($_POST['message']) == '') { $hasError = true; } else { if(function_exists('stripslashes')) { $comments = stripslashes(trim($_POST['message'])); } else { $comments = trim($_POST['message']); } } //If there is no error, send the email if(!isset($hasError)) { $emailTo = 'info@bgv.co.za'; //Put your own email address here $body = "Name: $name \n\nEmail: $email \n\nComments:\n $comments"; $headers = 'From: My Site &lt;'.$emailTo.'&gt;' . "\r\n" . 'Reply-To: ' . $email; mail($emailTo, $subject, $body, $headers); $emailSent = true; } </code></pre> <p>} ?></p> <p>The Jquery Validate bit:</p> <pre><code>$(document).ready(function(){ $('#contactform').validate({ showErrors: function(errorMap, errorList) { //restore the normal look $('#contactform div.xrequired').removeClass('xrequired').addClass('_required'); //stop if everything is ok if (errorList.length == 0) return; //Iterate over the errors for(var i = 0;i &lt; errorList.length; i++) $(errorList[i].element).parent().removeClass('_required').addClass('xrequired'); }, </code></pre> <p>Here is the full jQuery bit:</p> <pre><code>$(document).ready(function(){ $('#contactform').validate({ showErrors: function(errorMap, errorList) { //restore the normal look $('#contactform div.xrequired').removeClass('xrequired').addClass('_required'); //stop if everything is ok if (errorList.length == 0) return; //Iterate over the errors for(var i = 0;i &lt; errorList.length; i++) $(errorList[i].element).parent().removeClass('_required').addClass('xrequired'); }, submitHandler: function() { $('h1.success_').removeClass('success_').addClass('success_form'); $("#content").empty(); $("#content").append('#sadhu'); $('#contactform').hide(); }, </code></pre> <p>}); });</p> <p>Latest edit - Looks like this:</p> <pre><code>$(document).ready(function(){ $('#contactform').validate({ showErrors: function(errorMap, errorList) { //restore the normal look $('#contactform div.xrequired').removeClass('xrequired').addClass('_required'); //stop if everything is ok if (errorList.length == 0) return; //Iterate over the errors for(var i = 0;i &lt; errorList.length; i++) $(errorList[i].element).parent().removeClass('_required').addClass('xrequired'); }, function submitHandler() { $('h1.success_').removeClass('success_').addClass('success_form'); $("#content").empty(); $("#content").append('#sadhu'); $('#contactform').hide(); }, function inputdata() { var usr = document.getElementById('contactname').value; var eml = document.getElementById('email').value; var msg = document.getElementById('message').value; document.getElementById('out').innerHTML = usr + " " + eml + msg; document.getElementById('out').style.display = "block"; }, $(document).ready(function(){ $('#contactForm').submit(function() { inputdata(); submitHandler(); }); }); </code></pre> <p>});</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload