使用jquery在控制台中将表单数据作为对象打印

时间:2015-05-04 22:00:56

标签: jquery

我有html中的3个文本框"名称,电子邮件,评论",我想使用jquery在控制台中作为对象打印,但它不起作用。

Object {name: "Ali", email: "ali@gmail.com", message: "hi there"}

<form action="jq_ajax_contact.php" class="ajax" method="post">
        <div><input type="text" name="name" placeholder="Your name"></div>
        <div><input type="text" name="email" placeholder="Your email"></div>
        <div><textarea name="message" placeholder="Your messsage"></textarea></div>
        <div><input type="submit" value="send"></div>
    </form>

2 个答案:

答案 0 :(得分:1)

JSFiddle:http://jsfiddle.net/vLgxdvu4/

$('form').submit(printObj);

function printObj(e) {
   e.preventDefault();
  var obj = {
    name: $('input[name=name]').val(),
    email: $('input[name=email]').val(),
    message: $('textarea[name=message]').val(),
  }
  console.log(obj);
}

没有表单操作的HTML提交(回复评论)

    <form class="ajax" >
        <div><input type="text" name="name" placeholder="Your name"></div>
        <div><input type="text" name="email" placeholder="Your email"></div>
        <div><textarea name="message" placeholder="Your messsage"></textarea></div>
        <div><input type="submit" value="send"></div>
    </form>

答案 1 :(得分:-1)

只需确保此标记中的jquery文件具有正确的路径<script type="text/javascript" src="jquery1.8.2.js"></script>如果您管理以下是完整的工作示例

<form class="ajax" >
        <div><input type="text" name="name" placeholder="Your name"></div>
        <div><input type="text" name="email" placeholder="Your email"></div>
        <div><textarea name="message" placeholder="Your messsage"></textarea></div>
        <div><input type="submit" value="send"></div>
    </form>



<script type="text/javascript" src="jquery1.8.2.js"></script>
<script>
$('form').submit(function(e){
e.preventDefault();
      var obj = {
        name: $('input[name=name]').val(),
        email: $('input[name=email]').val(),
        message: $('textarea[name=message]').val()
      }
      console.log(obj);

alert("printed in console");
    });

</script>