douni1396
2016-03-09 23:29
浏览 83
已采纳

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

I've read heaps of posts about this and I'm still having issues with passing the return variable from my function to a hidden input value. The function is checking all radio buttons on the page (12 of them) and finding the one which is selected. It is either passing NULL or the javascript to screen.php. I have tested the checked() function and it works (used alert() to show the value). I've read heaps of posts on passing values to hidden inputs and none of those solutions have worked for me.

If you need to see more code, I can post it on 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条回答 默认 最新

  • dongxian8048 2016-03-10 02:42
    已采纳

    What's going on with the current code you have is you're submitting the form before the JS has time to execute your function and put the data into the hidden input. I wouldn't really suggest doing it in the way you're doing now, but here's a quick fix.

    In your HTML change the form to this

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

    And in your JS change your checked function to:

    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);
    }
    

    Also, get rid of the onclick on that submit button.

    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题