Javascript / HTML - 将函数返回变量传递给隐藏的输入值

时间:2016-03-09 23:29:09

标签: javascript php html

我已经阅读了很多关于此事的帖子,而且我仍然遇到将返回变量从我的函数传递到隐藏输入值的问题。该功能是检查页面上的所有单选按钮(其中12个)并找到所选的单选按钮。它要么传递NULL,要么将javascript传递给screen.php。我已经测试了checked()函数并且它可以工作(使用alert()来显示值)。我已经阅读了大量关于将值传递给隐藏输入的帖子,但这些解决方案都没有对我有用。

如果您需要查看更多代码,我可以将其发布在pastebin上。

<script language="text/javascript">
    function checked()
    {
        var inputs = document.getElementsByClassName('radio');
        var valueSelected;
        for (var i = 0; i < inputs.length; i++) {
            if (inputs[i].checked) valueSelected = inputs[i].value;
        }

        return valueSelected;
    }
    </script>
</head>

<body>
    <div id="header-wrapper">
        <div id="header">
            <div id="logo">
                <h1><a href="index.php">KSM</a></h1>
            </div>
        </div>
        <div id="buttons">
        <ul>
        <li>
        <form id="form_ready" method="post" action="../backend/screen.php">
            <input type="hidden" name="screenid" value="1" />
            <input type="hidden" name="status" value="READY" />
            <input type="hidden" name="pickupid" id="pickupid" value="" />
            <input type="submit" class="submit" name="READY" onclick="document.getElementById('pickupid').value = checked();">
        </form>
        <div id="search">
            <ul id="nav">
                <li class="tab1"><a href="index_tbl.php">Ordered</a></li>
            </ul>
        </div>
        <div id="content">
            <div id="container">
            <table>
                <tr>
                <td>
                    <input type="radio" class="radio" name="pickup" id="1" value="001" />
                        <label for="1"> <span>001</span> </label>
                </td>
                <td>
                    <input type="radio" class="radio" name="pickup" id="2" value="002" />
                        <label for="2"> <span>002</span> </label>
                </td>
                <td>
                    <input type="radio" class="radio" name="pickup" id="3" value="003" />
                        <label for="3"> <span>003</span> </label>
                </td>
                <td>
                    <input type="radio" class="radio" name="pickup" id="4" value="004" />
                        <label for="4"> <span>004</span> </label>
                </td>
                </tr>
                <tr>
                <td>
                    <input type="radio" class="radio" name="pickup" id="5" value="005" />
                        <label for="5"> <span>005</span> </label>
                </td>
                <td>
                    <input type="radio" class="radio" name="pickup" id="6" value="006" />
                        <label for="6"> <span>006</span> </label>
                </td>
                <td>
                    <input type="radio" class="radio" name="pickup" id="7" value="007" />
                        <label for="7"> <span>007</span> </label>
                </td>
                <td>
                    <input type="radio" class="radio" name="pickup" id="8" value="008" />
                        <label for="8"> <span>008</span> </label>
                </td>
                </tr>
                <tr>
                <td>
                    <input type="radio" class="radio" name="pickup" id="9" value="009" />
                        <label for="9"> <span>009</span> </label>
                </td>
                <td>
                    <input type="radio" class="radio" name="pickup" id="10" value="010" />
                        <label for="10"> <span>010</span> </label>
                </td>
                <td>
                    <input type="radio" class="radio" name="pickup" id="11" value="011" />
                        <label for="11"> <span>011</span> </label>
                </td>
                <td>
                    <input type="radio" class="radio" name="pickup" id="12" value="012" />
                        <label for="12"> <span>012</span> </label>
                </td>
                </tr>
            </table>
        </div>
    </div>
</body>

1 个答案:

答案 0 :(得分:0)

当前的代码是什么,你在JS有时间执行你的函数并将数据放入隐藏的输入之前提交表单。我不会建议你现在这样做,但这是一个快速解决方案。

在您的HTML中将表单更改为此

    <form id="form_ready" method="post" action="../backend/screen.php" onsubmit="return checked()">

在你的JS中,将选中的函数更改为:

function checked(){
    var inputs = document.getElementsByClassName('radio');
    var valueSelected;
    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].checked) valueSelected = inputs[i].value;
    }

    return (document.getElementById('pickupid').value = valueSelected);
}

另外,摆脱提交按钮上的onclick。

相关问题