jqueryで投稿フォームを作成する

投稿アクションを送信したいので、投稿をクリックするとページが更新されず、div1に入力されたデータはkanjiconverter.phpに送信され、div2によって<?php echo $newkanji ?>に表示されます。これらのページには3つのフォームがあります。jqueryで投稿フォームを作成する

ここに私のkanjiconverter.php。ここに送信コードを保存します。

<?php 
    if(isset($_POST['submit1'])){ 
     $kanji = ($_POST['convertkanji']); 

     $replacements = [ 
     'class="rt">' => "", 
     ]; 
     $newkanji = strtr($kanji, $replacements); 
    } 
?>

と私のフォームコードはこちらです。送信ボタンはdiv1でしたが、inputタグはbuttonタグではありません。

<form id="convertkanji" method="post" action="kanjiconverter.php"></form> 
     <form> 
      <div class="form-row"> 

      <!-- START DIV1 HERE --> 
      <div id="div1" class="form-group col-md-6"> 
      <label for="convertkanji">Kanji Convert</label> 
      <textarea id="convertkanji1" name="convertkanji" rows="10" form="convertkanji"></textarea> 
      <input type="submit" name="submit1" class="btn btn-default" form="convertkanji" value="Convert" style="width: 100%; margin-top: 6px;" /> 
      </div> 
      <!-- Ended DIV1 HERE --> 

      <!-- START DIV2 HERE --> 
      <div id="div2" class="form-group col-md-6" style="display: none;"> 
     <label for="kanji">New Kanji</label> 
     <textarea id="kanji" name="kanji" rows="12" form="tambahposting"><?php echo $newkanji ?></textarea> 
    </div> 
      <!-- Ended DIV2 HERE --> 
    </form>

とheres my jqueryスクリプト。私は<html>タグの上に置きます。

<script> 
     $(function() { 
    $('#div1').show(); 
    $('#div2').hide(); 

    $('input[name="submit1"]').on('click', function(e) { 
    e.preventDefault(); 


    $('#div1').hide(); 
    $('#div2').show(); 

    $.post('kanjiconverter.php', $('form').serialize(), function(response) { 
     //Your response from the server-side 
    }) 
    }); 
}); 
     </script>

私は最初とdiv1ショーのためdiv2非表示を作ります。しかし私がサブミットをクリックすると、div1は隠れて、div2が表示されます。

と<head>と</head>タグとの間には、<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>がある。

問題は、データを送信するをクリックしたときに表示されない入力です。誰が働いていたのかを隠すだけです。私はデータが送信されないと思う。

出典

2017-12-08 jazuly aja

オープニングフォームタグは2つあります。悪いHTML。レビューしてください。

出典

2017-12-08 01:34:38 lowry0031

私はまだそれが1つ働いていない場合でも –

e.preventDefault（）のためにボタンがフォームを送信していません。このメソッドが呼び出された場合、イベントのデフォルトのアクションはトリガーされないため、ボタンは内部にデータを含むフォームを送信することを想定した動作を行いません。だから、これを修正するには、表示して非表示にした後にこれを追加するのが最も役に立ちます。
$（ "#convertkanji"）.submit（）;

出典

2017-12-08 02:29:12

は動作しません。そのコードは私を.../kanjiconverter.phpにリダイレクトさせ、ちょうど白いページを表示します –

あなたのdiv2には別のファイルにあるので、<?php echo $newkanji ?>は使用できません。あなたのajaxレスポンスからnewkanjiを設定し、htmlマークアップを最初に修正してください。終了タグがありません。

出典

2017-12-12 05:06:08

多くの変更が必要です。これはあなたのために動作します

<script> 
$(function() { 
    $('#div1').show(); 
    $('#div2').hide(); 

    $('input[name="submit1"]').on('click', function(e) { 
    e.preventDefault(); 
    $('#div1').hide(); 
    $('#div2').show(); 

    $.post('kanjiconverter.php', $('form').serialize(), function(response) { 
     $('#kanji').html(response); 
    }) 
    }); 
}); 
</script>

ホープ：このよう

<form> 
    <div class="form-row"> 
    <!-- START DIV1 HERE --> 
     <div id="div1" class="form-group col-md-6"> 
      <label for="convertkanji">Kanji Convert</label> 
      <textarea id="convertkanji1" name="convertkanji" rows="10" form="convertkanji"></textarea> 
      <input type="submit" name="submit1" class="btn btn-default" form="convertkanji" value="Convert" style="width: 100%; margin-top: 6px;" /> 
     </div> 
    <!-- Ended DIV1 HERE --> 

    <!-- START DIV2 HERE --> 
    <div id="div2" class="form-group col-md-6" style="display: none;"> 
     <label for="kanji">New Kanji</label> 
     <textarea id="kanji" name="kanji" rows="12" form="tambahposting"></textarea> 
    </div> 
    <!-- Ended DIV2 HERE --> 
</form>

あなたjQuery：あなたkanjiconverter.phpは

<?php 
    if(isset($_POST['submit1'])){ 
     $kanji = ($_POST['convertkanji']); 

     $replacements = [ 
     'class="rt">' => "", 
     ]; 
     echo $newkanji = strtr($kanji, $replacements); 
    } 
?>

あなたHTMLコードは次のようになります好きなはずです。

出典

2017-12-12 05:30:06

jqueryで投稿フォームを作成する

答えて

関連する問題