Gửi biểu mẫu mà không cần tải lại trang


91

Tôi có một trang web rao vặt và trên trang nơi quảng cáo được hiển thị, tôi đang tạo biểu mẫu "Gửi mẹo cho bạn bè" ...

Vì vậy, bất kỳ ai muốn có thể gửi một mẹo của quảng cáo đến một số địa chỉ email bạn bè.

Tôi đoán biểu mẫu phải được gửi đến một trang php phải không?

<form name='tip' method='post' action='tip.php'>
Tip somebody: <input name="tip_email" type="text" size="30" onfocus="tip_div(1);" onblur="tip_div(2);"/>
 <input type="submit" value="Skicka Tips"/>
 <input type="hidden" name="ad_id" />
 </form>

Khi gửi biểu mẫu, trang được tải lại ... Tôi không muốn điều đó ...

Có cách nào để nó không tải lại mà vẫn gửi được mail không? Tốt hơn là không có ajax hoặc jquery ...

Cảm ơn


10
Để gửi một biểu mẫu, bạn phải thực hiện một yêu cầu HTTP, thực hiện các yêu cầu HTTP mà không tải trang là ý nghĩa của Ajax. Cũng có thể cố gắng lái xe đến thị trấn mà không có xe.
Quentin

7
"không có ajax hoặc jquery" nghe giống như "Tôi muốn một chiếc ô tô không có bánh xe"
Your Common Sense

12
@Keith gần như vậy, <iframe>targetthuộc tính sẽ làm điều đó.
alex

Bạn hiện không sử dụng cụ thể XmlHttpRequest, nhưng bạn vẫn đang gọi máy chủ không đồng bộ bằng javascript. Điều đó thuộc về Ajax.
Keith Rousseau

10
Tôi đọc tiêu đề và nghĩ "À, anh ấy chỉ cần Ajax". Tôi đang đọc thêm câu hỏi trong khi nhấp một ngụm cà phê và chuẩn bị câu trả lời trong đầu. Cuối câu hỏi, cà phê của tôi ở khắp màn hình ...
BalusC

Câu trả lời:


68

Bạn sẽ cần gửi yêu cầu ajax để gửi email mà không cần tải lại trang. Hãy xem tại http://api.jquery.com/jQuery.ajax/

Mã của bạn phải là một cái gì đó dọc theo các dòng:

$('#submit').click(function() {
    $.ajax({
        url: 'send_email.php',
        type: 'POST',
        data: {
            email: 'email@example.com',
            message: 'hello world!'
        },
        success: function(msg) {
            alert('Email Sent');
        }               
    });
});

Biểu mẫu sẽ được gửi trong nền tới send_email.phptrang cần xử lý yêu cầu và gửi email.


4
Điều này sẽ trông như thế nào nếu bạn cũng bao gồm cả HTML?
blueprintchris

6
send_email.php phải là "send_email.php"?
Bear

1
Bạn sẽ làm điều này như thế nào chỉ với AJAX vani với JavaScript?
Adam

.ajax không phải là một lỗi chức năng với hầu hết các giải pháp của bạn đã sử dụng. paste.ubuntu.com/p/GnHzY84DQ3

Nếu biểu mẫu vẫn đang được làm mới, hãy thêm vào return false;trước dấu ngoặc đóng cuối cùng
The Codesee

78

Tôi đã tìm thấy những gì tôi nghĩ là một cách dễ dàng hơn. Nếu bạn đặt Iframe trong trang, bạn có thể chuyển hướng thoát hành động ở đó và làm cho nó hiển thị. Bạn không thể làm gì, tất nhiên. Trong trường hợp đó, bạn có thể đặt hiển thị iframe thành không.

<iframe name="votar" style="display:none;"></iframe>
<form action="tip.php" method="post" target="votar">
    <input type="submit" value="Skicka Tips">
    <input type="hidden" name="ad_id" value="2">            
</form>

2
Tôi sử dụngaction="about:blank"
ThorSummoner

2
Với điều này, bạn vẫn có thể lấy các giá trị như:$_POST["ad_id"]
William

tự hỏi tại sao điều này không được chọn làm câu trả lời! Đã đỡ đau đầu.
Neo

irishwill200, không có
coldembrace

Rất tiếc, giải pháp này sẽ không hoạt động đối với tôi vì việc gửi biểu mẫu sẽ khiến javascript chạy lại và sự kiện sẵn sàng tài liệu được gọi.
bgh

19

Bạn sử dụng AJAX hoặc bạn

  • tạo và nối iframe vào tài liệu
  • đặt tên iframe thành 'foo'
  • đặt mục tiêu biểu mẫu thành 'foo'
  • Gửi đi
  • có hành động biểu mẫu kết xuất javascript với 'parent.notify (...)' để đưa ra phản hồi
  • tùy ý, bạn có thể xóa iframe

5
Đó vẫn là Ajax. Không phải XHR, nhưng vẫn là Ajax.
Quentin

3
thủ thuật tuyệt vời cảm ơn bạn. mẫu để sử dụng <form id="myGiswebForm" method="post" action="https://******/saveForm.asp" target="myiframe"><iframe style="display:none;" src="" name="myiframe"></iframe>
Kemal

17

Cách nhanh nhất và dễ nhất là sử dụng iframe. Đặt một khung ở cuối trang của bạn.

<iframe name="frame"></iframe>

Và trong biểu mẫu của bạn, hãy làm điều này.

<form target="frame">
</form>

và để làm cho khung ẩn trong css của bạn.

iframe{
  display: none;
}

6
Nên display:none;và không border:0px. Đã cố gắng chỉnh sửa nhưng các chỉnh sửa của tôi bị từ chối bởi những người đánh giá dường như không thèm nhìn vào nhận xét chỉnh sửa. Vui lòng sửa đổi câu trả lời của bạn để sửa mã.
AStopher

1
Tôi đề nghị gọi css theo id hoặc class.
RaRdEvA

1
Đây là một tiết kiệm cuộc sống rất lớn. Tôi đã có một biểu mẫu rất chi tiết với hơn 50 trường đầu vào và tôi sợ rằng mình sẽ phải điền lại nó mỗi khi ở chế độ nhà phát triển. Bây giờ tôi không cần phải làm vậy. Rất khuyến khích giải pháp này cho các mục đích phát triển.
Matthew Wolman

7

Gửi biểu mẫu mà không cần tải lại trang và nhận kết quả của dữ liệu đã gửi trong cùng một trang

Đây là một số mã tôi tìm thấy trên internet giải quyết vấn đề này:

1.) IFRAME

Khi biểu mẫu được gửi, hành động sẽ được thực thi và nhắm mục tiêu iframe cụ thể để tải lại.

index.php

<iframe name="content" style="">
</iframe>
<form action="iframe_content.php" method="post" target="content">
<input type="text" name="Name" value="">
<input type="submit" name="Submit" value="Submit">
</form>

iframe_content.php

<?php
if (isset($_POST['Submit'])){
$Name = $_POST['Name'];
echo $Name;
}
?>

2.) AJAX

Index.php:

   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/core.js">
    </script>
    <script type="text/javascript">
    function clickButton(){
    var name=document.getElementById('name').value;
    var descr=document.getElementById('descr').value;
    $.ajax({
            type:"post",
            url:"server_action.php",
            data: 
            {  
               'name' :name,
               'descr' :descr
            },
            cache:false,
            success: function (html) 
            {
               alert('Data Send');
               $('#msg').html(html);
            }
            });
            return false;
     }
    </script>
    <form >
    <input type="" name="name" id="name">
    <input type="" name="descr" id="descr">
    <input type="submit" name="" value="submit" onclick="return clickButton();">
    </form>
    <p id="msg"></p>

server_action.php

<?php 
$name = $_POST['name'];
$descr = $_POST['descr'];


echo $name;
echo $descr;

?>

Thẻ:


1
Cảm ơn bạn, bạn đã có được trái tim của tôi, hãy duy trì nó
Xin lỗi IwontTell

