Bootstrap Panel Body Left and Right - php

I want create panel-body bootstrap left and right
here my code
<div class="panel-body">
<p>1. Fill Full Name</p>
<p> Example</p>
<label for="name" class="col-sm-1 control-label">Full Name<span class="important">*</span></label>
<div class="col-sm-3">
<input type="text" class="form-control" id="name" name="name" size="40" maxlength="50" disabled="disabled"
value="Full Name" required>
<div class="help-block with-errors"></div>
</div>
</div>
<!-- Phone Ext -->
<div class="panel-body">
<p>2. Fill Phone Extention</p>
<p> Extention</p>
<label for="name" class="col-sm-1 control-label">Phone Extention<span class="important">*</span></label>
<div class="col-sm-3">
<input type="text" class="form-control" id="name" name="name" size="40" maxlength="50" disabled="disabled"
value="Phone Extention" required>
<div class="help-block with-errors"></div>
</div>
</div>
and number 3 I want it in Right side
Thanks a lot for your help


You could split the column like this :
<div class="panel-body">
<div class="col-md-6">
<p>1. Fill Full Name</p>
<p> Example</p>
<label for="name" class="col-sm-2 control-label">Full Name<span class="important">*</span></label>
<div class="col-sm-6">
<input type="text" class="form-control" id="name" name="name" size="40" maxlength="50" disabled="disabled"
value="Full Name" required>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<p>3. Title #3</p>
<p> Content for #3</p>
<label for="name" class="col-sm-2 control-label">Label #3<span class="important">*</span></label>
<div class="col-sm-6">
<input type="text" class="form-control" id="name" name="name" size="40" maxlength="50" disabled="disabled"
value="Label #3" required>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<!-- Phone Ext -->
<div class="panel-body">
<p>2. Fill Phone Extention</p>
<p> Extention</p>
<label for="name" class="col-sm-1 control-label">Phone Extention<span class="important">*</span></label>
<div class="col-sm-3">
<input type="text" class="form-control" id="name" name="name" size="40" maxlength="50" disabled="disabled"
value="Phone Extention" required>
<div class="help-block with-errors"></div>
</div>
</div>

Related

Pop up contact form disappears when clicking the submit button

The form is based on bootstrap here is the code:
When i try to validate the submition of the for using this very simple code.
Then the form just disappears. Any insights guys would be greatly appreciated.
Thanks
New gal to coding.
<div class="container">
<div class="row">
<div class="col-sm-12 contact-form">
<form id="contact" method="post" class="form" role="form">
<div class="row">
<div class="col-xs-6 col-md-6 form-group">
<input class="form-control" id="name" name="name" placeholder="FIRST NAME" type="text" required autofocus />
</div>
<div class="col-xs-6 col-md-6 form-group">
<input class="form-control" id="name" name="lastname" placeholder="LAST NAME" type="text" required
autofocus />
</div>
<div class="col-xs-6 col-md-6 form-group">
<input class="form-control" id="email" name="email" placeholder="EMAIL" type="email" required />
</div>
<div class="col-xs-6 col-md-6 form-group">
<input class="form-control" id="name" name="phone" placeholder="PHONE" type="text" required autofocus />
</div>
<div class="col-xs-6 col-md-6 form-group">
<input class="form-control" id="name" name="address1" placeholder="ADDRESS 1" type="text" required
autofocus />
</div>
<div class="col-xs-6 col-md-6 form-group">
<input class="form-control" id="name" name="address2" placeholder="ADDRESS 2" type="text" required
autofocus />
</div>
<div class="col-xs-6 col-md-6 form-group">
<input class="form-control" id="name" name="city" placeholder="CITY" type="text" required autofocus />
</div>
<div class="col-xs-3 col-md-3 form-group">
<input class="form-control" id="name" name="state" placeholder="STATE" type="text" required autofocus />
</div>
<div class="col-xs-3 col-md-3 form-group">
<input class="form-control" id="name" name="zipcode" placeholder="ZIPCODE" type="text" required autofocus />
</div>
<h1 class="h1-contact">WHAT SERVICES ARE YOU INTERESTED IN?</h1>
</div>
<div class="row">
<div class="col-sm-6">
<h3>SELECT ALL THAT APPLY:</h3>
<label class="checkbtn">item 1
<input type="checkbox" checked="checked" name="item5" value="item5">
<span class="checkmark"></span>
</label>
<label class="checkbtn"> item 2
<input type="checkbox" name="item4" id="item4">
<span class="checkmark"></span>
</label>
<label class="checkbtn">item 3
<input type="checkbox" name="item3" id="item3">
<span class="checkmark"></span>
</label>
<label class="checkbtn">item 4
<input type="checkbox" name="item2" id="item2">
<span class="checkmark"></span>
</label>
<label class="checkbtn">item 5
<input type="checkbox" name="example1">
<span class="checkmark"></span>

