How can i update <commandbutton> param with JavaScript?

Question

I need to update from prompt 1 param in , but i get all the time a a JavaScript error "Cannot set property 'value'".

I need to set the "rejectReason" param to what the user has written in prompt and them to submit the action.

So Here's the code please help me to assign the variable to the param

<apex:form>
    <apex:commandButton action="{!processRejectButton}" onclick="rejectCandidate();" oncomplete="return location.reload();" value="Reject Candidate" id="theCommandLink">
      <apex:param name="approveId" assignTo="{!approveId}" value="{!c.con.ID}"/>
      <apex:param name="rejectReason" assignTo="{!rejectReason}" value="text" id="rejectReason"/>
   </apex:commandButton>
</apex:form>

<script>
    function rejectCandidate(){
      var missing = prompt("Enter reject reason details", "aaaa");

        if (missing != null && missing != "") {
           document.getElementById('{!$Component.rejectReason}').value = missing;
        }else{  
           alert("Please enter missing info details");
        }
   }    
</script>

Answer 1

You're half right here.

What you'll need to do is take the <apex:param> markup outside of the <apex:commandButton>. The button should then only call a JavaScript method, passing in the Id of the Contact(?). It shouldn't have an action:

<apex:commandButton onclick="rejectCandidate({!c.con.ID});" value="Reject Candidate" id="theCommandLink" />

Your rejectCandidate() method is fine as is, however it should do one more thing which is call a <apex:actionFunction> that passes in the parameters to the controller.

For example:

<script>
  function rejectCandidate(contactId){
    var missing = prompt("Enter reject reason details", "aaaa");

    if (missing != null && missing != "") {
       document.getElementById('{!$Component.rejectReason}').value = missing;
    }else{  
       alert("Please enter missing info details");
    }

    doRejectCandidate(
      missing,
      contactId
    );
  }
</script>

Alls we've really done to your JavaScript is add the latter part: something that calls doRejectCandidate() and passes in two String values (missing and contactId). "missing" is generated from the function you've already written, "contactId" is passed in from the button.

Finally, you'll just need to have an <apex:actionFunction> with the name doRejectCandidate that then assigns the parameters and calls the action you initially set in your button.

<apex:actionFunction name="doRejectCandidate" action="{!processRejectButton}">
      <apex:param name="missing" value="" />
      <apex:param name="contactId" value="" />
  </apex:actionFunction>

This will pass to the controller as a GET request, meaning you can then access the values of missing and contactId in your processRejectButton() method as below:

String missing = Apexpages.currentPage().getParameters().get('missing');
String contactId = Apexpages.currentPage().getParameters().get('contactId');

Answer 2

You can use apex:actionfunction with parameter

<apex:commandButton onclick="rejectCandidate('{!c.con.ID}'); return false;" oncomplete="return location.reload();" value="Reject Candidate" id="theCommandLink" />
<apex:actionFunction action="{!processRejectButton}" name="processRejection" >
    <apex:param name="approveId" assignTo="{!approveId}" value=""/>
    <apex:param name="rejectReason" assignTo="{!rejectReason}" value="" id="rejectReason"/>
</apex:actionFunction>

<script>
    function rejectCandidate(var conId){
      var missing = prompt("Enter reject reason details", "aaaa");

        if (missing != null && missing != "") {
             processRejection(conId, missing);
        }else{  
             alert("Please enter missing info details");
        }
   }    
</script>

Answer 3

For these kind of need we can use <apex:actionFunction/>.

<apex:form>
    <apex:commandbutton value="Reject Candidate" id="theCommandLink" onclick="return rejectCandidate('{!c.con.ID}');"/>
    <apex:actionfunction name="rejectCandidateAction" action="{!processRejectButton}" oncomplete="return location.reload();" >
      <apex:param name="approveId" assignTo="{!approveId}" value="{!c.con.ID}"/>
      <apex:param name="rejectReason" assignTo="{!rejectReason}" value="text" id="rejectReason"/>
   </apex:commandButton>
</apex:form>

<script>
    function rejectCandidate(conId){
      var missing = prompt("Enter reject reason details", "aaaa");

        if (missing != null && missing != "") {
           rejectCandidateAction(conId,'missing'); // because you have defined two params
        }else{  
           alert("Please enter missing info details");
        }
        return false; // prevent page reload by button
   }    
</script>

So, here the recommendation is to understand <apex:actionfunction/>. I used actionFunction name attribute to call it via Javascript.