@MuhammadAli, Rất vui vì điều đó :).
Rhalp Darren Cabrera

Tôi đã tìm kiếm rất nhiều lần trên internet. Tôi đã sử dụng Jquery, nhưng Jquery đôi khi hoạt động và đôi khi không, Vì vậy, tôi nghĩ ajax là tốt nhất nên đề cập trong câu trả lời của bạn.
Xin lỗi IwontTell

4

Nó là phải để giúp đỡ jquery-ajaxtrong trường hợp này. Không có ajax, hiện tại không có giải pháp.

Đầu tiên, hãy gọi một hàm JavaScript khi biểu mẫu được gửi. Chỉ cần thiết lập onsubmit="func()". Ngay cả khi hàm được gọi, hành động mặc định của trình sẽ được thực hiện. Nếu nó được thực hiện sẽ không có cách nào ngăn trang làm mới hoặc chuyển hướng. Vì vậy, nhiệm vụ tiếp theo là ngăn chặn hành động mặc định. Chèn dòng sau vào đầu func().

event.preventDefault()

Bây giờ, sẽ không có chuyển hướng hoặc làm mới. Vì vậy, bạn chỉ cần thực hiện một cuộc gọi ajax func()và làm bất cứ điều gì bạn muốn khi cuộc gọi kết thúc.

Thí dụ:

Hình thức:

<form id="form-id" onsubmit="func()">
    <input id="input-id" type="text">
</form>

Javascript:

function func(){
    event.preventDefault();
    var newValue = $('#input-field-id').val();
    $.ajax({
        type: 'POST',
        url: '...',
        data: {...},
        datatype: 'JSON',
        success: function(data){...},
        error: function(){...},
    });
}

4

đây chính xác là cách nó CÓ THỂ hoạt động mà không cần jQuery và AJAX và nó hoạt động rất tốt bằng cách sử dụng iFrame đơn giản. I LOVE IT, hoạt động trong Opera10, FF3 và IE6. Cảm ơn một số áp phích ở trên đã chỉ cho tôi hướng đi đúng, đó là lý do duy nhất tôi đăng ở đây:

<select name="aAddToPage[65654]" 
onchange="
    if (bCanAddMore) {
        addToPage(65654,this);
    }
    else {
        alert('Could not add another, wait until previous is added.'); 
        this.options[0].selected = true;
    };
" />
<option value="">Add to page..</option>
[more options with values here]</select>

<script type="text/javascript">
function addToPage(iProduct, oSelect){
    iPage = oSelect.options[oSelect.selectedIndex].value;
    if (iPage != "") {
        bCanAddMore = false;
        window.hiddenFrame.document.formFrame.iProduct.value = iProduct;
        window.hiddenFrame.document.formFrame.iAddToPage.value = iPage;
        window.hiddenFrame.document.formFrame.submit();
    }
}
var bCanAddMore = true;</script> 

<iframe name="hiddenFrame" style="display:none;" src="frame.php?p=addProductToPage" onload="bCanAddMore = true;"></iframe>

mã php tạo trang đang được gọi ở trên:

