提交表单而不重新加载页面

IT技术 javascript form-submit
2021-02-26 08:01:12

我有一个内置于 JavaScript 的函数，我想在点击表单提交后执行该函数。它基本上完全改变了页面的外观。但是我需要一个来自搜索框中的变量来继续访问 JavaScript。目前它闪烁并重置那里的内容，因为它重新加载了页面。

所以我在我的函数中设置了一个 return false 以防止它这样做，但我想要的变量没有通过表单提交。关于我应该怎么做才能得到它的任何想法？页面刷新是可以的，只要该updateTable()功能正常工作并且没有被页面重置所重置。

<form action="" method="get" onsubmit="return updateTable();">
  <input name="search" type="text">
  <input type="submit" value="Search" >
</form>

这是updateTable函数：

function updateTable() { 
  var photoViewer = document.getElementById('photoViewer');
  var photo = document.getElementById('photo1').href;
  var numOfPics = 5;
  var columns = 3; 
  var rows = Math.ceil(numOfPics/columns);
  var content="";
  var count=0;

  content = "<table class='photoViewer' id='photoViewer'>";
  for (r = 0; r < rows; r++) {
    content +="<tr>";
    for (c = 0; c < columns; c++) {
      count++;
      if(count == numOfPics) break; // check if number of cells is equal number of pictures to stop
      content +="<td><a href='"+photo+"' id='photo1'><img class='photo' src='"+photo+"' alt='Photo'></a><p>City View</p></td>";
    }
    content +="</tr>";
  }
  content += "</table>";
  photoViewer.innerHTML = content;
}
4个回答

您不能以正常方式使用表单来执行此操作。相反，您想使用 AJAX。

将提交数据并提醒页面响应的示例函数。

function submitForm() {
    var http = new XMLHttpRequest();
    http.open("POST", "<<whereverTheFormIsGoing>>", true);
    http.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    var params = "search=" + <<get search value>>; // probably use document.getElementById(...).value
    http.send(params);
    http.onload = function() {
        alert(http.responseText);
    }
}
^ 对于我们这些在嵌入式系统上做页面的人来说非常方便。
2021-04-16 08:01:12
+1 为 AJAX with on JQuery
2021-05-02 08:01:12
<form action="" method="get" onsubmit="updateTable();return false;"> 这样只会执行javascript函数，不会重新加载页面
2021-05-03 08:01:12
这似乎仍然为我重新加载页面。其他人？
2021-05-09 08:01:12
不工作，页面正在重新加载。
2021-05-10 08:01:12

您可以将 jQuery 序列化函数与 get/post 一起使用，如下所示：

$.get('server.php?' + $('#theForm').serialize())

$.post('server.php', $('#theform').serialize())

jQuery 序列化文档：http : //api.jquery.com/serialize/

使用 jQuery 的简单 AJAX 提交：

// this is the id of the submit button
$("#submitButtonId").click(function() {

    var url = "path/to/your/script.php"; // the script where you handle the form input.

    $.ajax({
           type: "POST",
           url: url,
           data: $("#idForm").serialize(), // serializes the form's elements.
           success: function(data)
           {
               alert(data); // show response from the php script.
           }
         });

    return false; // avoid to execute the actual submit of the form.
});
为什么会投反对票？我看到人们一直在发布 jQuery 答案，即使 jQuery 没有被标记......
2021-04-22 08:01:12
这个问题没有被标记为 jQuery，但serialize()非常简洁。
2021-05-13 08:01:12
@AhsanShah 还有其他框架。也许（并且可能）OP 正在学习 Javascript 并想知道应该如何完成。
2021-05-13 08:01:12

我想这就是你需要的。试试这个 。

<form action="" method="get">
                <input name="search" type="text">
                <input type="button" value="Search" onclick="return updateTable();">
                </form>

和你的javascript代码是一样的

function updateTable()
    {   
        var photoViewer = document.getElementById('photoViewer');
        var photo = document.getElementById('photo1').href;
        var numOfPics = 5;
        var columns = 3; 
        var rows = Math.ceil(numOfPics/columns);
        var content="";
        var count=0;

        content = "<table class='photoViewer' id='photoViewer'>";
            for (r = 0; r < rows; r++) {
                content +="<tr>";
                for (c = 0; c < columns; c++) {
                    count++;
                    if(count == numOfPics)break; // here is check if number of cells equal Number of Pictures to stop
                        content +="<td><a href='"+photo+"' id='photo1'><img class='photo' src='"+photo+"' alt='Photo'></a><p>City View</p></td>";
                }
                content +="</tr>";
            }
        content += "</table>";

        photoViewer.innerHTML = content; 
}
如果您有 100 个单选按钮动态生成怎么办？
2021-05-03 08:01:12

我以一种与我想做的不同的方式去做……给了我需要的结果。我选择不提交表单，而只是获取文本字段的值并在 javascript 中使用它，然后重置文本字段。对不起，如果我用这个问题打扰了任何人。

基本上就是这样做的：

    var search = document.getElementById('search').value;
    document.getElementById('search').value = "";
其它你可能感兴趣的问题
上一篇将键盘焦点设置为 <div> 下一篇将索引从 for 循环传递给 ajax 回调函数（JavaScript）