使用JQuery / JavaScript在文本框之后添加输出

时间:2011-12-02 20:26:38

标签: jquery html

我想在文本框之后显示输出。这可以吗?

<html>
<head>

<script type="text/javascript" src="hava.js"></script>
<script type="text/javascript">

        function get() {
                 $.post('data.php', { name: form.name.value },
                   function(output) {
                      $('#age').html(output).show();
                   });
        }

</script>

</head>
<body>
<p>
 <form name="form">
 <input type="text" name="name">
 <br/>
 <input type="button" value="Get" onClick="get();">
 </form>
 <div id="age"></div>
 </p>
</body>
</html>

如果$ name为null,我单击Get按钮时会显示NULL。但null在文本框后面的“我想要”按钮下。所以就像... [文本框] Null

// data.php

<?php
$name = $_POST['name'];
if ($name == NULL) { echo "Null"; }
?>

2 个答案:

答案 0 :(得分:0)

<form name="form">
   <input type="text" name="name">
   <div id="age" style="display:inline-block;"></div>
   <br/>
   <input type="button" value="Get" onClick="get();">
</form>

将您坚持结果的元素移到<br/>上方,并将display属性设置为inline。

小提琴:http://jsfiddle.net/zqTLu/2/

答案 1 :(得分:0)

以下代码适合您

<html>
    <head>

    <script type="text/javascript" src="hava.js"></script>
    <script type="text/javascript">

            function get() {
                     $.post('data.php', { name: form.name.value },
                       function(output) {
                          $('#age').html(output).show();
                       });
            }

    </script> 
    </head>
    <body>
    <p>
     <form name="form">
     <input type="text" name="name">
     <div id="age" style="float:left"></div>
     <br/>
     <input type="button" value="Get" onClick="get();">
     </form>

     </p>
    </body>
    </html>

我更改了<div id="age" style="float:left"></div>的位置,并将其放在文本框后面。