ページを更新することなくフォームの送信時にフォームdivを変更するスクリプトを検索

HTMLページに電子メールフォームがあり、フォーム提出を送信するためにsubmitをクリックすると、DIVの「フォーム」が更新されるか、「ありがとう」というメッセージ。ページを更新することなくフォームの送信時にフォームdivを変更するスクリプトを検索

試してみましたが、私が使うことができる具体的なものは何も見つかりませんでした。

アイデア？

おかげ

出典

2011-01-10 Tim

私はあなたのための例で私の答えを更新しました:) – Diablo

を解決する

希望：

$.ajax({ 
    url: 'ajax/send_mail.php', 
    data: "message="+$('#some_field').val(), 
    success: function(data) { 
    //replace form (form is in div <div id="form"><form>Form data</form></form>) 
    $('div#form').html('<p>Thank You!<p>'); 
    //or $('div#form').html(data); if you are returning message from send_mail.php 
    } 
});

あなたは私はあなたに全体のスクリプトを書くことができます問題がある場合（私は気分でと）いくつかの暇な時間を持っている:)

UPDATE：

基本的にこれがそれです。

コピー/フォームのように、この貼り付けます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="hr-HR" lang="hr-HR"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Title</title> 
<script type="text/JavaScript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(function() { 
$('#submit').click(function(){ 
    $.ajax({ 
    type: "GET", 
    url: 'sendit.php', 
    dataType: 'json', 
    data: $('form#mail_form').serialize(), 
    success: function(data) { 
    if(data.success==1){ 
    $('div#form').html(data.message); 
    } 
    } 
    }); 
    return false; 
}); 
}); 
</script> 
</head> 
<body> 
<div id="form"> 
    <form id="mail_form"> 
    <div> 
    <input type="text" name="subject" id="subject"/> 
    </div> 
    <div> 
    <textarea name="message" id="message"></textarea> 
    </div> 
    <div> 
    <input type="submit" name="submit" id="submit" value="Send"/> 
    </div> 
    </form> 
</div> 
</body> 
</html>

コピー/あなたがsendit.phpとしてこれを貼り付けます。あなたは

//do stuff, send mail, save to database,... 
$data['success']=1; 
$data['message']='Thank You!'; 
echo json_encode($data);

出典

2011-01-10 11:56:20 Diablo

どのようにあなたのように、ありがとう。今のところこれが最善の方法だと思われるので、スクリプト全体を自由に行うことができます:) – Tim

+1は答え、それ以上の意思は=） –

あなただけのjavascript jqueryの/を使用してフォームを隠して提出フォームにお礼のメッセージのdivを示すことができました。編集：以下のことを試してみてください。

<html> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
$("#button").click(function() { 
    $("form").hide(); 
    $("div").show(); 
    return false; 
}); 
}); 
</script> 
<form> 
form data<br/> 
<button id="button">click me</button> 
</form> 
<div style="display: none"> 
thank you 
</div> 
</html>

出典

2011-01-10 11:48:57 Steve

こんにちは、それは私が考えていたものです。私はそれについて多くの知識を持っていないので、私が使用できるスクリプトは？ – Tim

jQueryのreplaceWith()を確認します。

$('div.the-form').replaceWith('<div class="thankyou">Thanks for your submission.</div>');

出典

2011-01-10 11:51:30

パーフェクト、ありがとう。 – Tim

あなたはAJAX POSTを行うことができますし、コールバックであなたは（jQueryのに役立つ場合があります） "というメッセージありがとう" を表示することができます。

コードは次のようになります。idを持つ新しいdiv要素を作成します

$.post('test.do', function(data) { 
    $('.confirmation').show(); 
});

出典

2011-01-10 11:51:56 sebarmeli

'thankyouDiv' と、当初はそのstyle="display:none;"を設定します。この部門にはあなたのありがとうメッセージが含まれているはずですフォームを送信する際に、最初にメールフォームを含むdivを非表示にして、style="display:block;"を変更して 'thankyouDiv'を表示します。これはあなたがjQuery.ajaxメソッドを使用することができ、あなたの問題

出典

2011-01-10 11:56:19 Abhi

このデータを検証しなければならない、これはあなたのマークアップである、と仮定しますが。 ..

 
... 
<div id='formcontainer'> 
    <form id='emailform' ....> 
    </form> 
</div> 
..

、ここであなたのjQueryの共同でデ...

 
$(document).ready(function(){ 
    $('emailform').submit(function(){ 

     // serialize your form to get the data, all do what you want to to... 

     // now, do AJAX thing here... 
     $.ajax({ 
      type: 'POST', 
      url: yourscript.php, 
      data: data,    // serialized data, for example 
      success: function(){ 
       // this is performed on success 
       $('emailform').hide();   // form will fade out 
       $('formcontainer').html('Thanks, the message has been sent') 
      } 
     });   

     return false; // this prevent form from real submit 
    }); 
});

私は結果を知ってみましょう:)

出典

2011-01-10 12:04:59 Andreyco

ページを更新することなくフォームの送信時にフォームdivを変更するスクリプトを検索

答えて

関連する問題