पृष्ठ पुनः लोड किए बिना फ़ॉर्म सबमिट करें

Question 1

मेरे पास एक वर्गीकृत वेबसाइट है, और उस पृष्ठ पर जहां विज्ञापन दिखाए जाते हैं, मैं "एक मित्र को एक टिप भेजें" फ़ॉर्म बना रहा हूं ...

तो कोई भी व्यक्ति जो कुछ मित्रों को ईमेल-एड्रेस पर विज्ञापन की टिप भेज सकता है।

मैं अनुमान लगा रहा हूं कि प्रपत्र को 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>

फॉर्म जमा करते समय, पृष्ठ पुनः लोड हो जाता है ... मुझे ऐसा नहीं चाहिए ...

क्या इसे फिर से लोड करने और अभी भी मेल भेजने के लिए कोई रास्ता नहीं है? अधिमानतः अजाक्स या jquery के बिना ...

धन्यवाद

Question 2

आपको पृष्ठ को पुनः लोड किए बिना ईमेल भेजने के लिए एक अजाक्स अनुरोध प्रस्तुत करना होगा। 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पृष्ठ पर पृष्ठभूमि में सबमिट होगा जिसे अनुरोध को संभालने और ईमेल भेजने की आवश्यकता होगी।

Question 3

मैंने पाया है कि मुझे लगता है कि एक आसान तरीका है। यदि आप पृष्ठ में एक इफ्रेम डालते हैं, तो आप वहां कार्रवाई से बाहर निकलकर उसे दिखा सकते हैं। आप निश्चित रूप से कुछ नहीं कर सकते। उस स्थिति में, आप 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>

Question 4

आप या तो AJAX का उपयोग करते हैं या आप

दस्तावेज़ में एक iframe बनाएं और जोड़ें
iframes का नाम 'foo' पर सेट करें
प्रपत्रों को 'फू' पर लक्षित करें
प्रस्तुत
प्रतिक्रिया देने के लिए फ़ॉर्म कार्रवाई को 'पेरेंट.नोटाइज़ (...)' के साथ जावास्क्रिप्ट रेंडर करें
वैकल्पिक रूप से आप iframe को हटा सकते हैं

Question 5

सबसे तेज़ और सबसे आसान तरीका एक iframe का उपयोग करना है। अपने पृष्ठ के नीचे एक फ्रेम रखें।

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

और अपने रूप में यह करो।

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

और अपने सीएसएस में फ्रेम को अदृश्य बनाने के लिए।

iframe{
  display: none;
}

Question 6

पृष्ठ को पुनः लोड किए बिना फॉर्म जमा करना और उसी पृष्ठ में प्रस्तुत डेटा का परिणाम प्राप्त करना

यहाँ कुछ कोड मैंने इंटरनेट पर पाए हैं जो इस समस्या को हल करते हैं:

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 ajax jQuery सर्वर साइड एचटीएमएल

Question 7

jquery-ajaxइस मामले में मदद लेना जरूरी है । इसके बिना ajax, वर्तमान में कोई समाधान नहीं है।

फॉर्म सबमिट होने पर सबसे पहले एक जावास्क्रिप्ट फंक्शन को कॉल करें। बस सेट onsubmit="func()"। यदि फ़ंक्शन को कॉल किया जाता है, तो भी सबमिशन की डिफ़ॉल्ट कार्रवाई की जाएगी। यदि यह किया जाता है तो पृष्ठ को ताज़ा करने या पुनर्निर्देशित करने से रोकने का कोई तरीका नहीं होगा। इसलिए, अगला कार्य डिफ़ॉल्ट कार्रवाई को रोकना है। की शुरुआत में निम्नलिखित लाइन डालें func()।

event.preventDefault()

अब, कोई पुनर्निर्देशन या ताज़ा नहीं होगा। तो, आप बस से एक अजाक्स कॉल func()करते हैं और कॉल समाप्त होने पर आप जो करना चाहते हैं।

उदाहरण:

प्रपत्र:

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

जावास्क्रिप्ट:

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

Question 8

यह ठीक उसी तरह है जैसे यह jQuery और AJAX के बिना काम कर सकता है और यह एक साधारण iFrame का उपयोग करके बहुत अच्छी तरह से काम कर रहा है। I LOVE IT, 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>
  ');
}

Question 9

इससे आपकी समस्या का समाधान हो जाना चाहिए।
सबमिट बटन क्लिक करने के बाद इस कोड में हम jquery ajax को कॉल करते हैं और हम
POST / GET
डेटा टाइप करने के लिए url पास करते हैं: डेटा जानकारी जिसे आप इनपुट फ़ील्ड या किसी अन्य का चयन कर सकते हैं।
sucess: कॉलबैक यदि सर्वर
फंक्शन पैरामीटर टेक्स्ट, html या json से सबकुछ ठीक है ,
तो sucess में सर्वर से प्रतिक्रिया आप चेतावनी लिख सकते हैं यदि आपको मिला डेटा किसी तरह की स्थिति में है और इसी तरह। या अपने कोड को निष्पादित करें कि आगे क्या करना है।

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

Question 10

आप अपने फ़ॉर्म की लक्ष्य विशेषता को एक छिपे हुए iframe पर सेट करने का प्रयास कर सकते हैं, इसलिए फ़ॉर्म वाले पृष्ठ को पुनः लोड नहीं किया जाएगा।

मैंने इसे फ़ाइल अपलोड के साथ आज़माया (जो हमें पता है कि AJAX के माध्यम से नहीं किया जा सकता है), और इसने खूबसूरती से काम किया।

Question 11

क्या आपने आईफ्रेम का उपयोग करने की कोशिश की है? कोई अजाक्स, और मूल पृष्ठ लोड नहीं होगा।

आप सबमिट फॉर्म को iframe के अंदर एक अलग पेज के रूप में प्रदर्शित कर सकते हैं, और जब यह सबमिट हो जाता है तो बाहरी / कंटेनर पेज पुनः लोड नहीं होगा। इस घोल से किसी भी तरह का अजाक्स इस्तेमाल नहीं होगा।

Question 12

यदि आप उसी पृष्ठ पर सबमिट कर रहे हैं जहां फ़ॉर्म है तो आप प्रपत्र टैग को किसी क्रिया के साथ लिख सकते हैं और यह इस तरह सबमिट होगा

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

Question 13

मैंने ऊपर दिए गए 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>

Question 14

आपको एक iframe(बदसूरत दृष्टिकोण) के परिणामस्वरूप जावास्क्रिप्ट का उपयोग करने की आवश्यकता होगी ।

आप इसे जावास्क्रिप्ट में कर सकते हैं; jQuery का उपयोग करने से यह दर्द रहित हो जाएगा।

मेरा सुझाव है कि आप AJAX और पोस्टिंग देखें।

Question 15

एक और संभावना अपने कार्य के लिए एक सीधा जावास्क्रिप्ट लिंक बनाने की है:

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

...

Question 16

यदि आप जावास्क्रिप्ट का उपयोग नहीं करना चाहते हैं तो पृष्ठ पुनः लोड हो जाएगा

Question 17

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

मैंने एक अच्छे समाधान के लिए कई बार प्रयास किया और @ उत्तर द्वारा मुझे इस उत्तर पर पहुंचने में मदद मिली।

NB : event.preventDefault(); समारोह के शरीर की शुरुआत में डाल करने के लिए मत भूलना ।

Question 18

यहाँ php पेज पर पोस्ट करने और html वापस पाने के लिए कुछ jQuery है:

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