Question

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

Answer 1

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