Passing values from javascript to controller

Question

I am setting a value of hidden field in javascript which is fired on button click but when controller function is called hidden field value is not passed along as I expected.

Visual Force Page:

<script type="text/javascript">         
    function getName() {
        var fileInput = $('#idFileUpload');
        var fileName = fileInput.get(0).files[0].name;
        $('#hdnDocName').val(fileName);
        alert($('#hdnDocName').val());
        if ($('#hdnDocName').val() != '') {
            return true;
        }
        else
        {
            return false;
        }
    }
</script>
<apex:form id="upload-form">
    <apex:pageMessages />
    <br/>
    <apex:outputPanel rendered="{!accountID != ''}">
        <input id="hdnDocName" value="{!filename}" type="hidden" />
        Please select image: 
        <input id="idFileUpload" data-max-size="2097152" type="file" name="uploadfile" value="{!doc.body}" accept="image/x-png, image/gif, image/jpeg, image/jpg" />
        <br/><br/>
        <apex:commandButton value="Upload" onClick="if (getName() === false) { return false; }" action="{!SaveAttachment}"/>    
    </apex:outputPanel>
    <apex:outputPanel rendered="{!accountID == ''}">
        No valid account selected
    </apex:outputPanel>
</apex:form>

Controller:

public String filename { get; set; }
public Pagereference SaveAttachment()
{   
    System.Debug(filename); 
    return null;
}

debug statement returns null. How do I pass values?

Keith C · Accepted Answer · 2016-03-17 20:49:47Z

4

You are binding the filename field into the page when it is generated but you are not taking advantage of Visualforce's automatic binding of values back into the controller. To do so in this case you will need to use apex:inputHidden:

<apex:inputHidden id="hdnDocName" value="{!filename}"/>

As the id value gets prefixed in the generated HTML you can use jQuery's ends with selector syntax to match the element:

$("[id$='hdnDocName']").val(fileName);

answered Mar 17, 2016 at 20:49

Keith C

138k31 gold badges233 silver badges478 bronze badges

2

You took the words right out of my keyboard!

sfdcfox
– sfdcfox

2016-03-17 20:55:21 +00:00
Commented Mar 17, 2016 at 20:55
@sfdcfox Was reading some Angular 2 docs today so 2 way binding ("banana in a box" syntax now) is on my mind.

Keith C
– Keith C

2016-03-17 20:58:53 +00:00
Commented Mar 17, 2016 at 20:58

Add a comment |

raym0nd · Accepted Answer · 2016-03-17 21:03:12Z

Or you can do something like this

define an action Function that can take a param

 <apex:actionFunction action="{!SaveAttachment}"  name="SaveAttachment">
       <apex:param name="name" value=""/>
 </apex:actionFunction>

Then call it like this

 <apex:commandButton value="Upload" action="{!SaveAttachment}" >
      <apex:param name="name" value="{!inputValue}" assignTo="{!paramValue}"/>
</apex:commandButton>

or you can use an html button and call the action function like this

 <button type="button" onClick="SaveAttachment(passYourParamHere)"  />

In your controller you need to change your method to something like this

public Pagereference SaveAttachment()
{   
    string filename = Apexpages.currentPage().getParameters().get('name');
    //make sure to escape the string just in case ;)
    System.Debug(filename); 
    return null;
}

I don't think the ApexPages parameters are related to the apex:param; think you will need to get the value from the paramValue controller field. — Keith C
– Keith C, Commented Mar 17, 2016 at 21:11

Stack Exchange Network

Passing values from javascript to controller

2 Answers 2

You must log in to answer this question.

Hot Network Questions

Passing values from javascript to controller

2 Answers 2

You must log in to answer this question.

Related

Hot Network Questions