1

I have custom list with a field type of radio buttons with 4 choices. I want to be able to show a box on right hand side when each radio button is checked .How do i do that? So far i was able to target id of the input field

 $(document).ready(function() 
{

var x= document.getElementById('Site_x0020_Type_084a7e58-b428-4e43-98b6-2a7d10bc8941_$RadioButtonChoiceField0');
if(x.checked=true)

{
alert("done");

$(".ms-RadioText").append('<p>Test description</p>');
}    
});
</script> 

This Script adds the paragraph under the choice, but in all choices. I think that is because i am targetting the class which all of those elements share.

What do i do to display the box on right when choice is selected.

Thank You

0

here is my mark up taken from IE developer tool.First input control is checked as default in the form. enter image description here

0

Try this

I am assuming you want to show box as user click on any of the radio button having style set to ms-RadioText

$(document).ready(function(){
    $('body').append('<div id="box" style="width:10px;height:10px;border:1px solid red;display:none;"></div>');
        $('input[id^="Site_x0020_Type_084a7e58-b428-4e43-98b6-2a7d10bc8941_$RadioButtonChoiceField"]').click(function(){
        if($(this).is(':checked')){
            var pos = $(this).position();
            var width = $(this).outerWidth();

            //show the menu directly over the placeholder
            $("#box").css({
                position: "absolute",
                top: pos.top+3 + "px",
                left: (pos.left + 20) + "px"
            }).show();
        }         
    });
});
  • Thank You for the script Amal, but my form is not responding to if($(this).is(':checked')){ var pos = $(this).position(); var width = $(this).outerWidth(); //show the menu directly over the placeholder $("#box").css({ position: "absolute", top: pos.top+3 + "px", left: (pos.left + 20) + "px" }).show(); – allegro octopus Oct 29 '14 at 20:37
  • Which version of jQuery you are using? – Amal Hashim Oct 29 '14 at 20:41
  • version number is 1.11.2 – allegro octopus Oct 29 '14 at 20:44
  • Is there any JavaScript error on the console? Can you add few alert message and make sure the click event is firing? – Amal Hashim Oct 29 '14 at 20:58
  • Alert only fires off after $('.ms-RadioText').click(function(){ }); after i add if condition to check the checked value it does not respond. no jquery error. – allegro octopus Oct 29 '14 at 21:03
0

You can edit the NewForm in SharePoint Designer, and add an html select element. In this select, each option will correspond to one of your radio button choice. You will have to use jQuery to update your radio button choices. The soltion should resemble to the one that's described in this post: http://sharepointhowtwo.blogspot.com/2014/10/how-to-add-tooltip-to-sharepoint-choice_27.html.

Regards

  • i tried implementing it. it didnt work. – allegro octopus Oct 31 '14 at 17:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.