2023.11.21使用＜button＞元素来触发form表单和数据提交

最新推荐文章于 2024-05-08 13:15:46 发布

leigh_chen

最新推荐文章于 2024-05-08 13:15:46 发布

阅读量1.4k

点赞数 1

分类专栏：开发日记文章标签：前端 javascript

本文链接：https://blog.csdn.net/leigh_chen/article/details/134498831

版权

开发日记专栏收录该内容

70 篇文章 1 订阅

订阅专栏

2023.11.21使用＜button＞元素来触发form表单和数据提交

除了使用<input>中的submit方式进行form表单和数据提交，还可以使用button方式，两种方式视使用场景，各有优点。

方法一：可以将<button>放在<form>元素中，并将type属性设置为"submit"。这样当用户点击按钮时，就会触发表单的提交操作。如下示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>Form Submission</title>
</head>
<body>
    <form action="/submit-form" method="post">
        <input type="text" name="username" placeholder="用户名">
        <input type="password" name="password" placeholder="密码">
        <button type="submit">提交</button>
    </form>
</body>
</html>

方法二：使用button元素进行传值。

将button元素包含在form标签中，并设置一个隐藏的input元素来存储值。当用户点击按钮时，表单会提交并将值传递给服务器。
html

<form action="your-action-url" method="post">
  <input type="hidden" name="value" value="your-value" />
  <button type="submit">Submit</button>
</form>

方法三：使用JavaScript处理按钮的点击事件，并通过JavaScript将值传递给其他地方，比如存储在变量中或者发送给服务器。

<button onclick="getValue('your-value')">Click</button>

<script>
  function getValue(value) {
    // 处理传递的值
    console.log(value);
    // 或者将值发送到服务器
  }
</script>

方法四：使用data-属性：使用data-*属性来存储值，并通过JavaScript获取该值。

<button id="myButton" data-value="your-value">Click</button>

<script>
  var button = document.getElementById('myButton');
  var value = button.dataset.value;
  console.log(value);
</script>

方法五：通过JavaScript动态创建了一个表单元素，并将要传递的参数作为隐藏字段添加到表单中。然后，将表单添加到页面中并提交表单，实现将image.url传递到后端。后端处理完成后会根据具体情况进行页面跳转。

<button type="button" class="btn btn-primary" onclick="previewImage('{{ image.url }}')">预览</button>
……
<script>
    function previewImage(imageUrl) {
        var form = document.createElement('form');
        form.method = 'POST';
        form.action = '/preview_image';

        var input = document.createElement('input');
        input.type = 'hidden';
        input.name = 'image_url';
        input.value = imageUrl;

        form.appendChild(input);
        document.body.appendChild(form);
        form.submit();
    }
</script>

当然还可以使用jquery和ajax进行传递，视使用场景决定。