2016-03-22 7 views
1

私は自分のウェブサイトで簡単なPHPの連絡フォームを使用していますが、メッセージを送信すると、送信ボタンをクリックするとホームページに戻ります。私はそれを避け、ページにとどまりたいです。submit toホームページに戻る

ここに私のコードです:

ヘッダーPHP:

<?php 
//If the form is submitted 
if(isset($_POST['submit'])) { 

//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 that the phone field is not empty 
if(trim($_POST['phone']) == '') { 
    $hasError = true; 
} else { 
    $phone = trim($_POST['phone']); 
} 

//Check to make sure that the name field is not empty 
if(trim($_POST['weburl']) == '') { 
    $hasError = true; 
} else { 
    $weburl = trim($_POST['weburl']); 
} 

//Check to make sure that the subject field is not empty 
if(trim($_POST['subject']) == '') { 
    $hasError = true; 
} else { 
    $subject = trim($_POST['subject']); 
} 

//Check to make sure sure that a valid email address is submitted 
if(trim($_POST['email']) == '') { 
    $hasError = true; 
} else if (!filter_var(trim($_POST['email'], FILTER_VALIDATE_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 = '[email protected]'; // Put your own email address here 
    $body = "Name: $name \n\nEmail: $email \n\nPhone Number: $phone \n\nSubject: $subject \n\nComments:\n $comments"; 
    $headers = 'From: My Site <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email; 

    mail($emailTo, $subject, $body, $headers); 
    $emailSent = true; 
} 
} 
    ?> 

フォーム:

<div class="container"> 


<div class="row"> 
    <div class="col-md-6 col-md-push-3"> 
    <form role="form" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" id="contactform"> 
     <fieldset> 
     <legend>Send Us a Message</legend> 

     <?php if(isset($hasError)) { //If errors are found ?> 
      <p class="alert alert-danger">Please check if you've filled all the fields with valid information and try again. Thank you.</p> 
     <?php } ?> 

     <?php if(isset($emailSent) && $emailSent == true) { //If email is sent ?> 
      <div class="alert alert-success"> 
      <p><strong>Message Successfully Sent!</strong></p> 
      <p>Thank you for using our contact form, <strong><?php echo $name;?></strong>! Your email was successfully sent and we&rsquo;ll be in touch with you soon.</p> 
      </div> 
     <?php } ?> 

     <div class="form-group"> 
      <label for="name">Your Name<span class="help-required">*</span></label> 
      <input type="text" name="contactname" id="contactname" value="" class="form-control required" role="input" aria-required="true" /> 
     </div> 

     <div class="form-group"> 
      <label for="phone">Your Phone Number<span class="help-required">*</span></label> 
      <input type="text" name="phone" id="phone" value="" class="form-control required" role="input" aria-required="true" /> 
     </div> 


     <div class="form-group"> 
      <label for="email">Your Email<span class="help-required">*</span></label> 
      <input type="text" name="email" id="email" value="" class="form-control required email" role="input" aria-required="true" /> 
     </div> 

     <div class="form-group"> 
      <label for="weburl">Your Website<span class="help-required">*</span></label> 
      <input type="text" name="weburl" id="weburl" value="" class="form-control required url" role="input" aria-required="true" /> 
     </div> 


     <div class="form-group"> 
      <label for="subject">Subject<span class="help-required">*</span></label> 
      <select name="subject" id="subject" class="form-control required" role="select" aria-required="true"> 
      <option></option> 
      <option>One</option> 
      <option>Two</option> 
      </select> 
     </div> 

     <div class="form-group"> 
      <label for="message">Message<span class="help-required">*</span></label> 
      <textarea rows="8" name="message" id="message" class="form-control required" role="textbox" aria-required="true"></textarea> 
     </div> 

     <div class="actions"> 
      <input type="submit" value="Send Your Message" name="submit" id="submitButton" class="btn btn-primary" title="Click here to submit your message!" /> 
      <input type="reset" value="Clear Form" class="btn btn-danger" title="Remove all the data from the form." /> 
     </div> 
     </fieldset> 
    </form> 
    </div><!-- col --> 
</div><!-- row --> 

    <hr> 

    <div class="footer"> 
    <p>&copy; Company 2013</p> 
    </div> 

</div> <!-- /container --> 

JS:

/* Bootstrap Contact Form 
     ***************************************************************************/ 
$(document).ready(function(){ 
// validate signup form on keyup and submit 


var validator = $("#contactform").validate({ 
    errorClass:'has-error', 
    validClass:'has-success', 
    errorElement:'div', 
    highlight: function (element, errorClass, validClass) { 
     $(element).closest('.form-control').addClass(errorClass).removeClass(validClass); 
    }, 
    unhighlight: function (element, errorClass, validClass) { 
     $(element).parents(".has-error").removeClass(errorClass).addClass(validClass); 
    }, 
    rules: { 
     contactname: { 
      required: true, 
      minlength: 2 
     }, 
     email: { 
      required: true, 
      email: true 
     }, 
     weburl: { 
      required: true, 
      url: true 
     }, 
     phone: { 
      required: true, 
      phoneUS: true 
     }, 
     subject: { 
      required: true 
     }, 
     message: { 
      required: true, 
      minlength: 10 
     } 
    }, 
    messages: { 
     contactname: { 
      required: '<span class="help-block">Please enter your name.</span>', 
      minlength: jQuery.format('<span class="help-block">Your name needs to be at least {0} characters.</span>') 
     }, 
     email: { 
      required: '<span class="help-block">Please enter a valid email address.</span>', 
      minlength: '<span class="help-block">Please enter a valid email address.</span>' 
     }, 
     weburl: { 
      required: '<span class="help-block">You need to enter the address to your website.</span>', 
      url: jQuery.format('<span class="help-block">You need to enter a valid URL.</span>') 
     }, 
     phone: { 
      required: '<span class="help-block">You need to enter your phone number.</span>', 
      phoneUS: jQuery.format('<span class="help-block">You need to enter a valid phone number.</span>') 
     }, 
     subject: { 
      required: '<span class="help-block">You need to enter a subject.</span>' 
     }, 
     message: { 
      required: '<span class="help-block">You need to enter a message.</span>', 
      minlength: jQuery.format('<span class="help-block">Enter at least {0} characters.</span>') 
     } 
    } 
    }); 
    }); 

私は

に問題があるかもしれないと思います

action="<?php echo $_SERVER['PHP_SELF'] 

を使用して

<form role="form" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" id="contactform"> 

私はそれを取り除くために、また=「#」アクションを使用しようとしましたが、効果なし、送信ボタンは、依然としてランディングページに私をリダイレクトします。

+2

URL並べ替えはありますか?フォームを含むページのURLは何ですか? – Salketer

+0

@Salketer全ウェブのメインURLは1つだけです。コンタクトフォームはスライドアウトパネルにURLなしで配置されます – user3194137

+0

URL書き換えがある必要があります。私たちに示したコードはありませんしている。 – RiggsFolly

答えて

0

あなたは、この属性でページを定義しなければなりません。

action="your_page.php" 
0
php echo $_SERVER['PHP_SELF'] 

はディレクトリをルートへのパスをそれ `sのように/

フォームが提出されたときにページをリロードする独自の能力を持っている理由は、その、thatsのホームページにリダイレクトされます

フォームの送信時にこのページに滞在するには、AJAXを使用してください。

0

連絡先フォームをクリックしたときの位置をトラッキングせずに1つのページャーを使用しているため、target属性を使用して非表示のiframeにフォーム送信を送信するのが最も簡単な方法です。次に、javascriptを使用して連絡先フォームを非表示にします。

これは、フォームを送信している間にページをリロードしないことに利点があります。また、フォーム提出ページにtopを使用してJavaScriptを書き込んで、メインページに情報を送信し、フォームが正しく送信されたときに「感謝の気持ち」などの小さなメッセージを表示することもできます。

+0

私は確かにこれを試してみます。それをもう少し説明してくれてありがとう – user3194137

+0

私は場所のハッシュを調べることをお勧めします。これは、ユーザーがどこにいるかを覚えて、ページロード時に何らかのスクリプトを使って簡単にそのハッシュを見つけ、正しいビューにユーザーを送るために使用できます。これは2段階の統合になります。各ビューの変更を追跡し、対応するハッシュをドキュメントの場所に配置し、ページの読み込みに応じて適切に処理します。これを使用すると、ユーザーは、前後のブラウザボタンを使用してナビゲートすることもできます – Salketer

1

「ウェブ全体のメインURLは1つだけです。コンタクトフォームはURLなしでスライドアウトパネルに配置されています」。私はあなたのスライドをどのように生成しているのかよく分かりませんが、私はそれがすでにそのページにあるいくつかの隠されたコンテンツを明らかにしている/アニメーション化していると推測しています。

あなたは1つのページを持っています。おそらくindex.phpに連絡先フォームがあります。フォームアクション(データがPOSTされる場所)は<?php echo $_SERVER['PHP_SELF']; ?>で、 "index.php"(チェック、ソースの表示、または開発ツールの表示)になります。

JS検証に合格したと仮定して、submitを押すと、フォームデータをindex.phpにPOSTします。 POSTは新しいリクエストです。フロントエンドでページがリロードされるように見えますが、今回はヘッダPHPが処理するPOSTペイロードがあります。あなたの連絡先フォームはリンクやボタンなどをクリックすることによって起動されるまでページに表示されないので、表示されなくなります。

実際にページをリフレッシュしないようにして、連絡先フォームの表示を成功またはエラーmsg(「メッセージが正常に送信されました!」など)で更新するように聞こえます。これを行うには、AJAX経由でPOSTする必要があります。これは、ページを更新せずにバックグラウンドで行われます。

これを行うには、まずJavascriptが使用できるレスポンスを返すようにPHPを更新し、GETリクエストと同様にページ全体を生成しないようにする必要があります。

if (isset($_POST['submit'])) { 
    // ... all your existing code ... 

    if ($hasError) { 
     echo "FAIL"; 
    } else { 
     echo "OK"; 
    } 

    die(); // POSTs to this page only generate success/error msgs, and bail out 
} 

あなたが検証に提出するハンドラを追加する必要があります次:

var validator = $("#contactform").validate({ 
    ... 
    messages: { 
    ... 
    }, 
    submitHandler: function(form) { 
     $.ajax({ 
      type: 'post', 
      url: 'index.php', 
      data: $(form).serialize(), 
      success: function(data) { 
       if (data === 'OK') { 
        // JS code to reveal your success alert, eg: 
        // $('div.alert-success').fadeIn(); 
       } else { 
        // JS code to reveal your danger alert 
       } 
      } 
     }); 
     return false; // Block the normal submit, we just did it via AJAX 
    } 

最後に、あなたが今、Javascriptを介して、それらを表示しようとしているように、成功/危険アラートを表示するためのPHPの条件を削除します。最初のロード時にどちらも表示されないように、「隠された」クラスを追加するだけです。

PHPで生成されたコンテンツとクラスを使用してアラートエリアを1つだけ設定することで、少しでもきれいにすることができます。たとえば、「OK」を戻す代わりにJSONが返されます(dataType: 'json'その場合はあなたの$ .ajax()呼び出しに)。

関連する問題