Display Selected Option from Radio Button at Product Page

Solved
Highlighted

Hi There, 

 

I am trying to progress in my learning of theme customization and stopped on this case.

For sure a very basic question for the experts 

 

I put this code  in my product page :

<form action="#" method="post" class="demoForm" id="transForm">

<fieldset>

 

<legend>Select Modal</legend>
<p>Select your favorite mode of transportation:</p>
<p>
<label>Car: <input type="radio" name="trans" value="car" /></label>
<label>Bike: <input type="radio" name="trans" value="bike" checked /></label>
<label>Bus: <input type="radio" name="trans" value="bus" /></label>
<label>Walk: <input type="radio" name="trans" value="walk" /></label>
</p>
</fieldset>
</form>

 

Then I need to manipulate the selected option and after some logic define the value of  a Section property from the theme 

I also would like to Display the Selected option in the product page just bellow the buttons.

 

Thanks in advance anyone that could contribute.

Best REgards 

 

 

William Alencar
GoodFy Brasil
0 Likes
Highlighted

Success.

Shopify Partner
297 56 71

Hello @GoodFy_Brasil,

 

Add this below your radio button code
<p id="lbltrans"></p>
 
Add this at the bottom of the same file
<script>
  
      $(document).ready(function(){
          $("input[type='radio']").click(function(){
                var radioValue = $("input[name='trans']:checked"). val();
                if(radioValue){
                  $('#lbltrans').html(radioValue);
                }
                });
}); 
  
</script>
 
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: wahabahmadghori@gmail.com

 

1 Like
Highlighted

@Wahab_Ahmad wrote:

Hello @GoodFy_Brasil,

 

Add this below your radio button code
<p id="lbltrans"></p>
 
Add this at the bottom of the same file
<script>
  
      $(document).ready(function(){
          $("input[type='radio']").click(function(){
                var radioValue = $("input[name='trans']:checked"). val();
                if(radioValue){
                  $('#lbltrans').html(radioValue);
                }
                });
}); 
  
</script>
 
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: wahabahmadghori@gmail.com

 


Hey @Wahab_Ahmad  thank you so much per reply ...

I understood that give an id to the paragraph allowed to work into the Javascript code ... but sorry for my so dummy level ...but

How can I display the selected value just below the Radio buttons ?

I have tried {{ document.getElementbyId('lblTrans') }} but the syntax still are not correct 

Thank you one more time

William Alencar
GoodFy Brasil
0 Likes