隐藏或显示两个div

时间:2017-12-07 16:00:58

标签: javascript jquery html

我有2 func scrollViewWillBeginDragging(_ scrollView: UIScrollView) { self.offset = scrollView.contentOffset } func scrollViewDidScroll(_ scrollView: UIScrollView) { let deltaX = abs(self.offset.x - self.collectionView.contentOffset.x) let deltaY = abs(self.offset.y - self.collectionView.contentOffset.y) if deltaX != 0 && deltaY != 0 { if deltaX >= deltaY { self.collectionView.contentOffset = CGPoint(x: self.collectionView.contentOffset.x, y: self.offset.y) } else { self.collectionView.contentOffset = CGPoint(x: self.offset.x, y: self.collectionView.contentOffset.y) } } } <div>div1。在我点击提交之前,我希望div2 div1show div2,但点击提交后,hidediv1和{{1}将hide

我的代码在kanjiconverter.php

div2

我的表单代码

show

和jquery脚本在这里

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

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

我将<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> 上的jquery代码和 <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> 代码中的<html>放在一起。

显示和隐藏之间的

正在工作,但是当我点击提交按钮时,我没有得到任何数据。

1 个答案:

答案 0 :(得分:0)

您必须在提交按钮上附加clicksubmit事件,然后使用ajax请求将数据发送到服务器端,以防止页面刷新并hide/show您需要的div在活动中。

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

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


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

    $.post('php_file.php', $('form').serialize(), function(response) {
      //Your response from the server-side
    })
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></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">
      <label for="kanji">New Kanji</label>
      <textarea id="kanji" name="kanji" rows="12" form="tambahposting"><?php echo $newkanji ?></textarea>
    </div>
    <!-- Ended DIV2 HERE -->
</form>