ฉันมีเว็บไซต์คลาสสิฟายด์และในหน้าที่มีการแสดงโฆษณาฉันกำลังสร้างแบบฟอร์ม "ส่งเคล็ดลับให้เพื่อน" ...

ดังนั้นใครก็ตามที่ต้องการสามารถส่งเคล็ดลับของโฆษณาไปยังที่อยู่อีเมลของเพื่อน ๆ

ฉันเดาว่าต้องส่งแบบฟอร์มไปยังหน้า php ใช่ไหม

<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>

เมื่อส่งแบบฟอร์มหน้าจะถูกโหลดใหม่ ... ฉันไม่ต้องการแบบนั้น ...

มีวิธีไหนบ้างที่ทำให้ไม่โหลดซ้ำแล้วยังส่งเมล์ได้? ควรจะไม่มี ajax หรือ jquery ...

ขอบคุณ

คุณจะต้องส่งคำขอ ajax เพื่อส่งอีเมลโดยไม่ต้องโหลดหน้านี้ซ้ำ ดูที่http://api.jquery.com/jQuery.ajax/

รหัสของคุณควรเป็นสิ่งที่อยู่ในบรรทัดของ:

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

แบบฟอร์มจะส่งในพื้นหลังไปยังsend_email.phpหน้าซึ่งจะต้องจัดการคำขอและส่งอีเมล

ฉันพบสิ่งที่ฉันคิดว่าเป็นวิธีที่ง่ายกว่า หากคุณใส่ Iframe ในเพจคุณสามารถเปลี่ยนเส้นทางการออกจากการกระทำตรงนั้นและทำให้มันปรากฏขึ้น คุณไม่สามารถทำอะไรได้แน่นอน ในกรณีนี้คุณสามารถตั้งค่าการแสดง iframe เป็นไม่มี

<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>

คุณใช้ AJAX หรือคุณ

• สร้างและผนวก iframe เข้ากับเอกสาร
• ตั้งชื่อ iframes เป็น 'foo'
• กำหนดเป้าหมายแบบฟอร์มเป็น 'foo'
• ส่ง
• ให้ฟอร์มการดำเนินการแสดง javascript ด้วย 'parent.notify (... )' เพื่อให้ข้อเสนอแนะ
• คุณสามารถเลือกที่จะลบ iframe ได้

วิธีที่เร็วและง่ายที่สุดคือใช้ iframe ใส่กรอบที่ด้านล่างของหน้า

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

และในรูปแบบของคุณทำสิ่งนี้

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

และทำให้มองไม่เห็นเฟรมใน css ของคุณ

iframe{
  display: none;
}

การส่งแบบฟอร์มโดยไม่ต้องโหลดหน้าซ้ำและรับผลลัพธ์ของข้อมูลที่ส่งในหน้าเดียวกัน

1. ) IFRAME

เมื่อส่งแบบฟอร์มการดำเนินการจะดำเนินการและกำหนดเป้าหมาย iframe ที่ต้องการโหลดซ้ำ

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;

?>

แท็ก: phpอาแจ็กซ์jqueryเซิร์ฟเวอร์html

jquery-ajaxในกรณีนี้จำเป็นต้องได้รับความช่วยเหลือ หากไม่มีajaxในขณะนี้ไม่มีวิธีแก้ปัญหา

ขั้นแรกให้เรียกใช้ฟังก์ชัน JavaScript เมื่อส่งแบบฟอร์ม onsubmit="func()"ชุดเพียง แม้ว่าฟังก์ชันจะถูกเรียกใช้การดำเนินการเริ่มต้นของการส่งจะถูกดำเนินการ หากดำเนินการดังกล่าวจะไม่มีทางหยุดไม่ให้รีเฟรชหน้าหรือเปลี่ยนเส้นทาง ดังนั้นงานต่อไปคือการป้องกันการกระทำเริ่มต้น func()แทรกบรรทัดต่อไปนี้ที่จุดเริ่มต้นของ

event.preventDefault()

ตอนนี้จะไม่มีการเปลี่ยนเส้นทางหรือรีเฟรช ดังนั้นคุณเพียงแค่โทรออกจาก ajax func()และทำสิ่งที่คุณต้องการทำเมื่อสิ้นสุดการโทร

ตัวอย่าง:

แบบฟอร์ม:

<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(){...},
    });
}

นี่เป็นวิธีที่สามารถทำงานได้โดยไม่ต้องใช้ jQuery และ AJAX และทำงานได้ดีมากโดยใช้ iFrame แบบธรรมดา ฉันรักมันทำงานใน Opera10, FF3 และ IE6 ต้องขอบคุณโปสเตอร์ด้านบนบางส่วนที่ชี้ทิศทางที่ถูกต้องนั่นคือเหตุผลเดียวที่ฉันโพสต์ที่นี่:

<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>

