如何在onclick期间动态更改表单值并提交答案

【问题标题】：How to change a form value dynamically and submit during onclick如何在onclick期间动态更改表单值并提交
【发布时间】：2012-11-04 07:21:01
【问题描述】：

我在锚标记中使用 onclick 事件。当我单击锚点时，我正在调用一个 java 脚本函数，在该函数中更改一个输入元素的值并提交表单。该值已更改，但表单未提交该值。请帮助我。仅供参考，如果我创建一个元素并在提交之前添加到表单中，它就可以工作。为什么在第一种情况下不起作用。

<form name="form" >    
    <input type="hidden" name="input" value="test"/>    
    <a onclick='testMethod("test")'>click </a>    
</form>

使用的脚本是

function testMethod(value)
{
    if(serviceName != null && jQuery('#form') != null)
    {
        document.forms['form'].getElementById('input').value = value;
        document.forms['form'].action = jQuery('#newAction').val();
        document.forms['form'].submit();
    }
}

【问题讨论】：

发布一些代码。会更容易解决
使用alert检查input的值是多少
输入设置正确。但是，不提交。但是，如果我创建一个元素并将其附加到表单中，我将在控制器中获取数据。这种情况有什么限制吗？
jQuery('#form') 永远不会为空 - 但它可能为空。
@sridhar 你的意思是当你打电话给testMethod时页面没有被提交？

标签： java javascript html jakarta-ee

【解决方案1】：

这里的主要问题是你试图通过 id 访问输入，而它没有一组：

（在表单中添加了id，在输入中添加了id，以便我们轻松选择它们）：

<form name="form" id="form">
    <input type="hidden" name="input" id="input" value="test" />
    <a onclick='testMethod("test")' >click</a>
</form>

以及要匹配的 javascript（更新为使用 jQuery 的选择器，因为您表明您有 jQuery 支持可用）：

function testMethod(value)
{
    var form = $('#form');
    if(serviceName != null && form.length)
    {
        $('#input').val(value);
        form.attr('action', $('#newAction').val());
        form.submit();
    }
}

您还可以更新您的代码，这样您就不会在 DOM 中包含与 onclick 方法的绑定，而是直接在 javascript 中附加到它：

将 a 元素更改为具有 ID：

<form name="form" id="form">
    <input type="hidden" name="input" id="input" value="test" />
    <a id="submitLink">click</a>
</form>

javascript 现在看起来像这样：

$(document).ready(function() {
    $('#submitLink').on('click', function(event) {
        event.preventDefault();
        var form = $('#form');
        if(serviceName != null && form.length)
        {
            $('#input').val(value);
            form.attr('action', $('#newAction').val());
            form.submit();
        } 
    });
});

【讨论】：