0

I am using a contact form in my site. everything is working just fine. except the successful message. I want to embed the thank you message in a p tag called "form-message". but when I am submitting the form it is redirecting me to another page. How I can fix the problem? Thanks

      <div class="col-md-6 col-md-6">
      <h3 class="title">Contact Form</h3>
      <p class="form-message">

      </p>
      <div class="contact-form"> 
        <!-- Form Begins -->
        <form role="form" name="contactform" id="contactform2" method="post" action="../../php/contact-form.php">
          <div class="row">
            <div class="col-md-6"> 
              <!-- Field 1 -->
              <div class="input-text form-group">
                <input type="text" name="contact_name" class="input-name form-control"
                                        placeholder="Full Name" />
              </div>
            </div>
            <div class="col-md-6"> 
              <!-- Field 2 -->
              <div class="input-email form-group">
                <input type="email" name="contact_email" class="input-email form-control"
                                        placeholder="Email" />
              </div>
            </div>
          </div>
          <!-- Field 3 -->
          <div class="input-email form-group">
            <input type="text" name="contact_phone" class="input-phone form-control" placeholder="Phone" />
          </div>
          <!-- Field 4 -->
          <div class="textarea-message form-group">
            <textarea name="contact_message" class="textarea-message form-control" placeholder="Message"
                                rows="6"></textarea>
          </div>
          <!-- Button -->
          <button class="btn btn-default" type="submit" name="form_sub">Send Now <i class="icon-paper-plane"></i></button>
        </form>
        <!-- Form Ends -->
      </div>
    </div>

Javascript

simplecontactForm2: function(){ 
    if ( $( "#contactform2" ).length !== 0 ) {
    $('#contactform2').bootstrapValidator({
            container: 'tooltip',
            feedbackIcons: {
                valid: 'fa fa-check',
                warning: 'fa fa-user',
                invalid: 'fa fa-times',
                validating: 'fa fa-refresh'
            },
            fields: { 
                contact_name: {
                    validators: {
                        notEmpty: {
                            message: ''
                        }
                    }
                },
                contact_email: {
                    validators: {
                        notEmpty: {
                            message: ''
                        },
                        emailAddress: {
                            message: ''
                        },
                        regexp: {
                                regexp: '^[^@\\s]+@([^@\\s]+\\.)+[^@\\s]+$',
                                message: 'The value is not a valid email address'
                        }
                    }
                },
                contact_phone: {
                    validators: {
                        notEmpty: {
                            message: ''
                        }
                    }
                },
                contact_message: {
                    validators: {
                        notEmpty: {
                            message: ''
                        }
                    }
                },
            }
        })  
        .on('success.form.bv', function(e) {
            e.preventDefault();
            var $form        = $(e.target),
            validator    = $form.data('bootstrapValidator'),
            submitButton = validator.getSubmitButton();
            var form_data = $('#contactform2').serialize();
            $.ajax({
                    type: "POST",
                    dataType: 'json',
                    url: "../php/contact-form.php",                 
                    data: form_data,
                    success: function(msg){                     
                        $('.form-message2').html(msg.data);
                        $('.form-message2').show();
                        submitButton.removeAttr("disabled");
                        resetForm($('#contactform2'));                      
                    },
                    error: function(msg){}
             });
            return false;
        });
    }
    function resetForm($form) {

        $form.find(
                'input:text, input:password, input, input:file, select, textarea'
            )
            .val('');

        $form.find('input:radio, input:checkbox')
            .removeAttr('checked')
            .removeAttr('selected');
        $form.find('button[type=submit]')
            .attr("disabled", "disabled");

    }
},

PHP

<?

php
// Information to be modified
$to_email = "mymail@yahoo.com"; //email address to which the form data will be sent
$subject = "Contact Request"; // subject of the email that is sent
$thanks_page = "index.html"; // path to the thank you page following successful form submission
$contact_page = "index.html"; // path to the HTML contact page where the form appears


$nam = strip_tags($_POST["contact_name"]);
$ema = strip_tags($_POST["contact_email"]);
$pho = strip_tags($_POST["contact_phone"]);
$com = strip_tags($_POST["contact_message"]);

$headers  = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$headers .= 'From: <' .$ema. '>' . "\r\n";
$headers .= "Reply-To: ".$ema."\r\n";

$email_body = 
    "<strong>From: </strong>" . $nam . "<br />
    <strong>Email: </strong>" . $ema . "<br />  
    <strong>Phone: </strong>" . $pho . "<br />  
    <strong>Message: </strong>" . $com;


// Assuming there's no error, send the email and redirect to Thank You page

if( mail($to_email, $subject, $email_body, $headers) ) {    
    $msg_array = array( 'status' => 'true', 'data' => '<i class="glyphicon glyphicon-ok"></i> Thank you ' .$nam. '. Your Email was successfully sent!' );
    echo json_encode($msg_array);

} else {    
    $msg_array = array( 'status' => 'true', 'data' => '<i class="glyphicon glyphicon-remove"></i> Sorry ' .$nam. '. Your Email was not sent. Resubmit form again Please..' );
    echo json_encode($msg_array);   
}
user3396867
  • 109
  • 2
  • 11
  • Your form's action shows as `action="../../php/contact-form.php"` yet your JS shows as `url: "../php/contact-form.php",` - Check for errors, check your console. – Funk Forty Niner Nov 25 '15 at 15:11
  • Then I don't know if your last code has the ` php` broken up like that and in seperate lines. – Funk Forty Niner Nov 25 '15 at 15:12
  • So I believe you want to submit the form without reloading the page http://stackoverflow.com/questions/2866063/submit-form-without-page-reloading – Lucas Pottersky Nov 25 '15 at 15:13
  • the JS ,the php and the form page are in different folder. and the php tag showing on different line in stackoverflow. in the main code it is ok – user3396867 Nov 25 '15 at 15:19
  • then comment #1 applies here, unless you have 2 different files in 2 different sub-paths. – Funk Forty Niner Nov 25 '15 at 15:20
  • if I change the path. it is not working also. I have an exact same form in another page. that is working but this one is not working – user3396867 Nov 25 '15 at 15:21

0 Answers0