送信ボタンの更新ページ

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(); 

     ?> 

Answer 1

：でpreventDefaultが働いてからこのビットを停止するように見えます。

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

Answer 2

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

Answer 3

たらそれを試してみてください代わりにクリックイベントを使用しての

$('.form').on('submit', function(e){ 
    $("button.form-control-generate").show(); 
    e.preventDefault(); 
    this.submit(); 
}) 

として、あなたのフォームを送信します。 submit型のボタンでsubmit（）アクションが自動的にトリガーされるので、ボタンを送信ハンドラに表示してデフォルトのアクションがページを更新するのを防ぐことができます。

UPDATE：

代わりのあなたにもjQueryを使って同じことを行うことができますPHPを使用しました。

$('.form').on('submit', function(e){ 
 
    e.preventDefault(); 
 
    var date = new Date(); 
 
    date = date.getYear() + 1900; 
 
    var data = $(this).serializeArray(); 
 
    
 
    var str = data[0].value + date + data[1].value; 
 
    $('#output').text(str); 
 
    $('.form-control-generate').show(); 
 
})

.form-control-generate { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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"></div> 
 
    

Answer 4

@ShubhamKhatriはほとんど彼が、私はそれがあるべきとは思わない、これは上のイベントを提出だと思った、それが正しい

問題がある持っていました。私は間違ったボタンに "submit"というタイプがあると思います。確かにpreviewはフォームを提出しませんでしたか？ generateに提出しますか？そう

マークアップへのわずかな変化が -

$("#preview").click(function(e) { 
    e.preventDefault(); 
    var date = new Date(); 
    date = date.getYear() + 1900; 
    var data = $('.form').serializeArray(); 

    var str = data[0].value + ' ' + date + ' ' + data[1].value; 
    $('#footer_date').text(str); 
    $('.form-control-generate').show(); 
}); 

@ShubhamKhatriの答えにコードに生活シンプル

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

と若干の修正をするためにプレビューするIDを追加したらほら