รหัส php สร้างหน้าที่ถูกเรียกด้านบน:

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>
  ');
}

วิธีนี้จะช่วยแก้ปัญหาของคุณได้
ในรหัสนี้หลังจากคลิกปุ่มส่งเราเรียก jquery ajax และเราส่ง url เพื่อโพสต์
ประเภทข้อมูล POST / GET
: ข้อมูลข้อมูลที่คุณสามารถเลือกช่องป้อนข้อมูลหรืออื่น ๆ
ความสำเร็จ: โทรกลับหากทุกอย่างเรียบร้อยจาก
ข้อความพารามิเตอร์ฟังก์ชันเซิร์ฟเวอร์html หรือ json การตอบสนองจากเซิร์ฟเวอร์
ในความสำเร็จคุณสามารถเขียนเขียนคำเตือนหากข้อมูลที่คุณได้รับอยู่ในสถานะบางประเภทและอื่น ๆ หรือรันโค้ดของคุณสิ่งที่ต้องทำต่อไป

<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>

คุณสามารถลองตั้งค่าแอตทริบิวต์เป้าหมายของแบบฟอร์มของคุณเป็น iframe ที่ซ่อนอยู่ดังนั้นหน้าที่มีแบบฟอร์มจะไม่ถูกโหลดซ้ำ

ฉันลองใช้การอัปโหลดไฟล์ (ซึ่งเรารู้ว่าไม่สามารถทำได้ผ่าน AJAX) และทำงานได้อย่างสวยงาม

คุณได้ลองใช้ iFrame หรือยัง? ไม่มี ajax และหน้าเดิมจะไม่โหลด

คุณสามารถแสดงฟอร์มส่งเป็นเพจแยกต่างหากภายใน iframe และเมื่อส่งแล้วหน้าภายนอก / คอนเทนเนอร์จะไม่โหลดซ้ำ โซลูชันนี้จะไม่ใช้ประโยชน์จาก ajax ทุกชนิด

ฉันทำบางอย่างที่คล้ายกับ jquery ด้านบน แต่ฉันต้องการรีเซ็ตข้อมูลแบบฟอร์มและภาพเอกสารแนบกราฟิก นี่คือสิ่งที่ฉันคิดขึ้นมา:

    <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>

นั่นใช้ได้ดีสำหรับฉันสำหรับการใช้งานในรูปแบบ html ของคุณเราสามารถลดความซับซ้อนของรหัส jquery ได้ดังนี้:

       <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>

หน้านี้จะโหลดซ้ำหากคุณไม่ต้องการใช้จาวาสคริปต์

คุณจะต้องใช้ JavaScript โดยไม่ส่งผลให้เกิดiframe(วิธีการที่น่าเกลียด)

คุณสามารถทำได้ใน JavaScript การใช้ jQuery จะทำให้ไม่เจ็บปวด

ฉันขอแนะนำให้คุณตรวจสอบ AJAX และการโพสต์

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');
      }
   }   );
}

ฉันพยายามหลายครั้งเพื่อหาทางออกที่ดีและคำตอบโดย @taufique ช่วยให้ฉันได้รับคำตอบนี้

หมายเหตุ : อย่าลืมใส่ event.preventDefault(); ที่จุดเริ่มต้นของเนื้อหาของฟังก์ชัน

หากคุณส่งไปยังหน้าเดียวกับที่เป็นแบบฟอร์มคุณสามารถเขียนแท็กแบบฟอร์มโดยไม่ต้องดำเนินการใด ๆ และจะส่งแบบนี้

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

ความเป็นไปได้เพิ่มเติมคือการสร้างลิงก์จาวาสคริปต์โดยตรงไปยังฟังก์ชันของคุณ:

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

...

ฉันไม่รู้จัก JavaScript และฉันเพิ่งเริ่มเรียนรู้ PHP ดังนั้นสิ่งที่ช่วยฉันได้จากคำตอบเหล่านั้นคือ:

1. สร้าง inedx.php และแทรก:

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

2. สร้าง email.php และใส่รหัสนี้เพื่อตรวจสอบว่าคุณได้รับข้อมูลหรือไม่ (คุณควรเห็นใน index.php ใน iframe):

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

3. หากทุกอย่างเรียบร้อยให้เปลี่ยนรหัสใน email.php เป็น:

    <?php
    if (isset($_POST['Submit'])){
    $to = $_POST['email'];
    $subject = "Test email";
    $message = "Test message";
    $headers = "From: test@test.com \r\n";
    $headers .= "Reply-To: test@test.com \r\n";
    $headers .= "MIME-Version: 1.0\r\n";
    $headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
    
    mail($to, $subject, $message, $headers);
    }
    ?>

หวังว่านี่จะช่วยสำหรับมือใหม่อย่างฉัน :)

นี่คือ jQuery บางส่วนสำหรับโพสต์ไปที่หน้า php และรับ html กลับ:

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