ページを送信しましたが、リフレッシュしません。

Question

私はフッタジェネレータに取り組んでいます。

及び第二の機能：

この「プレビュー」ボタンは2つの機能が1に機能しているユーザーは、このようなブラックボックスに入力された値を掲示される：これがどのように見える 私は、このようにjQueryを使って「ボタンフォームコントロール生成する」というボタンを（CSSで、デフォルトでは非表示になっている）を示すことです。

$("button.form-control").click(function(event){ 
    $("button.form-control-generate").show(); 
}); 

Nここで問題が起こる：

プレビューをクリックすると、ページが更新されます。プレビューをクリックすると、1秒間隠しボタンが表示され、ページが更新され、ボタンが非表示に戻ります。だから私はtype="submit"を削除しようとしましたが、私はそれは画像2のように入力されたデータをポストしませんが、隠しボタンが表示されますが、送信タイプが消えてしまったので、ブラックボックスに入力したデータを投稿しません。ここで

私のコードです：

<form class ="form" method="post"> 

      <h3>Select your trademark</h3> 

       <select class="form-control" name="trademark" action=""> 
        <option></option> 
        <option>©</option> 
        <option>™</option> 
        <option>®</option> 
       </select> 

      <h3>Your company name</h3> 

      <input class="form-control" type="text" name="companyName" placeholder="Your company name" /> 

       <br/> 
       <br/> 

      <button class="form-control" type= "submit" name="submit"> 
       Preview 
      </button> 
      <br/> 
      <button class="form-control-generate"name= "submit"> 
       Generate 
      </button> 
     </form> 




<!-- script for the preview image --> 

     <div id = "output"> 
     <?php 

     function footerPreview() 
     { 
      date_default_timezone_set('UTC'); 

      $trademark = $_POST["trademark"]; 

      $company = $_POST["companyName"]; 

      $date = date("Y"); 

      echo "<div id='footer_date'>$trademark $date $company </div>"; 
     } 

     footerPreview(); 

     ?> 

jqueryの：

$("button.form-control").click(function(event){ 
    $("button.form-control-generate").show(); 
}); 

はすでにデフォルトを防ぐ試みたが、私はこれを行う場合、ユーザーは、プレビューボックス内のデータdoesntのショーに入りました。 preventDefaultように見えますが、作業からこのビットを停止します。

<!-- script for the preview image --> 

     <div id = "output"> 
     <?php 

     function footerPreview() 
     { 
      date_default_timezone_set('UTC'); 

      $trademark = $_POST["trademark"]; 

      $company = $_POST["companyName"]; 

      $date = date("Y"); 

      echo "<div id='footer_date'>$trademark $date $company </div>"; 
     } 

     footerPreview(); 

     ?> 

私はこれがAjaxで可能ですが、私はこのケースでは、私はすでにインターネット上で見てみましたか見当がつかない聞い

..

Answer 1

終わりにあなたのjQueryの機能に

return false; 

を追加します。これにより、提出を避けることができます。

次に、あなたのフォームから既に使用しているPHPスクリプトにデータを送信するajax-functionを追加する必要があります。

$.ajax({ 
      url: "YOUR-PHP-SCRIPT" 
     }).done(function (content) { 
      // ADD HERE YOUR LOGIC FOR THE RESPONSE 
     }).fail(function (jqXHR, textStatus) { 
      alert('failed: ' + textStatus); 
     }); 

Answer 2

あなたが持っている場合フォーム内にtype="submit"と入力すると、デフォルトでフォームが送信されます。代わりに<input type="button"を使用してみてください。次に、ボタンアクションでajaxを使用すると、ページを更新せずに実行できます。ここで

は、Ajaxを使用する方法の例です：

function sendAjax() { 
 
    var root = 'https://jsonplaceholder.typicode.com'; 
 
$.ajax({ 
 
    url: root + '/posts/1', 
 
    method: 'GET' 
 
}).then(function(data) { 
 
    $(".result").html(JSON.stringify(data)) 
 
}); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<form> 
 
    <input type="button" onclick="sendAjax()" value="callAjax" /> 
 
    <div class="result"></div> 
 
    </form>

Answer 3

ですから、PHPに$アヤックスPOSTリクエストを行う必要があります。このような何か：

<script> 
$('.form-control').click(function() { 
    $.post(url, {data}, function(result) { 
     footerPreview(); 
    }, 'json'); 
}); 
</script> 

PHPの戻りが発生する場合のでfooterPreviewが呼び出されます。

Answer 4

// javascriptの

function isPostBack() 
{ 
    return document.referrer.indexOf(document.location.href) > -1; 
} 

if (isPostBack()){ 
    $("button.form-control-generate").show(); 
} 

Answer 5

にあなたがindex.phpをを作成することができます追加：

<form class ="form" method="post"> 

      <h3>Select your trademark</h3> 

       <select class="form-control" name="trademark" id="tm"> 
        <option val=""></option> 
        <option val="©">©</option> 
        <option val="™">™</option> 
        <option val="®">®</option> 
       </select> 

      <h3>Your company name</h3> 

      <input class="form-control" type="text" name="companyName" id="cn" placeholder="Your company name" /> 

       <br/> 
       <br/> 

      <button class="form-control" type= "submit" name="submit"> 
       Preview 
      </button> 
      <br/> 
      <button class="form-control-generate" name= "submit" id="generate"> 
       Generate 
      </button> 
</form> 

<div class="output" id="output"> 

</div> 


<script type="text/javascript"> 
    $('#generate').on('click', function(e){ 

     e.preventDefault(); 
     var companyname = $('#cn').val(); 
     var trademark = $('#tm').val(); 

     $.ajax({ 
      url: 'process.php', 
      type: 'post'. 
      data: {'company':companyname,'trademark':trademark}, 
      dataType: 'JSON', 
      success: function(data){ 
       $('#output').append("<div id='footer_date'>"+data.trademark + " " + data.date + " " + data.company + " </div>"); 
      }, 
      error: function(){ 
       alert('Error During AJAX'); 
      } 
     }); 

    }) 
</script> 

とprocess.phpを

これは単なる例です。

<?php 

date_default_timezone_set('UTC'); 

$trademark = $_POST["trademark"]; 

$company = $_POST["company"]; 

$date = date("Y"); 

$array = array(
    'trademark' => $trademark, 
    'company' => $company, 
    'date' => $date 
); 

echo json_encode($array); 

?> 

index.phpとprocess.phpが同じフォルダ内にあることを確認してください。ex.public_html/index.phpとpublic_html/process.php