PHP Mustache - multiple partials

I found this fiddle that shows how to include multiple partials in a Mustache template: http://jsfiddle.net/YW5zF/3/
I'm trying to convert this to PHP Mustache and having some difficulty. Can anyone help out here?
Essentially, I'm trying to understand how to reuse the input template several times in one template.
Here's my main template (contact.mustache):
<form id="contact-form" method="post" action="contact.php" role="form">
<div class="messages"></div>
<div class="controls">
<div class="row">
<div class="col-md-6">
{{>input}}
</div>
<div class="col-md-6">
{{>input}}
</div>
</div>
<div class="row">
<div class="col-md-6">
{{>input}}
</div>
<div class="col-md-6">
{{>input}}
</div>
</div>
<div class="row">
<div class="col-md-12">
{{>textarea}}
</div>
<div class="col-md-12">
<input type="submit" class="btn btn-success btn-send" value="Send message">
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="text-muted"><strong>*</strong> These fields are required.</p>
</div>
</div>
</div>
</form>
Here's my input partial (input.mustache):
{{#input}}
<div class="{{div_class}}">
<label class="{{label_class}}" for="{{id}}">{{text}}</label>
<input type="{{type}}" id="{{id}}" name="{{name}}" class="{{input_class}}" placeholder="{{placeholder}}" {{required}} data-error="{{data-error}}">
<div class="{{line_class}}"></div>
</div>
{{/input}}
Here's my textarea template (textarea.mustache)
{{#textarea}}
<div class="{{div_class}}">
<label class="{{label_class}}" for="{{id}}">{{text}}</label>
<textarea id="{{id}}" name="{{name}}" class="{{input_class}}" placeholder="{{placeholder}}" rows="{{rows}}" {{required}} data-error="{{data-error}}"></textarea>
<div class="{{line_class}}"></div>
</div>
{{/textarea}}
Here's my PHP code to try to render it:
<?php
require_once __DIR__ . '/vendor/autoload.php';
$m = new Mustache_Engine;
$data = array(
0 =>array(
"div_class"=>"form-group",
"id"=>"form_name",
"type"=>"text",
"name"=>"name",
"placeholder"=> "Please enter your firstname *",
"required"=>"required='required'"
"data-error"=>"Firstname is required.",
"input_class"=>"form-control",
"label_class"=>"floating-label",
"text"=>"Firstname *",
"line_class"=>"line-ripple",
),
1=> array(
"div_class"=>"form-group",
"id"=>"form_lastname",
"type"=>"text",
"name"=>"surname",
"placeholder"=> "Please enter your lastname *",
"required"=>"required='required'"
"data-error"=>"Lastname is required.",
"input_class"=>"form-control",
"label_class"=>"floating-label",
"text"=>"Lastname *",
"line_class"=>"line-ripple",
),
2 =>array(
"div_class"=>"form-group",
"id"=>"form_email",
"type"=>"email",
"name"=>"email",
"placeholder"=> "Please enter your email *",
"required"=>"required='required'"
"data-error"=>"Valid email is required.",
"input_class"=>"form-control",
"label_class"=>"floating-label",
"text"=>"Email *",
"line_class"=>"line-ripple",
),
3 =>array(
"div_class"=>"form-group",
"id"=>"form_phone",
"type"=>"tel",
"name"=>"phone",
"placeholder"=> "Please enter your phone",
"input_class"=>"form-control",
"label_class"=>"floating-label",
"text"=>"Phone",
"line_class"=>"line-ripple",
),
4 =>array(
"div_class"=>"form-group",
"id"=>"form_message",
"name"=>"message",
"placeholder"=> "Message for me *",
"required"=>"required='required'"
"data-error"=>"Please,leave us a message.",
"input_class"=>"form-control",
"label_class"=>"floating-label",
"rows"=>4,
"text"=>"Message *",
"line_class"=>"line-ripple",
)
);
// main templates in the /views folder, partials in the /views/partials folder
$m = new Mustache_Engine(array(
'loader' => new Mustache_Loader_FilesystemLoader(dirname(__FILE__) . '/views'),
'partials_loader' => new Mustache_Loader_FilesystemLoader(dirname(__FILE__) . '/views/partials'),
));
// loads template from `views/contact.mustache` and renders it.
echo $m->render("contact", $data);
Current results of this script is:
<form id="contact-form" method="post" action="contact.php" role="form">
<div class="messages"></div>
<div class="controls">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="floating-label" for="form_name">Firstname *</label>
<input type="text" id="form_name" name="name" class="form-control" placeholder="Please enter your firstname *" required='required' data-error="Firstname is required.">
<div class="line-ripple"></div>
</div>
<div class="form-group">
<label class="floating-label" for="form_lastname">Lastname *</label>
<input type="text" id="form_lastname" name="surname" class="form-control" placeholder="Please enter your lastname *" required='required' data-error="Lastname is required.">
<div class="line-ripple"></div>
</div>
<div class="form-group">
<label class="floating-label" for="form_email">Email *</label>
<input type="email" id="form_email" name="email" class="form-control" placeholder="Please enter your email *" required='required' data-error="Valid email is required.">
<div class="line-ripple"></div>
</div>
<div class="form-group">
<label class="floating-label" for="form_phone">Phone</label>
<input type="tel" id="form_phone" name="phone" class="form-control" placeholder="Please enter your phone" data-error="">
<div class="line-ripple"></div>
</div>
<div class="form-group">
<label class="floating-label" for="form_message">Message *</label>
<input type="" id="form_message" name="message" class="form-control" placeholder="Message for me *" required='required' data-error="Please,leave us a message.">
<div class="line-ripple"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="floating-label" for="form_name">Firstname *</label>
<input type="text" id="form_name" name="name" class="form-control" placeholder="Please enter your firstname *" required='required' data-error="Firstname is required.">
<div class="line-ripple"></div>
</div>
<div class="form-group">
<label class="floating-label" for="form_lastname">Lastname *</label>
<input type="text" id="form_lastname" name="surname" class="form-control" placeholder="Please enter your lastname *" required='required' data-error="Lastname is required.">
<div class="line-ripple"></div>
</div>
<div class="form-group">
<label class="floating-label" for="form_email">Email *</label>
<input type="email" id="form_email" name="email" class="form-control" placeholder="Please enter your email *" required='required' data-error="Valid email is required.">
<div class="line-ripple"></div>
</div>
<div class="form-group">
<label class="floating-label" for="form_phone">Phone</label>
<input type="tel" id="form_phone" name="phone" class="form-control" placeholder="Please enter your phone" data-error="">
<div class="line-ripple"></div>
</div>
<div class="form-group">
<label class="floating-label" for="form_message">Message *</label>
<input type="" id="form_message" name="message" class="form-control" placeholder="Message for me *" required='required' data-error="Please,leave us a message.">
<div class="line-ripple"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="floating-label" for="form_name">Firstname *</label>
<input type="text" id="form_name" name="name" class="form-control" placeholder="Please enter your firstname *" required='required' data-error="Firstname is required.">
<div class="line-ripple"></div>
</div>
<div class="form-group">
<label class="floating-label" for="form_lastname">Lastname *</label>
<input type="text" id="form_lastname" name="surname" class="form-control" placeholder="Please enter your lastname *" required='required' data-error="Lastname is required.">
<div class="line-ripple"></div>
</div>
<div class="form-group">
<label class="floating-label" for="form_email">Email *</label>
<input type="email" id="form_email" name="email" class="form-control" placeholder="Please enter your email *" required='required' data-error="Valid email is required.">
<div class="line-ripple"></div>
</div>
<div class="form-group">
<label class="floating-label" for="form_phone">Phone</label>
<input type="tel" id="form_phone" name="phone" class="form-control" placeholder="Please enter your phone" data-error="">
<div class="line-ripple"></div>
</div>
<div class="form-group">
<label class="floating-label" for="form_message">Message *</label>
<input type="" id="form_message" name="message" class="form-control" placeholder="Message for me *" required='required' data-error="Please,leave us a message.">
<div class="line-ripple"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="floating-label" for="form_name">Firstname *</label>
<input type="text" id="form_name" name="name" class="form-control" placeholder="Please enter your firstname *" required='required' data-error="Firstname is required.">
<div class="line-ripple"></div>
</div>
<div class="form-group">
<label class="floating-label" for="form_lastname">Lastname *</label>
<input type="text" id="form_lastname" name="surname" class="form-control" placeholder="Please enter your lastname *" required='required' data-error="Lastname is required.">
<div class="line-ripple"></div>
</div>
<div class="form-group">
<label class="floating-label" for="form_email">Email *</label>
<input type="email" id="form_email" name="email" class="form-control" placeholder="Please enter your email *" required='required' data-error="Valid email is required.">
<div class="line-ripple"></div>
</div>
<div class="form-group">
<label class="floating-label" for="form_phone">Phone</label>
<input type="tel" id="form_phone" name="phone" class="form-control" placeholder="Please enter your phone" data-error="">
<div class="line-ripple"></div>
</div>
<div class="form-group">
<label class="floating-label" for="form_message">Message *</label>
<input type="" id="form_message" name="message" class="form-control" placeholder="Message for me *" required='required' data-error="Please,leave us a message.">
<div class="line-ripple"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
</div>
<div class="col-md-12">
<input type="submit" class="btn btn-success btn-send" value="Send message">
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="text-muted"><strong>*</strong> These fields are required.</p>
</div>
</div>
</div>
</form>
Why isn't it doing it correctly?
EDIT Finally got it working, changes are listed below...
Here's contact.mustache
<form id="contact-form" method="post" action="contact.php" role="form">
<div class="messages"></div>
<div class="controls">
{{>input}}
{{>textarea}}
<div class="col-md-12">
<input type="submit" class="btn btn-success btn-send" value="Send message">
</div>
<div class="row">
<div class="col-md-12">
<p class="text-muted"><strong>*</strong> These fields are required.</p>
</div>
</div>
</div>
</form>
Here's input.mustache
{{#input}}
<div class="row">
<div class="col-md-6">
<div class="{{div_class}}">
<label class="{{label_class}}" for="{{id}}">{{text}}</label>
<input type="{{type}}" id="{{id}}" name="{{name}}" class="{{input_class}}" placeholder="{{placeholder}}" {{required}} data-error="{{data-error}}">
<div class="{{line_class}}"></div>
</div>
</div>
</div>
{{/input}}
Here's textarea.mustache
{{#textarea}}
<div class="row">
<div class="col-md-12">
<div class="{{div_class}}">
<label class="{{label_class}}" for="{{id}}">{{text}}</label>
<textarea id="{{id}}" name="{{name}}" class="{{input_class}}" placeholder="{{placeholder}}" rows="{{rows}}" {{required}} data-error="{{data-error}}"></textarea>
<div class="{{line_class}}"></div>
</div>
</div>
</div>
{{/textarea}}
Here's the data array (code stays same):
$data = array(
"input"=>array(
0 =>array(
"div_class"=>"form-group",
"id"=>"form_name",
"type"=>"text",
"name"=>"name",
"placeholder"=> "Please enter your firstname *",
"required"=>"required='required'",
"data-error"=>"Firstname is required.",
"input_class"=>"form-control",
"label_class"=>"floating-label",
"text"=>"Firstname *",
"line_class"=>"line-ripple",
),
1=> array(
"div_class"=>"form-group",
"id"=>"form_lastname",
"type"=>"text",
"name"=>"surname",
"placeholder"=> "Please enter your lastname *",
"required"=>"required='required'",
"data-error"=>"Lastname is required.",
"input_class"=>"form-control",
"label_class"=>"floating-label",
"text"=>"Lastname *",
"line_class"=>"line-ripple",
),
2 =>array(
"div_class"=>"form-group",
"id"=>"form_email",
"type"=>"email",
"name"=>"email",
"placeholder"=> "Please enter your email *",
"required"=>"required='required'",
"data-error"=>"Valid email is required.",
"input_class"=>"form-control",
"label_class"=>"floating-label",
"text"=>"Email *",
"line_class"=>"line-ripple",
),
3 =>array(
"div_class"=>"form-group",
"id"=>"form_phone",
"type"=>"tel",
"name"=>"phone",
"placeholder"=> "Please enter your phone",
"input_class"=>"form-control",
"label_class"=>"floating-label",
"text"=>"Phone",
"line_class"=>"line-ripple",
),
),
"textarea"=>array(
0 =>array(
"div_class"=>"form-group",
"id"=>"form_message",
"name"=>"message",
"placeholder"=> "Message for me *",
"required"=>"required='required'",
"data-error"=>"Please,leave us a message.",
"input_class"=>"form-control",
"label_class"=>"floating-label",
"text"=>"Message *",
"rows"=>4,
"line_class"=>"line-ripple",
),
)
);
Here's Output:
<form id="contact-form" method="post" action="contact.php" role="form">
<div class="messages"></div>
<div class="controls">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="floating-label" for="form_name">Firstname *</label>
<input type="text" id="form_name" name="name" class="form-control" placeholder="Please enter your firstname *" required='required' data-error="Firstname is required.">
<div class="line-ripple"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="floating-label" for="form_lastname">Lastname *</label>
<input type="text" id="form_lastname" name="surname" class="form-control" placeholder="Please enter your lastname *" required='required' data-error="Lastname is required.">
<div class="line-ripple"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="floating-label" for="form_email">Email *</label>
<input type="email" id="form_email" name="email" class="form-control" placeholder="Please enter your email *" required='required' data-error="Valid email is required.">
<div class="line-ripple"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="floating-label" for="form_phone">Phone</label>
<input type="tel" id="form_phone" name="phone" class="form-control" placeholder="Please enter your phone" data-error="">
<div class="line-ripple"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="floating-label" for="form_message">Message *</label>
<textarea id="form_message" name="message" class="form-control" placeholder="Message for me *" rows="4" required='required' data-error="Please,leave us a message."></textarea>
<div class="line-ripple"></div>
</div>
</div>
</div>
<div class="col-md-12">
<input type="submit" class="btn btn-success btn-send" value="Send message">
</div>
<div class="row">
<div class="col-md-12">
<p class="text-muted"><strong>*</strong> These fields are required.</p>
</div>
</div>
</div>
</form>

What actually helped
The PHP render function seems to only have two parameters, unlike the Javascript one. So removing the third parameter and renaming {{>objPartial}} to {{>input}} so it matches the file should make it work with the PHP renderer.
Also, each time a partial is encountered in the main template, it will look at the data it's been given and create the code from the partial for each index of the array. The way your code is would work perfectly if each appearance of the partial only rendered for one element of the array.
At this point, you've very nearly got it working, just need to tweak a couple more things.
{{#input}}
<div class="col-md-6">
<div class="{{div_class}}">
<label class="{{label_class}}" for="{{id}}">{{text}}</label>
<input type="{{type}}" id="{{id}}" name="{{name}}" class="{{input_class}}" placeholder="{{placeholder}}" {{required}} data-error="{{data-error}}">
<div class="{{line_class}}"></div>
</div>
{{/input}}
And in the main template just have one reference to {{>input}}.
<form id="contact-form" method="post" action="contact.php" role="form">
<div class="messages"></div>
<div class="controls">
<div class="row">
{{>input}}
</div>
<div class="row">
<div class="col-md-12">
{{>textarea}}
</div>
<div class="col-md-12">
<input type="submit" class="btn btn-success btn-send" value="Send message">
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="text-muted"><strong>*</strong> These fields are required.</p>
</div>
</div>
</div>
</form>
There is a way to retain the format of one row div per two elements, but with bootstrap columns it's not necessary unless you're doing some sort of special formatting.
Old answer (retained in case it is useful for someone else)
There's a slight tweak here that I believe will make this work. Rather than calling the partial for each piece of content, call it once for the whole array of content. Your $data array would need to be slightly different, so here's what I'm seeing:
$data = array(
"input"=>array(
array(
"div_class"=>"text-field", "id"=>"firstName",
"input_class"=>"text-field__input", "label_class"=>"floating-label",
"line_class"=>"line-ripple", "text"=>"Curly"
)
),
array(
"div_class"=>"text-field", "id"=>"lastName",
"input_class"=>"text-field__input",
"label_class"=>"floating-label",
"line_class"=>"line-ripple", "text"=>"Athos"
)
)
);
And your partial would change slightly to include the .col-md-6:
{{#input}}
<div class="col-md-6">
<div class="{{div_class}}">
<input type="text" id="{{id}}" class="{{input_class}}">
<label class="{{label_class}}" for="{{id}}">{{text}}</label>
<div class="{{line_class}}"></div>
</div>
</div>
{{/input}}
Then you can replace
<div class="row">
<div class="col-md-6">
{{#firstname}}
{{>objPartial}}
{{/firstname}}
</div>
<div class="col-md-6">
{{#lastname}}
{{>objPartial}}
{{/lastname}}
</div>
</div>
with
<div class="row">
{{>objPartial}}
</div>

Next Label using tab on keyboard (Bootstrap)

I'm a beginner at Bootstrap. When I press Tab, I want to select the next tab.
Click loan_form.php and then the cursor is automatically in Loan Name. After you complete it and press tab on the keyboard, the cursor will move to the Department label instead of the Device code label:
<div class="row">
<div class="col-md-6 mb-3">
<label>* Loan Name</label>
<input type="text" class="form-control" name="loan_name" id="loan_name" placeholder="Full Name" required>
</div>
<div class="col-md-6 mb-3">
<label>Device Code</label>
<select name="device_code" class="form-control" id="device_code" data-validetta="required" ></select>
</div>
</div>
<br />
<div class="row">
<div class="col-md-6 mb-3">
<label>* Department</label>
<input type="text" class="form-control" name="dept" id="dept" placeholder="Department" required></div>
<div class="col-md-6 mb-3">
<label>Brand</label>
<input type="text" class="form-control" name="device_brand" id="device_brand" placeholder="Brand" disabled required>
</div>

Use tabindex html tag in all the input fields. See reformatted code here:
<div class="row">
<div class="col-md-6 mb-3">
<label>* Loan Name</label>
<input type="text" class="form-control" name="loan_name" id="loan_name" placeholder="Full Name" required tabindex="1">
</div>
<div class="col-md-6 mb-3">
<label>Device Code</label>
<select name="device_code" class="form-control" id="device_code" data-validetta="required" tabindex="2"></select>
</div>
</div>
<br />
<div class="row">
<div class="col-md-6 mb-3">
<label>* Department</label>
<input type="text" class="form-control" name="dept" id="dept" placeholder="Department" required tabindex="3"></div>
<div class="col-md-6 mb-3">
<label>Brand</label>
<input type="text" class="form-control" name="device_brand" id="device_brand" placeholder="Brand" disabled required tabindex="4">
</div>

Make a dynamic hide and show fields using select option(Codeigniter)

I am currently developing a system. I have module called "Request Certificate", in this module; User will choose among the 4 certificates given(certificate 1 and so on), then there will be fields need to fill up before submitting it. But there's a plot twist, fields will be different based on the certificate chosen.
Example: I choice certificate 1, the fields will be shown are: name, age. If I choice certificate 2, the fields will be shown are: name, age and year etc.
In my admin side, there will be a "Requesting for Certificate" in my side bar. In here, the admin can view all the users requested for the certificate then print it(used window.print to print)
NOTE: I used dropdown to display the 4 certificates. Right now, I've done the 1st and 2nd certificate but when I choice the 3rd and 4th certificate, the fields didn't show.
Question: How to create a dynamic hide and show fields depends on the dropdown selected?
View
<select class="form-control" id="certificate" name="certificate">
<option value="CertificateOne">Certificate 1</option>
<option value="CertificateTwo">Certificate 2</option>
</select>
<div class="cert_select" id="CertificateTwo">
<div class="col-xs-12">
<div class="form-group">
<hr>
<h4> Certificate</h4>
<div class="col-xs-3">
<label>First Name</label>
<input type="text" class="form-control" name="fname" id="fname" placeholder="Enter First Name">
<div class="text-danger" id="fname_error"></div>
</div>
<div class="col-xs-3">
<label>Middle Name</label>
<input type="text" class="form-control" name="mname" id="mname" placeholder="Enter Middle Name">
<div class="text-danger" id="mname_error"></div>
</div>
<div class="col-xs-3">
<label>Last Name</label>
<input type="text" class="form-control" name="lname" id="lname" placeholder="Enter last name">
<div class="text-danger" id="lname_error"></div>
</div>
</div>
Script
$(document).ready(function(){
$('.cert_select').hide();
$('#certificate').change(function(){
$('.cert_select').hide();
$('#' + $(this).val()).show();
});
});
I also tried this
View
<select class="form-control" id="certificate" name="certificate">
<?php foreach($certificates as $row):?>
<option value="<?= $row->name?>"><?= $row->name?></option>
</select>
<div class="cert_select" id="<?= $row->name?>">
<div class="col-xs-12">
<div class="form-group">
<hr>
<h4> Certificate</h4>
<div class="col-xs-3">
<label>First Name</label>
<input type="text" class="form-control" name="fname" id="fname" placeholder="Enter First Name">
<div class="text-danger" id="fname_error"></div>
</div>
<div class="col-xs-3">
<label>Middle Name</label>
<input type="text" class="form-control" name="mname" id="mname" placeholder="Enter Middle Name">
<div class="text-danger" id="mname_error"></div>
</div>
<div class="col-xs-3">
<label>Last Name</label>
<input type="text" class="form-control" name="lname" id="lname" placeholder="Enter last name">
<div class="text-danger" id="lname_error"></div>
</div>
</div>
<?php endforeach;?>
It only displayed the first certificate and the fields didn't show

You have forgotten 2 div closures, one for .cert_select and the other for .col-xs-12.
<select class="form-control" id="certificate" name="certificate">
<option value="CertificateOne">Certificate 1</option>
<option value="CertificateTwo">Certificate 2</option>
<option value="CertificateThree">Certificate 3</option>
<option value="CertificateFour">Certificate 4</option>
</select>
<div class="cert_select" id="CertificateOne">
<div class="col-xs-12">
<div class="form-group">
<hr>
<h4> Certificate 1</h4>
<div class="col-xs-3">
<label>First Name</label>
<input type="text" class="form-control" name="fname" id="fname" placeholder="Enter First Name">
<div class="text-danger" id="fname_error"></div>
</div>
<div class="col-xs-3">
<label>Middle Name</label>
<input type="text" class="form-control" name="mname" id="mname" placeholder="Enter Middle Name">
<div class="text-danger" id="mname_error"></div>
</div>
<div class="col-xs-3">
<label>Last Name</label>
<input type="text" class="form-control" name="lname" id="lname" placeholder="Enter last name">
<div class="text-danger" id="lname_error"></div>
</div>
</div>
</div>
</div>
<div class="cert_select" id="CertificateTwo">
<div class="col-xs-12">
<div class="form-group">
<hr>
<h4> Certificate 2</h4>
<div class="col-xs-3">
<label>First Name</label>
<input type="text" class="form-control" name="fname" id="fname" placeholder="Enter First Name">
<div class="text-danger" id="fname_error"></div>
</div>
<div class="col-xs-3">
<label>Middle Name</label>
<input type="text" class="form-control" name="mname" id="mname" placeholder="Enter Middle Name">
<div class="text-danger" id="mname_error"></div>
</div>
<div class="col-xs-3">
<label>Last Name</label>
<input type="text" class="form-control" name="lname" id="lname" placeholder="Enter last name">
<div class="text-danger" id="lname_error"></div>
</div>
</div>
</div>
</div>
<div class="cert_select" id="CertificateThree">
<div class="col-xs-12">
<div class="form-group">
<hr>
<h4> Certificate 3</h4>
<div class="col-xs-3">
<label>First Name</label>
<input type="text" class="form-control" name="fname" id="fname" placeholder="Enter First Name">
<div class="text-danger" id="fname_error"></div>
</div>
<div class="col-xs-3">
<label>Middle Name</label>
<input type="text" class="form-control" name="mname" id="mname" placeholder="Enter Middle Name">
<div class="text-danger" id="mname_error"></div>
</div>
<div class="col-xs-3">
<label>Last Name</label>
<input type="text" class="form-control" name="lname" id="lname" placeholder="Enter last name">
<div class="text-danger" id="lname_error"></div>
</div>
</div>
</div>
</div>
<div class="cert_select" id="CertificateFour">
<div class="col-xs-12">
<div class="form-group">
<hr>
<h4> Certificate 4</h4>
<div class="col-xs-3">
<label>First Name</label>
<input type="text" class="form-control" name="fname" id="fname" placeholder="Enter First Name">
<div class="text-danger" id="fname_error"></div>
</div>
<div class="col-xs-3">
<label>Middle Name</label>
<input type="text" class="form-control" name="mname" id="mname" placeholder="Enter Middle Name">
<div class="text-danger" id="mname_error"></div>
</div>
<div class="col-xs-3">
<label>Last Name</label>
<input type="text" class="form-control" name="lname" id="lname" placeholder="Enter last name">
<div class="text-danger" id="lname_error"></div>
</div>
</div>
</div>
</div>
JS part with jQuery :
$(document).ready(function(){
$('.cert_select').hide();
$('#certificate').change(function(){
$('.cert_select').hide();
$('#' + $(this).val()).show();
});
});
Here is a jsfiddle with the 4 certificates:
https://jsfiddle.net/Lqq8ucep/

How to group HTML from with multiple fields with same name

I work on from to add more than one device when user click on add more
But How can I group multiple fields with same name as array for every device from this form, my server side language is PHP.
<form>
<div class="row">
<div class="col-md-12">
<div class="widget stacked">
<div class="widget-header">
<i class="icon-hdd"></i>
<h3>Remove Devices</h3> <a class="btn label label-success add_new_device">Add more</a>
</div>
<div class="widget-content">
<div class="form-group">
<label for="device_name">Device Name</label>
<input class="form-control" data-validation="length" data-validation-length="max128" data-validation-optional="true" name="device[device_name][]" type="text">
</div>
<div class="form-group">
<label for="device_description">Device Description</label>
<input class="form-control" data-validation="length" data-validation-length="max255" data-validation-optional="true" name="device[device_description][]" type="text">
</div>
<div class="form-group">
<label for="device_url">Device Url</label>
<input class="form-control" data-validation="url" data-validation-optional="true" data-validation-help="Ex: http://000.000.000.000/index.cgi" name="device[device_url][]" type="url">
</div>
<div class="form-group">
<label for="device_ip4">IP4</label>
<input class="form-control" data-validation="length" data-validation-length="max15" data-validation-optional="true" data-validation-help="Ex: 000.000.000.000" name="device[device_ip4][]" type="text">
</div>
<div class="form-group">
<label for="device_ip6">IP6</label>
<input class="form-control" data-validation="length" data-validation-length="max45" data-validation-help="Ex: 0000:0000:0000:0000:0000:0000" name="device[][device_ip6]" type="text">
</div>
<div class="form-group">
<label for="device_username">Device Username</label>
<input class="form-control" data-validation="length" data-validation-length="max128" data-validation-optional="true" name="device[][device_username]" type="text">
</div>
<div class="form-group">
<label for="device_password">Device Password</label>
<input class="form-control" data-validation="length" data-validation-length="max128" data-validation-optional="true" name="device[][device_password]" type="text">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="widget stacked">
<div class="widget-header">
<i class="icon-hdd"></i>
<h3>Remove Devices</h3> <a class="btn label label-success add_new_device">Add more</a>
</div>
<div class="widget-content">
<div class="form-group">
<label for="device_name">Device Name</label>
<input class="form-control" data-validation="length" data-validation-length="max128" data-validation-optional="true" name="device[device_name][]" type="text">
</div>
<div class="form-group">
<label for="device_description">Device Description</label>
<input class="form-control" data-validation="length" data-validation-length="max255" data-validation-optional="true" name="device[device_description][]" type="text">
</div>
<div class="form-group">
<label for="device_url">Device Url</label>
<input class="form-control" data-validation="url" data-validation-optional="true" data-validation-help="Ex: http://000.000.000.000/index.cgi" name="device[device_url][]" type="url">
</div>
<div class="form-group">
<label for="device_ip4">IP4</label>
<input class="form-control" data-validation="length" data-validation-length="max15" data-validation-optional="true" data-validation-help="Ex: 000.000.000.000" name="device[device_ip4][]" type="text">
</div>
<div class="form-group">
<label for="device_ip6">IP6</label>
<input class="form-control" data-validation="length" data-validation-length="max45" data-validation-help="Ex: 0000:0000:0000:0000:0000:0000" name="device[][device_ip6]" type="text">
</div>
<div class="form-group">
<label for="device_username">Device Username</label>
<input class="form-control" data-validation="length" data-validation-length="max128" data-validation-optional="true" name="device[][device_username]" type="text">
</div>
<div class="form-group">
<label for="device_password">Device Password</label>
<input class="form-control" data-validation="length" data-validation-length="max128" data-validation-optional="true" name="device[][device_password]" type="text">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="widget stacked">
<div class="widget-header">
<i class="icon-hdd"></i>
<h3>Remove Devices</h3> <a class="btn label label-success add_new_device">Add more</a>
</div>
<div class="widget-content">
<div class="form-group">
<label for="device_name">Device Name</label>
<input class="form-control" data-validation="length" data-validation-length="max128" data-validation-optional="true" name="device[device_name][]" type="text">
</div>
<div class="form-group">
<label for="device_description">Device Description</label>
<input class="form-control" data-validation="length" data-validation-length="max255" data-validation-optional="true" name="device[device_description][]" type="text">
</div>
<div class="form-group">
<label for="device_url">Device Url</label>
<input class="form-control" data-validation="url" data-validation-optional="true" data-validation-help="Ex: http://000.000.000.000/index.cgi" name="device[device_url][]" type="url">
</div>
<div class="form-group">
<label for="device_ip4">IP4</label>
<input class="form-control" data-validation="length" data-validation-length="max15" data-validation-optional="true" data-validation-help="Ex: 000.000.000.000" name="device[device_ip4][]" type="text">
</div>
<div class="form-group">
<label for="device_ip6">IP6</label>
<input class="form-control" data-validation="length" data-validation-length="max45" data-validation-help="Ex: 0000:0000:0000:0000:0000:0000" name="device[][device_ip6]" type="text">
</div>
<div class="form-group">
<label for="device_username">Device Username</label>
<input class="form-control" data-validation="length" data-validation-length="max128" data-validation-optional="true" name="device[][device_username]" type="text">
</div>
<div class="form-group">
<label for="device_password">Device Password</label>
<input class="form-control" data-validation="length" data-validation-length="max128" data-validation-optional="true" name="device[][device_password]" type="text">
</div>
</div>
</div>
</div>
</div>
</form>

Name your fields like devices[0][description], devices[1][description] and so on.
If every object has the exact same number of fields and every one is a new record - you can use devices[][description] and browser will fill indexes for you, but this can lead to bugs in the future, if you decide to use same form for editing records.
Also see How to get form input array into PHP array

Categories