发表新帖
发表新帖

Submit form without page reloading

后端 未结
关注
17 2483
无人及你
无人及你 2020-11-22 00:45

I have a classifieds website, and on the page where ads are showed, I am creating a \"Send a tip to a friend\" form...

So anybody who wants can send a tip of the ad

相关标签:
17条回答
  • 你的背包
    2020-11-22 01:07

    The page will get reloaded if you don't want to use javascript

    0 讨论(0)
  • 梦谈多话
    2020-11-22 01:10

    Fastest and easiest way is to use an iframe. Put a frame at the bottom of your page.

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

    And in your form do this.

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

    and to make the frame invisible in your css.

    iframe{
  display: none;
}
    0 讨论(0)
  • 天命终不由人
    2020-11-22 01:11

    this is exactly how it CAN work without jQuery and AJAX and it's working very well using a simple iFrame. I LOVE IT, works in Opera10, FF3 and IE6. Thanks to some of the above posters pointing me the right direction, that's the only reason I am posting here:

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

    the php code generating the page that is being called above:

    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>
  ');
}
    0 讨论(0)
  • 不知归路
    2020-11-22 01:11

    Have you tried using an iFrame? No ajax, and the original page will not load.

    You can display the submit form as a separate page inside the iframe, and when it gets submitted the outer/container page will not reload. This solution will not make use of any kind of ajax.

    0 讨论(0)
  • 情话喂你
    2020-11-22 01:12

    Submitting Form Without Reloading The Page And Get Result Of Submitted Data In The Same Page

    Here's some of the code I found on the internet that solves this problem :

    1.) IFRAME

    When the form is submitted, The action will be executed and target the specific iframe to reload.

    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;

?>

    Tags: phpajaxjqueryserversidehtml

    0 讨论(0)
  • 死守一世寂寞
    2020-11-22 01:14

    You will need to use JavaScript without resulting to an iframe (ugly approach).

    You can do it in JavaScript; using jQuery will make it painless.

    I suggest you check out AJAX and Posting.

    0 讨论(0)
 看不清?
提交回复
热议问题