Dynamic fields using PHP Form Builder Class

Question

I am using a PHP form Builder class v3.1 http://code.google.com/p/php-form-builder-class/

I am trying to create a dynamic form

$options = array("Amount", "Reset Password");
$form->addElement(new Element\Radio("Command Type to Employee : ", "type", $options));

$form->addElement(new Element\TextBox("Amount :", "amount"));
$form->addElement(new Element\TextBox("New Password:", "password"));

when I select the "Amount" radio button the "amount" text field should show and

when I select the "Reset password" radio button the "password" text field should show.

Can anyone kindly help me regarding with it. Thanks in advance.

Divey · Accepted Answer · 2013-02-18 16:38:32Z

1

If you have jquery setup for your project, you can use the following in a view script after you render your form. This is untested, but it should work.

<?php 
    // ... setup $form
    $form->render();
?>
<script>
$(function(){
    var amountElements = $('input[name=amount]').prev('label').andSelf();
    var passwordElements = $('input[name=password]').prev('label').andSelf();
    $('input[name=type]').change(function() {
        if ($(this).val() == 'Reset Password') {
            amountElements.hide();
            passwordElements.show();
        } else {
            amountElements.show();
            passwordElements.hide();
        }
    });

    // trigger the event for the selected radio button
    $('input[name=type]:checked').change();
});
</script>

edited Feb 18, 2013 at 16:38

answered Feb 15, 2013 at 19:12

Divey

1,7291 gold badge13 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Divey Over a year ago

Whoops. I updated my answer to use the value 'Reset Password' instead of 'Password', so you can try that and let me know if it works. Also, do you have jquery setup for your project? If my updated code doesn't work, it might be useful for you to edit your question to include the markup that is created when you render the form.

Divey Over a year ago

Thanks for posting the html. It would be best if you edited your original post to include the html (excluding the javascript that I suggested) and then remove the answer that you posted below. I updated my answer again to account for your markup. Try it and see.

Bishu · Accepted Answer · 2013-02-17 02:09:30Z

HI Divey the generated html code is as follows -

<style type="text/css">label span.required { color: #B94A48; }span.help-inline, span.help-block { color: #888; font-size: .9em; font-style: italic; }</style><form action="employeetransaction.php" id="vertical" method="post" class="ewForm"><label for="vertical-element-0"></label><input type="hidden" name="form" value="vertical" id="vertical-element-0"/><label for="vertical-element-1"></label><input type="hidden" name="empno" value="1007" id="vertical-element-1"/><label for="vertical-element-2"></label><BR><label for="vertical-element-3"></label><BR><label for="vertical-element-4">
    Command Type to Employee : </label><label class="radio"> <input id="vertical-element-4-0" type="radio" name="type" value="Amount" checked="checked"/> 
    Loan Approval </label> <label class="radio"> <input id="vertical-element-4-1" type="radio" name="type" value="Reset Password"/> 
    Reset Password </label> <label for="vertical-element-5"></label><BR><label for="vertical-element-6"></label><BR><label for="vertical-element-7">
    Amount :</label><input type="text" name="amount" id="vertical-element-7"/><label for="vertical-element-8">Password 
    :</label><input type="text" name="password" id="vertical-element-8"/><div class="form-actions"><input type="submit" value="Submit" name class="btn btn-primary" id="vertical-element-9"/> <input type="button" value="Cancel" name onclick="history.go(-1);" class="btn" id="vertical-element-10"/></div></form><script type="text/javascript">jQuery(document).ready(function() {      jQuery("#vertical").bind("submit", function() { 
            jQuery(this).find("input[type=submit]").attr("disabled", "disabled"); 
        });jQuery("#vertical :input:visible:enabled:first").focus();}); </script><script>
$(function(){
    $('input[name=type]').change(function() {
        if ($(this).val() == 'Reset Password') {
            $('input[name=amount]').closest('.control-group').hide();
            $('input[name=password]').closest('.control-group').show();
        } else {
            $('input[name=amount]').closest('.control-group').show();
            $('input[name=password]').closest('.control-group').hide();
        }
    });

    // trigger the event for the selected radio button
    $('input[name=type]:checked').change();
});
</script>

Collectives™ on Stack Overflow

Dynamic fields using PHP Form Builder Class

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related