2

I'm working on creating a custom checkbox with an event

<div class="field tcagreecreateaccount required">
    <div class="control">
        <input type="checkbox" id="tcagreecreateaccount" name="tcagreecreateaccount" data-validate="{required:false}" class="input-checkbox checkbox required" value="1">
        <label for="tcagreecreateaccount" class="label">
            <?= __('Custom checkbox') ?>
        </label>
    </div>
</div>

1)when the checkbox is ticked need to show extra two fields in customer registration

2)How I change the checkbox as optional one

How I can do it ???
Any ideas?

Edit 1:

addtional.phtml

<div id="idofyourinputwrapper">
    <div class="field skype required">
        <label class="label" for="skype2">
            <span><?= $block->escapeHtml(__('Check now')) ?></span>
        </label>
        <div class="control">
            <input type="text" name="skype2" id="skype22" value="" title="<?= $block->escapeHtmlAttr(__('Check now')) ?>" class="input-text" data-validate="{required:false}">
        </div>
    </div>

</div>
1

Try this,

Replace this

<div class="field tcagreecreateaccount required">
<div class="control">
    <input type="checkbox" id="tcagreecreateaccount" name="tcagreecreateaccount" data-validate="{required:false}" class="input-checkbox checkbox required" value="1">
    <label for="tcagreecreateaccount" class="label">
        <?= __('Custom checkbox') ?>
    </label>
</div>
</div>

with this

<div class="field tcagreecreateaccount">
<div class="control">
    <input type="checkbox" id="tcagreecreateaccount" name="tcagreecreateaccount" class="input-checkbox checkbox" value="1">
    <label for="tcagreecreateaccount" class="label">
        <?= __('Custom checkbox') ?>
    </label>
</div>
</div>

then add the below script in your phtml

require(['jquery'],function($) {
$(document).ready(function () {
var ckbox = $('#tcagreecreateaccount');
$('#tcagreecreateaccount').on('click',function () {
    if (ckbox.is(':checked')) {
        $('#idofyourinputwrapper').show(); //idofyourinputwrapper is your input wrapper
    } else {
        $('#idofyourinputwrapper').hide();
    }
});
});
});

wrap your two inputs with a div like below.

<div id="idofyourinputwrapper">

Hope this helps :)

  • i tried but not event working.... – prabhakaran7 Mar 16 at 7:57
  • Event?? what that mean? The above code do, remove required field and when you click checkbox it will show and hide the below field. Please update your code – Prathap Gunasekaran Mar 16 at 8:00
  • i added this not working <div id="idofyourinputwrapper"> <div class="field skype required"> <label class="label" for="skype2"> <span><?= $block->escapeHtml(__('Check now')) ?></span> </label> <div class="control"> <input type="text" name="skype2" id="skype22" value="" title="<?= $block->escapeHtmlAttr(__('Check now')) ?>" class="input-text" data-validate="{required:false}"> </div> </div> </div> – prabhakaran7 Mar 16 at 8:05
  • i set is required:false – prabhakaran7 Mar 16 at 8:06
  • Have you added script ?? – Prathap Gunasekaran Mar 16 at 8:07
0

Firstly remove required from your checkbox and other two attributes.

Both attributes depending on checkbox click will be hidden by default (can do with CSS or JS).

On checkbox click, you can use jQuery to display both attributes.

  • done......................... – prabhakaran7 Mar 16 at 10:41

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.