如何使用HTML表单之外的组合框的值?

时间:2013-06-08 16:09:45

标签: html forms

在我的PHP网页上,我有三个带输入字段的表单,每个表单都有自己的提交按钮。此外,该页面上有一个组合框,不在任何表单之外。只要用户单击提交按钮,就应该使用此组合框中的任何一个。

<html>
...
<select name="app">...</select>
...
<form name="form1" action="up1.php" method="post">
...
<input type="submit" value="Submit" />
</form>

<form name="form2" action="up2.php" method="post">
...
<input type="submit" value="Submit" />
</form>

<form name="form3" action="up3.php" method="post">
...
<input type="submit" value="Submit" />
</form>
...
</html>

如何将当前组合框的值与表单的其他值一起阅读和发布,即使组合框不在表单中?

2 个答案:

答案 0 :(得分:2)

<select id="app">
  <option value="1">a</option>
  <option value="2">b</option>
  <option value="3">c</option>
</select>
<form onsubmit="gatherComboBox(this)" action="" method="">
<!-- form content -->
</form>
<script>
  function gatherComboBox(f){
    var s=document.getElementById('app'), i=document.createElement('input');
    s=s.options[s.selectedIndex].value;
    i.setAttribute('type','hidden');
    i.setAttribute('name','app');
    i.setAttribute('value',s);
    f.appendChild(i);
  }
</script>

答案 1 :(得分:2)

如果你正在使用jQuery,这可能是另一种选择:

<html>
    <head>
    <title>Copy from select to hidden field</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            copy();
            $("#combo").change(function() {
                copy();
            }); 
        }); 
        function copy()
        {
            $(".value-from-combo").each(function() {
                $(this).val($("#combo option:selected").val());
            });   
        }
    </script>
</head>
<body>
    <select id="combo">
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
    </select>

    <form method="get" name="form1" action="">
        <input name="copied1" class="value-from-combo" type="hidden" />
        <input type="submit">
    </form>

    <form method="get" name="form2" action="">
        <input name="copied2" class="value-from-combo" type="hidden" />
        <input type="submit">
    </form>

    <form method="get" name="form3" action="">
        <input name="copied3" class="value-from-combo" type="hidden" />
        <input type="submit">
    </form>
</body>
</html>