使用javascript / jquery自动提交表单并检索表单数据

Question

我正在寻找创建一个使用单选按钮的表单，但只要单击一个单选按钮，它就会运行一个JavaScript函数，该函数从表单中检索数据，从而产生隐藏的值。

我认为它应该是这样的，但我没有运气。

<script type="text/javascript">
    $(function submitFunction(formname) {
        $(".submit").onclick(function(formname) {
               var hiddenValue = document.formname.hidden_value.value;
               var vote = document.formname.vote.value;
               var dataString = 'vote=' + vote + 'hiddenValue=' + hiddenValue;

               alert(dataString);
        });
    });
</script>

<form action="post"  name="form1" >
    <input type=hidden name='hidden_value' value='12345'>
    <input type='radio' name='vote' value='yes' onclick='submitFunction(form1)';>Yes <br/>
    <input type='radio' name='vote' value='no' onclick='submitFunction(form1)';>No
</form>

编辑：在这里回复一些帮助后，我有一些新代码。它在jsFiddle上运行得很好，但是当我自己实现它时没有运气。我确保jQuery正确加载，它是版本1.51。这是代码。再次感谢。

JavaScript：

     if(jQuery){
         alert("jQuery Here");
     }

    $("input.liveRadio1").click(function() {
        var jThis = $(this);

        var hiddenValue = jThis.siblings('input[name="hidden_value"]').val();
        var vote = jThis.val();
        var dataString = 'vote=' + vote + 'hiddenValue=' + hiddenValue;

        alert(dataString);
    });

HTML：

    <form action="post"  name="form1" >
        <input type=hidden name='hidden_value' value='12345' />
        <input class="liveRadio1" type='radio' name='vote' value='yes' />Yes <br/>
        <input class="liveRadio1" type='radio' name='vote' value='no' />No
    </form>

Answer 1

保持简单;请勿使用onclick，并且发布的代码不需要submitFunction 这应该工作：
的 See it in action at jsFiddle

<script type="text/javascript" >
    $("input.liveRadio1").click (function () {
        var jThis       = $(this);
        var hiddenValue = jThis.siblings ('input[name="hidden_value"]').val ();
        var vote        = jThis.val ();
        var dataString  = 'vote=' + vote + 'hiddenValue=' + hiddenValue;

        alert(dataString);
    });
</script>

<form action="post"  name="form1" >
    <input type=hidden name='hidden_value' value='12345'>
    <input class="liveRadio1" type='radio' name='vote' value='yes'>Yes <br/>
    <input class="liveRadio1" type='radio' name='vote' value='no'>No
</form>

---

修订问题的补充答案：

代码在独立文件中不起作用，因为jQuery和DOM不允许有足够的时间进行初始化。

执行此操作的标准方法是使用ready事件。像这样：

<script type="text/javascript">
    function jQueryMain ()
    {
        $("input.liveRadio1").click(function() {
            var jThis       = $(this);
            var hiddenValue = jThis.siblings('input[name="hidden_value"]').val();
            var vote        = jThis.val();
            var dataString  = 'vote= ' + vote + ', hiddenValue= ' + hiddenValue;

            alert(dataString);
        });
    }

    $(document).ready (jQueryMain);
</script>

Answer 2

您不必在

中传递form1

onclick='submitFunction(form1)';

因为您在提交中访问它。虽然我认为在其他函数中使用该函数可能会搞砸了，因为当您单击单选按钮时没有按下提交，因此submitFunction中的函数将永远不会触发。

Answer 3

问题是你创建函数的方式，正确的应该是

<script type="text/javascript" >
    function submitFunction(formname) {
        $('#' + formname).submit();
    }
</script>

<form action="post" id="form1" >
    <input type=hidden name='hidden_value' value='12345'>
    <input type='radio' name='vote' value='yes' onclick='submitFunction('form1')';>Yes <br/>
    <input type='radio' name='vote' value='no' onclick='submitFunction('form1')';>No
</form>