Question

我已将display：none放到其他p标签和div，

输入我的姓名后如何显示它们

我想输入我的名字并在display：none div下显示所有内容

<form method="post">
  <p>
    <input type="text" name="myname" />
  </p><label>
    <input type="submit" name="submit" value="Enter your names" />
    </label>
</form>
<div style="display:none;">
  <p>enter your age to enter this site</p>
  <p>mr.myname</p>

  <div>
    waiting for your age to enter site </div>
  <input type="text" name="age" />
</div>

Answer 1

您可以通过使用JQuery进行DOM操作来简化工作，例如收听您输入的blur event以显示内容。
在下面的示例中，尝试输入您的姓名，然后使输入不突出显示内容，您将看到内容。

$('input[name="myname"]').blur(function() {
  $('div').css('display', 'block');
});

<!DOCTYPE html>
<html lang="en">

<head>
  <title>title</title>
  <meta charset="utf-8">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <form method="post">
    <p>
      <input type="text" name="myname" />
    </p>
    <label>
        <input type="submit" name="submit" value="Enter your names"/>
    </label>
  </form>
  <div style="display:none;">
    <p>enter your age to enter this site</p>
    <p>mr.myname</p>

    <div>
      waiting for your age to enter site
    </div>
    <input type="text" name="age" />
  </div>
</body>

</html>

Answer 2

// 1. Include jQuery to your code if not yet done
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

// 2. Change this line 
<input type="text" name="age" />
To this
<input type="text" name="age" id="age" />

// 3. Add this code where you wish to print the age
<span id="printAge" style="color:green"></span>

// 4. Give this code before <body> closes
<script>
 $(document).ready(function(){

    $('#age').keyup(function () { 
         var ageText = $(this).val();
         $('#printAge').html();
    });
 });
</script>

如果您仍然发现问题@Chris G，请随时回复

Answer 3

我假设您正在尝试在用户单击“提交”按钮后显示隐藏的div。我可能会理解这是错误的，但是如果我愿意的话，请纠正我。

首先让我们为隐藏的div提供一个“ hidden-div”类。然后，我将使用jQuery使用以下代码来监听“提交”按钮的点击：

// grab the element with the class hidden-div
var hiddenDiv = $('.hidden-div');
// create an event listener on the button with type=submit
$('button[type=submit]').click(function(e) {
   // prevent the default action which is submitting the form
    e.preventDefault();

    // show the hidden div
    hiddenDiv.show();
});

要使用jQuery，您需要将其导入；您可以在结束</body>标记之前使用脚本标记进行操作

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

我希望这是您想要的。

Answer 4

你的意思是

$("[name=myname]").on("input",function() { 
  $("#otherstuff").toggle(this.value=="Fred Brown"); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post">
  <p>
    <input type="text" name="myname" />
  </p><label>
    <input type="submit" name="submit" value="Enter your names" />
    </label>
</form>
<div id="otherstuff" style="display:none;">
  <p>enter your age to enter this site</p>
  <p>mr.myname</p>

  <div>
    waiting for your age to enter site </div>
  <input type="text" name="age" />
</div>

Answer 5

您可以尝试以下方式：

$('form').submit(function(e){
  $('#txtname').text($('[name=myname]').val());
  $('#container').show();
  e.preventDefault();// only for demonstration
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post">
<p>
  <input type="text" name="myname" />
</p
><label>
<input type="submit" name="submit" value="Enter your names" />
</label>
</form>
<div id="container" style="display:none;">
<p>enter your age to enter this site</p>
<p id="txtname"></p>

<div>
   waiting for your age to enter site  </div>
  <input type="text" name="age" />
</div>

使用html输入后显示内容

5 个答案: