如何在onclick中动态更改表单值并提交 [英] How to change a form value dynamically and submit during onclick

问题描述

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

 < form name =form> 
< input type =hiddenname =inputvalue =test/> 
< a onclick ='testMethod（test）'>点击< / 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（）; 
} 
} 
  

解决方案

这里的主要问题是你试图通过ID访问输入，当它没有一个集合：

（已添加 id 来形成， id 来输入，所以我们可以很容易地选择它们）：

 < form name =formid =form> 
< input type =hiddenname =inputid =inputvalue =test/> 
< a onclick ='testMethod（test）'>点击< / a> 
< / form> 
  

和javascript匹配（自从您指出您有jQuery支持后，更新为使用jQuery的选择器）：

pre $ function testMethod（value）
{
var form = $（'＃form'）;
if（serviceName！= null&& form.length）
{
$（'＃input'）。val（value）;
form.attr（'action'，$（'＃newAction'）。val（））;
form.submit（）;




$ b你也可以更新你的代码，包括绑定到DOM中的onclick方法，但直接附加到JavaScript：

更改 a 元素有一个ID：

 < form name =formid =form> 
< input type =hiddenname =inputid =inputvalue =test/> 
< a id =submitLink>点击< / a> 
< / form> 
  

现在，javascript可能如下所示：

< $（$'code> $（document）.ready（function（）{
$（'＃submitLink'）。on（'click'，function（event）{
event如果（serviceName！= null&& form.length）
{
$（'）;
var form = $（'＃form'）;
（输入'）.val（value）;
form.attr（'action'，$（'＃newAction'）。val（））;
form.submit（）;
}
}）;
}）;


I am using onclick event in anchor tag. when i clcik the anchor, I am invoking a java script function where I change the value of one input element and submit the form. The value is changed but the form does not submit the value. Please help me on this. FYI that if i create an element and add in the form before submission, it works. Why is not working in the first scenario.

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

script used is

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

解决方案

The main problem here is you're trying to access the input by id when it doesn't have one set:

(Added id to form and id to input so we can select them easily):

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

And the javascript to match (updating to use jQuery's selectors since you indicated you have jQuery support available):

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

You can also update your code such that you aren't including the binding to the onclick method in the DOM, but attaching to it directly in javascript:

Changing the a element to have an ID:

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

The javascript could now look like this:

$(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中动态更改表单值并提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！