donljt2606 2015-12-31 18:52
浏览 23
已采纳

单击“链接”以选择值并提交表单

I have an existing form using drop down menu with submit button and it works fine.

I would like to add direct links for select categories links or images outside of the form - how can I accomplish this?

My attempt below does not work.
Any suggestions are appreciated!

<form method="post" action="page.php?cat" id="searchcat"> 
    <select name="Categories">
        <option selected>Browse...</option>
        <option value="j001">Option 1</option>
        <option value="j002">Option 2</option>
        <option value="j003">3</option>
        <option value="j004">4</option>
        ...
    </select>
</form>

<a onclick="SelectItemByValue(document.getElementById('searchcat'), j004);">
    Click here to submit option#4
</a>

<script>
function SelectItemByValue(element, value) {
    if (value !== undefined && value !== null) {
        var length = element.options.length;
        for (var i = 0; i < length; i++) {
            if (element.options[i].value === value) {
                element.selectedIndex = i;
                return;
            }
        }
    }
}
</script>
  • 写回答

1条回答 默认 最新

  • dqce48404 2015-12-31 19:19
    关注

    Straightforward, take a look at the lines with changed, both in html and javascript:

    <form method="post" action="page.php?cat" id="searchcat"> 
        <select name="Categories" id='cats'>  <!-- changed -->
            <option selected>Browse...</option>
            <option value="j001">Option 1</option>
            <option value="j002">Option 2</option>
            <option value="j003">3</option>
            <option value="j004">4</option>
            ...
        </select>
    </form>
    
    <a onclick="SelectItemByValue(document.getElementById('searchcat'), 'j004');"> <!-- changed -->
        Click here to submit option#4
    </a>
    
    <script>
    function SelectItemByValue(form, value) { // changed
        var sel = form.elements.namedItem('cats'); // changed
        if (value !== undefined && value !== null) {
            var length = sel.options.length; // changed
            for (var i = 0; i < length; i++) {
                if (sel.options[i].value === value) { // changed
                    sel.selectedIndex = i;
                    form.submit(); // changed
                    return;
                }
            }
        }
    }
    </script>
    


    Your code had some problems, such as:
    • You were missing ' on j004, so: 'j004';
    • Your element variable didn't refer to the <select> element; and
    • You were missing the actual call to submit the form.


    You mentioned that you have a button, like so:
    <input id="search2" type="submit" name="submit" value="Search">
    

    But in my tests, naming a button as submit caused the script to stop working. This code worked for me:

    <button name='sent'>Search</button>
    

    But be advised in case you are using the button as isset: If the form is sent via the anchor, there will be no sent to check if isset...

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 做过TCL海信电视小米电视相关影视会员软件私我
  • ¥15 Mapreduce是正常的,在运行其他jar包时并没有任何问题,只是在做LogCount.jar 时出的问题。如图所示
  • ¥15 ImportError: DLL load failed while importing _iterative: 找不到指定的模块。
  • ¥15 如何通过交互分析得出某高危患者对放疗获益更多
  • ¥15 相关性分析中,p<0.05, r=0.29,怎么评价相关性呢
  • ¥15 docker部署Mongodb后输入命令报错?
  • ¥15 将下列流程图转变成python程序代码
  • ¥15 我需要全国每个城市的最新小区名字等数据。
  • ¥15 开发一个小区生态的小程序
  • ¥15 如何解决Excel中dependent dropdown list 的问题