Question

我在锚标签中使用onclick事件。当我clcik锚时，我正在调用一个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();
    }
}

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

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

1 个答案: