function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Richard Houston 20Richard Houston 20 

Javascript remoting - Use record value to set a radio button as checked

So I have this scenario working fine using HTML/Apex, but need to make it mobile friendly using javascript remoting.

There is a survey page with ~30 questions that are yes/no and write a number value. The requirement is that we ure radio buttons.

I've got the remote action to pull the value from the existing record and display it an <input type="number"> field.

However, how do I take that value, check to see if the number equals the value of the radio selector, then check the appropriate selector?

Ex: 
  
Do you like apples?

<input onchange="radioCheck()" id="ViaCBY" type="radio" name="ViaCB" value="8" ></input><label> Yes (8)</label>

​<input onchange="radioCheck()" id="ViaCBY" type="radio" name="ViaCB" value="0" ></input><label>No (0)</label>
If the stored value in the record is loaded with an 8, how do I load the page with 8 selected? And the inverse true as well?


Here's my current code:
Remote action in controller:
  
@RemoteAction
    global static Boolean setSurvey(
        String whId, String comments, Integer CompDistance, Integer ViaCB, Integer ViaBond) {

        // Get the warehouse record for the Id
        Pursuit_Survey__c PS = EvaluationEditor.getSurvey(whId);

        // Update fields
        // Note that we're not validating / sanitizing, for simplicity
        PS.Pursuit_Survey_Comments__c = comments.trim();
        PS.COMP_Distance__c = CompDistance;
        PS.Viability_Clark_Budget__c = ViaCB;
        PS.Viability_Bonding__c = ViaBond;

        // Save the updated record
        // This should be wrapped in an exception handler
        update PS;

        return true;
    }
}


Visualforce page script:
  
$(document).ready(function(){
        // Load the record
        loadWarehouse();
    });

    // Utility; parse out parameter by name from URL query string
    $.urlParam = function(name){
        var results = new RegExp('[\\?&]' + name + '=([^&#]*)')
            .exec(window.location.href);
        return results[1] || 0;
    }

    function loadWarehouse() {
        // Get the record Id from the GET query string
        SurveyId = $.urlParam('id');

        // Call the remote action to retrieve the record data
        Visualforce.remoting.Manager.invokeAction(
            '{!$RemoteAction.EvaluationEditor.getSurvey}',
            SurveyId,
            function(result, event){;
                if(event.status){
                    console.log("Your id value is " + SurveyId);
                    $('#comments').val(result.Pursuit_Survey_Comments__c);
                    $('#Survey_name').text(result.Name);
                    $('#Opportunity_name').text(result.Opportunity__r.Name);
                    $('#CompDistance').val(result.COMP_Distance__c);
                    $('#ViaCB').val(result.Viability_Clark_Budget__c);
                    $('#ViaBond').val(result.Viability_Bonding__c);
                    console.log("Your survey comments are: "+result.Pursuit_Survey_Comments__c);
                    
                } else if (event.type === 'exception'){
                    console.log(result);
                } else {
                    // unexpected problem...
                }
        });
    }
    
//    function defaluts(){
//        var x = 8;
//        $('input[name=ViaCB][value=' + x + ']').prop('checked',true);
//    }

Input fields:
  
<h4>Question</h4>
                <div class="form-control form-control-radio form-control-radio-thumbs span-50">
                    <input onchange="radioCheck()" id="ViaCBY" type="radio" name="ViaCB" value="8" ></input><label> Yes (8)</label>
                </div>
                <div class="form-control form-control-radio form-control-radio-thumbs span-50">
                    <input onchange="radioCheck()" id="ViaCBN" type="radio" name="ViaCB" value="0"></input><label > No (0)</label>
                </div>
                <div class="form-control form-control-radio form-control-radio-thumbs span-50">
                    <input onchange="radioCheck()" id="ViaCBY" type="radio" name="ViaCBC" value="2"></input><label> Yes (2)</label>
                </div>
                <div class="form-control form-control-radio form-control-radio-thumbs span-50">
                    <input onchange="radioCheck()" id="ViaCBN" type="radio" name="ViaCBC" value="0"></input><label > No (0)</label>
                </div>
            </div><!--.form-control-group-->


 
James LoghryJames Loghry
This actually ends up being more of a jQuery question than a Visualforce question.  You'll wantto use the value selector and set the appropriate radio button's "checked" attribute to "checked".  See the following example from Stack Overflow: http://stackoverflow.com/questions/4618733/set-selected-radio-from-radio-group-with-a-value.

Also note that you'll want to do the opposite for anything that you don't want checked.
greenberg methew 5greenberg methew 5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Get Selected Radio Butt (http://goo.gl/HBR5JL)on Value</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("input[type='button']").click(function(){
            var radioValue = $("input[name='gender']:checked").val();
            if(radioValue){
                alert("Your are a - " + radioValue);
            }
        });
        
    });
</script>
</head> 
<body>
    <h4>Please select your gender.</h4>
    <p> 
        <label><input type="radio" name="gender" value="male">Male</label> 
        <label><input type="radio" name="gender" value="female">Female</label>
    </p>
    <p><input type="button" value="Get Value"></p>
</body>
</html>