Question

I’m not able to submit a form with 3 hidden inputs using JQuery and AJAX.

Here’s my javascript function:

  createTdisLabel=function(formid){
        document.forms['TDISLabelForm'].label.value = document.forms['acknowledgeForm'].label.value;
        var url = '<%=request.getContextPath()%>'+"/createLabelTDIS.do";
        var data=$(formid).serialize(true);
        new Ajax.Request(url,{method:'post', parameters:data,onSuccess:function(data){
            $("#createLabel").html(data.label);
        }});
    };

   function submitTDISform()
    {
      document.TDISLabelForm<%=segmentID%>.submit();
    }

Here are the hidden form and the main form:

   <form name="TDISLabelForm" id="TDISLabelForm<%=segmentID%>" method='POST' onsubmit="createTdisLabel('TDISLabelForm<%=segmentID%>');" action="javascript:void(0);">
        <input type="hidden" id="labNum" name="lab_no" value="<%=lab_no%>">
        <input type="hidden" id="accNum" name="accessionNum" value="<%=accessionNum%>">
        <input type="hidden" id="label" name="label" value="<%=label%>">
    </form>

    <form name="acknowledgeForm" id="acknowledgeForm_<%=segmentID%>" onsubmit="updateStatus('acknowledgeForm_<%=segmentID%>');" method="post" action="javascript:void(0);">

        <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
            <tr> <td>
             <input type="text" id="label" name="label" value="<%=label%>"/>
             <input type="button" id="createLabel"  value="Create" onClick="submitTDISform();">
              </td></tr> </table> </form>

When I click on the Create button in “acknowledgeForm”, “TDISLabelForm” is not getting submitted. I opened Firebug and see no call of the JavaScript function at all. What am I doing wrong?

Answer 1

My guess is you may have not included the javascript file in your html page. That is why it is not able to see the function. Also, since you are using jquery, i think it is better to use it also for event handling

 $("#createLabel").click(your_javascript_function());