The actionfunction is giving trouble, console error says "Uncaught TypeError: undefined is not a function"

Question

Page Component:-

<script language="javascript" type="text/javascript" >
  function fun(){
  var fst = document.getElementById("payments-firstname").value;
  var lst = document.getElementById("payments-lastname").value;
  alert(fst);
  alert(lst);
  click(fst,lst); 
 }


    </script>
    <apex:form>

    <apex:actionFunction name="click" action="{!onSubmit}" reRender="pg" > 
    <apex:param name="fst" assignTo="{!firstname}" value="" /> 
    <apex:param name="lst" assignTo="{!lastname}" value="" />
    </apex:actionFunction> 

    <input type="text" class="text-field text-field-large" placeholder="First name" id="payments-firstname" name="payments-firstname" data-popover-offset="5,5" required ="true"/>

    <input type="text" class="text-field text-field-large" placeholder="Last name" id="payments-lastname" name="payments-lastname" data-popover-offset="5,5" required ="true"/>

    <button type="button" class="btn btn-primary tertiary-btn large" id="billing-payment-submit" data-nextSectionId="review-order" onclick="fun()" >Review Order</button> 

    </apex:form>

I have to use html tags instead of apex:input, now using javascript, I am trying to call controller method and pass the page parameters but it is not calling the method instead giving error below

"Uncaught TypeError: undefined is not a function"

i am able to achieve this using Javascript remoting but want to use actionfunction instead.

Please help Thanks!

Answer 1

I think this might help you.

Give value to button attribue onclick="onSubmit()". You should call <actionfunction> action on onclick of button.

Replace with below line

<button type="button" class="btn btn-primary tertiary-btn large" id="billing-payment-submit" data-nextSectionId="review-order" onclick="onSubmit()" >Review Order</button>

Please accept the answer if it is helpful.