I am trying to pass a variable to the controller using action function and apex param. The outputtext value is being by a JS. I don't know if I need to anything different in that case, but the actionfunction is not being called and the passed parameter value is always null.

I am also confused about the function name defined in actionfunction.
Visualforce snippet:

​​​​​​  <apex:outputLabel >Installment 1 : $</apex:outputLabel><apex:outputLabel id="installment_calc1"></apex:outputLabel> <apex:outputLabel >12/1/2019 (FY20)</apex:outputLabel>
                  <apex:outputLabel >Installment 2 : $</apex:outputLabel><apex:outputLabel id="installment_calc2" ></apex:outputLabel>
                  <apex:outputLabel >Installment 3 : $</apex:outputLabel><apex:outputLabel id="installment_calc3" ></apex:outputLabel>
                  <apex:outputLabel >Installment 4 : $</apex:outputLabel><apex:outputLabel id="installment_calc4" ></apex:outputLabel>
                  <apex:outputLabel >Total Amount : $</apex:outputLabel><apex:outputText value="{!total_calc}" id="total_calc"/>
                  
                      <apex:actionFunction name="save" action="{!save}" reRender="none" >
                                <apex:param name="totalamt" assignTo="{!total_calc}" value="{!total_calc}"></apex:param>
                   </apex:actionFunction> 
 <div>
                        
                            <apex:commandButton action="{!save}" value="Submit" onclick="save()"/>   
                      
                </div>

Apex controller snippet:
 public string total_calc{get;set;}
 public PageReference save()
    {
        try
        {
         
          total_calc = System.currentPageReference().getParameters().get('totalamt');
       
            System.debug('totalcalchidden...' +  total_calc);
     }
}

Do I have to define the actionfunction save like this?

function save() {
       alert('hi');
      
}
is that why it is not being called? In the examples I have seen so far, I have not seen this done.