Question

我的表格看起来像这样：

<form method="post">
    <input type="text" name="username" id="username">
    <input type="text" name="password" id="password">
    <select id="item" name="item">
        <option value="1">Blue</option>
        <option value="3">Pink</option>
        <option value="4">Black</option>
    </select>
    <input type="button" id="submit" onclick="addItem();" name="submit" value="Submit"/>
</form>

如何使用javascript调用addItem()函数并向test.php发送帖子请求，其中用户名为username，密码为password，item为item？

修改

到目前为止，这是我addItem();函数中唯一的代码：

$.post("http://test.com/test.php",{username:username, password:pword, item:item}, function(data) {
    $('#message').html(data);
});

但是，我想知道，如何从所有输入字段中获取数据并将其放入上面的代码中？这是因为通过按钮调用该函数而不是提交按钮。

Answer 1

为了获取数据，jQuery里面有很棒的功能。根据您编辑的问题，您可以尝试：

var username = $("#username").val();  
var pword = $("#password").val();  
var item = $("#item option:selected" ).text();
// you can check the validity of username and password here
$.post("http://test.com/test.php",{username:username, password:pword, item:item},        
function(data) {
   $('#message').html(data);
});

（同样，如果您按照这种方式行事，则不会使用form代码。）

Answer 2

使用jQuery，您可以像执行一样简单地发送表单：

$('form').submit(function(){
   $.post('path/to/server/file', $(this).serialize(),function(response){
       /* do something with returned data from server*/
   });
   return false; /* prevent browser submitting form*/
});

$.post是$.ajax

的快捷方式

jQuery $.ajax() docs

jQuery $.post() docs

Answer 3

<form action="your.php" onSubmit="return addItem()">

这应该这样做

然后在js

function addItem() {
//whatever you want to do
return true;
}

=============================================== ==============

我看到你正在使用Ajax，如果你想这样做，那么你应该做以下事情：

$(document).on("click", "#yoursubmitbuttonID", function(e){
var password = $("#password").val();
var username = $("#username").val();
//send Ajax here
}

Answer 4

提供表单名称和操作URL，然后使用form.submit（）方法发布表单数据

<form method='post' name='myform' action='test.php'>
...
<script type="text/javascript">
function addItem() {
  document.myform.submit();
}
</script>

Javascript按钮onclick获取输入值并提交发布请求

4 个答案: