Display textbox when checkbox checked (options)

Hi,

I use opencart 2.3.0.2 and I want to display textbox only when I check the checkbox for all my products.

Thank you for help :)

Hello Viotax

on product page when checkbox tick it will display the textbox then what is next .

Thanks

sachin

sachin6609 wrote: ↑

Tue Aug 22, 2017 9:10 pm

Hello Viotax

on product page when checkbox tick it will display the textbox then what is next .

Thanks

sachin

Hi sachin,

For example when you tick name's checkbox, one textbox appears for write name on it.

You understand now ?

Thank you

But I don't know what file I need to edit..
I think is product.tpl but I'm not sure.
I need help

I need exactly that when
- Name's checkbox (option 8, value 31) ticked, name's textbox (option 11) appears.
- Number's checkbox (option 8, value 32) ticked, number's textbox (option 12) appears.

Someone can help me ?

Thank you so much !

Hi,
You can do it with jquery:


Demo:
https://jsfiddle.net/sabeti05/rzshasbz/

DigitCart wrote: ↑

Wed Aug 23, 2017 12:06 pm

Hi,
You can do it with jquery:

Code: Select all

$(function(){
	var checkbox = '[name^="option[234]"][value="24"]';
	var textBox = '[name="option[236]"]';

	$(checkbox).on('change', function(){
		if($(this).is(':checked')){
			$(textBox).parent().show();
		} else {
			$(textBox).parent().hide();
		}
	});
	
	$(checkbox).trigger('change');
});

Demo:
https://jsfiddle.net/sabeti05/rzshasbz/

Hi,
I need to edit product.tpl? And when ?

Sorry I'm badly

Yes, add that code to the end of your product.tpl
inside an exiting script tag. or create a new script tag: You must change these numbers, according to your options:

DigitCart wrote: ↑

Wed Aug 23, 2017 5:51 pm

Yes, add that code to the end of your product.tpl
inside an exiting script tag. or create a new script tag:

Code: Select all

<script>
Here put the code
</script>

You must change these numbers, according to your options:

Code: Select all

var checkbox = '[name^="option[234]"][value="24"]';
var textBox = '[name="option[236]"]';

Thank you and for add another of this ? Because I need to make this :
I need exactly that when
- Name's checkbox (option 8, value 31) ticked, name's textbox (option 11) appears.
- Number's checkbox (option 8, value 32) ticked, number's textbox (option 12) appears.

Hi, Viotax10 can I ask you the reason that you want do this?

Can I apply this for all products ?

webcorvo wrote: ↑

Wed Aug 23, 2017 6:43 pm

Hi, Viotax10 can I ask you the reason that you want do this?

I like this design

Viotax10 wrote: ↑

Fri Aug 25, 2017 2:01 am

webcorvo wrote: ↑

Wed Aug 23, 2017 6:43 pm

Hi, Viotax10 can I ask you the reason that you want do this?

I like this design

ok

Hello,
This will work for all your products: Demo: https://jsfiddle.net/sabeti05/4dgt2bb1/

DigitCart wrote: ↑

Tue Aug 29, 2017 12:57 pm

Hello,
This will work for all your products:

Code: Select all

<script>
$(function(){
	
	$('#product .checkbox:contains(Name) input[type="checkbox"]').change(function(){
		if($(this).is(':checked')){
			$('#product input[placeholder="Name"]').parent().fadeIn();
		} else {
			$('#product input[placeholder="Name"]').parent().hide();
		}
	});
	
	$('#product .checkbox:contains(Number) input[type="checkbox"]').change(function(){
		if($(this).is(':checked')){
			$('#product input[placeholder="Number"]').parent().fadeIn();
		} else {
			$('#product input[placeholder="Number"]').parent().hide();
		}
	});
	
	$('#product input[type="checkbox"]').trigger('change');
});
</script>

Demo: https://jsfiddle.net/sabeti05/4dgt2bb1/

Thank you