单击获取列表值并使用值自动提交表单

Posted 2023-03-14

【中文标题】单击获取列表值并使用值自动提交表单

【英文标题】：On click get list values and auto submit form with values

【发布时间】：2020-04-28 21:44:48

【问题描述】：

我想在隐藏字段的表单中自动发送值。

这是我的第一个表格。当我提交此表单时，发生 2 个动作 1.) 触发 js - onclick="displayResult()" 和 2.) 将表单发送到 update.php

<form action="update.php" method="post">
    <select name=category[] id=category multiple="multiple" class=master>
        <?php   
        $file = fopen("category.csv", "r");
        while (($row = fgetcsv($file, 0, ",")) !== FALSE) 
            $category = $row[0];
            ?>
            <option value="<?php echo $category;?>"><?php echo $category;?></option>
            <?php
        
        ?>

    </select>
    <input type="submit" value="Save File" onclick="displayResult()" name="submit" >
</form>

这是我的 js，我尝试通过添加 document.getElementById("myform").submit(); 来自动提交表单；当我做 var_dump 我得到 NULL

<script>
    function displayResult() 
    var options = document.getElementById('master').options;

    var values = [];
    var i = 0, len = options.length;

    while (i < len)
    
      values.push(options[i++].value);
    

    txt=(values.join(','));
        alert(txt);
        document.getElementById('masterlist').value = txt;
        document.getElementById("myform").submit();
        
    </script>

这是我需要通过上面的 js 自动发送值但不起作用的表单。请需要帮助

<form action="update.php" method="post" name="myform" id="myform">
        <input type="hidden" name="masterlist" id="masterlist" value="">
</form>

【参考方案1】：

首先，你应该添加必要的""

<select name=category[] id="category" multiple="multiple" class="master">

将提交更改为隐藏并删除onClick

<input type="submit" value="Save File" name="submit" hidden>

接下来，添加具有 onClick 事件的另一个按钮

<input type="button" value="Save" onclick="displayResult();">

最后 - 修复你的 JS。您应该引用 id 'category'，但您使用 getElementById()

引用类 'master'

var options = document.getElementById('category').options;

工作小提琴（为小提琴目的稍作改动）：jsfiddle.net

【讨论】：

谢谢你的工作，但我如何定位其他表单我有大约 46 个表单我将编辑我的帖子以显示我的意思