if( $_GET['p'] == 'addProductToPage' ){  // hidden form processing
  if(!empty($_POST['iAddToPage'])) {
    //.. do something with it.. 
  }
  print('
    <html>
        <body>
            <form name="formFrame" id="formFrameId" style="display:none;" method="POST" action="frame.php?p=addProductToPage" >
                <input type="hidden" name="iProduct" value="" />
                <input type="hidden" name="iAddToPage" value="" />
            </form>
        </body>
    </html>
  ');
}

3
Không sử dụng PHP printđể in mã HTML. Chỉ cần đóng thẻ php ?>và thêm mã html vào sau. Và tránh sử dụng exitnó không cần thiết (lỗi nghiêm trọng, ...)
Oriol

vâng, cảm ơn vì đã chỉ ra. Đây chỉ là một ví dụ cần thiết, tôi không thực sự làm theo cách này trong hệ thống của mình.
Tyler

Đó là rất nhiều công việc về câu trả lời này, nhưng còn rất nhiều câu trả lời khác.
Người dùng không phải là người dùng

vấn đề phụ duy nhất của vấn đề này là get () trong đó vì tôi không muốn biểu mẫu sổ trạng thái có thể đánh dấu / lưu vào bộ nhớ cache.
drtechno

4

Điều này sẽ giải quyết vấn đề của bạn.
Trong mã này sau khi bấm vào nút gửi, chúng ta gọi là jquery ajax và chúng ta chuyển url để đăng
loại
dữ liệu POST / GET : thông tin dữ liệu bạn có thể chọn các trường đầu vào hoặc bất kỳ trường nào khác.
sucess: gọi lại nếu mọi thứ đều ổn từ
văn bản tham số chức năng máy chủ , html hoặc json, phản hồi từ máy chủ
trong sucess, bạn có thể viết cảnh báo ghi nếu dữ liệu bạn nhận được ở một số trạng thái, v.v. hoặc thực thi mã của bạn những gì cần làm tiếp theo.

<form id='tip'>
Tip somebody: <input name="tip_email" id="tip_email" type="text" size="30" onfocus="tip_div(1);" onblur="tip_div(2);"/>
 <input type="submit" id="submit" value="Skicka Tips"/>
 <input type="hidden" id="ad_id" name="ad_id" />
 </form>
<script>
$( "#tip" ).submit(function( e ) {
    e.preventDefault();
    $.ajax({
        url: tip.php,
        type:'POST',
        data:
        {
            tip_email: $('#tip_email').val(),
            ad_id: $('#ad_id').val()
        },
        success: function(msg)
        {

            alert('Email Sent');
        }               
    });
});
</script>

Mặc dù đoạn mã này có thể giải quyết vấn đề, nhưng nó không giải thích tại sao hoặc cách nó trả lời câu hỏi. Vui lòng bao gồm giải thích cho mã của bạn , vì điều đó thực sự giúp cải thiện chất lượng bài đăng của bạn. Hãy nhớ rằng bạn đang trả lời câu hỏi cho người đọc trong tương lai và những người đó có thể không biết lý do cho đề xuất mã của bạn. Người gắn cờ / người đánh giá: Đối với các câu trả lời chỉ có mã, chẳng hạn như câu trả lời này, hãy phản đối, đừng xóa!
Scott Weldon

3

Bạn có thể thử đặt thuộc tính đích của biểu mẫu thành iframe ẩn, do đó trang chứa biểu mẫu sẽ không được tải lại.

Tôi đã thử nó với tải lên tệp (mà chúng tôi biết là không thể thực hiện được qua AJAX) và nó hoạt động rất tốt.


2

Bạn đã thử sử dụng iFrame chưa? Không có ajax, và trang gốc sẽ không tải.

Bạn có thể hiển thị biểu mẫu gửi dưới dạng một trang riêng biệt bên trong iframe và khi nó được gửi, trang bên ngoài / vùng chứa sẽ không tải lại. Giải pháp này sẽ không sử dụng bất kỳ loại ajax nào.


1

nếu bạn đang gửi đến cùng một trang nơi có biểu mẫu, bạn có thể viết các thẻ biểu mẫu với một hành động và nó sẽ gửi, như thế này

<form method='post'> <!-- you can see there is no action here-->

1

Tôi đã làm điều gì đó tương tự như jquery ở trên, nhưng tôi cần đặt lại dữ liệu biểu mẫu và các bức tranh vẽ tệp đính kèm đồ họa của mình. Vì vậy, đây là những gì tôi đã nghĩ ra:

    <script>
   $(document).ready(function(){

   $("#text_only_radio_button_id").click(function(){
       $("#single_pic_div").hide();
       $("#multi_pic_div").hide();
   });

   $("#pic_radio_button_id").click(function(){
      $("#single_pic_div").show();
      $("#multi_pic_div").hide();
    });

   $("#gallery_radio_button_id").click(function(){
       $("#single_pic_div").hide();
       $("#multi_pic_div").show();
                 });
    $("#my_Submit_button_ID").click(function() {
          $("#single_pic_div").hide();
          $("#multi_pic_div").hide();
          var url = "script_the_form_gets_posted_to.php"; 

       $.ajax({
       type: "POST",
       url: url,
       data: $("#html_form_id").serialize(), 
       success: function(){  
       document.getElementById("html_form_id").reset();
           var canvas=document.getElementById("canvas");
    var canvasA=document.getElementById("canvasA");
    var canvasB=document.getElementById("canvasB");
    var canvasC=document.getElementById("canvasC");
    var canvasD=document.getElementById("canvasD");

              var ctx=canvas.getContext("2d");
              var ctxA=canvasA.getContext("2d");
              var ctxB=canvasB.getContext("2d");
              var ctxC=canvasC.getContext("2d");
              var ctxD=canvasD.getContext("2d");
               ctx.clearRect(0, 0,480,480);
               ctxA.clearRect(0, 0,480,480);
               ctxB.clearRect(0, 0,480,480);        
               ctxC.clearRect(0, 0,480,480);
               ctxD.clearRect(0, 0,480,480);
               } });
           return false;
                });    });
           </script>

Điều đó hoạt động tốt đối với tôi, đối với ứng dụng của bạn chỉ với một biểu mẫu html, chúng tôi có thể đơn giản hóa mã jquery này như thế này:

       <script>
        $(document).ready(function(){

    $("#my_Submit_button_ID").click(function() {
        var url =  "script_the_form_gets_posted_to.php";
       $.ajax({
       type: "POST",
       url: url,
       data: $("#html_form_id").serialize(), 
       success: function(){  
       document.getElementById("html_form_id").reset();
            } });
           return false;
                });    });
           </script>

0

Bạn sẽ cần sử dụng JavaScript mà không dẫn đến iframe(cách tiếp cận xấu xí).

Bạn có thể làm điều đó bằng JavaScript; sử dụng jQuery sẽ làm cho nó không đau.

Tôi khuyên bạn nên xem AJAX và Đăng.


0

Một khả năng khác là tạo liên kết javascript trực tiếp đến hàm của bạn:

<form action="javascript:your_function();" method="post">

...



-1
function Foo(){  
   event.preventDefault(); 
 $.ajax(   {  
      url:"<?php echo base_url();?>Controllername/ctlr_function",
      type:"POST",
      data:'email='+$("#email").val(),
      success:function(msg)      {  
         alert('You are subscribed');
      }
   }   );
}

Tôi đã thử nhiều lần cho một giải pháp hay và câu trả lời của @taufique đã giúp tôi đi đến câu trả lời này.

NB : Đừng quên đặt event.preventDefault(); ở đầu phần thân của hàm.


-6

Đây là một số jQuery để đăng lên trang php và lấy lại html:

$('form').submit(function() {
    $.post('tip.php', function(html) {
       // do what you need in your success callback
    }
    return false;
});

1
Bạn muốn giải thích lý do tại sao bạn phản đối? Bạn không thể làm điều đó nếu không có Ajax
Keith Rousseau

@Keith Không có phản đối từ tôi, nhưng có thể là do bạn đã đề cập đến jQuery và anh ấy nói không có jQuery.
alex

1
Đó là các đối số sai cho phương pháp đăng, bạn không thu thập bất kỳ dữ liệu nào từ biểu mẫu và bạn sử dụng công cụ chọn chung chung "áp dụng cho tất cả các biểu mẫu" với "đăng lên một tiểu cụ thể thay vì nhận tác vụ từ biểu mẫu" đăng cuộc gọi.
Quentin

1
Ôi, trời ơi đất hỡi. jQuery thực hiện kiểm tra kiểu để có thể bỏ qua các đối số. Kinh quá.
Quentin

1
Có, họ làm điều đó ở khắp nơi. Chào mừng bạn đến với API jQuery
Keith Rousseau
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.