Pop up contact form disappears when clicking the submit button - php

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>

Related

I want to update the recorded in data base. I want to send the "employee_id" on clicking save button. so that corresponding 'id' recorded is updated

I want to update the record of the corresponding id that is sent on clicking save button. I tried button tage, input tage and link tage but there is some mistake that I am making, but I don't know where?
This is my form
<form method="POST" action="handle_update.php">
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">First name</label>
<input type="text" name="fname" value="'.$first_name.'" class="form-control" >
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Last name</label>
<input type="text" name="last_name" value="'.$last_name.'" class="form-control">
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Email</label>
<input type="email" name="email" value="'.$email.'" class="form-control">
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Designation</label>
<input type="text" name="designation" value="'.$designation.'" class="form-control">
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Address</label>
<input type="address" name="address" value="'.$address.'" class="form-control">
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Date of Joining</label>
<input type="date" name="joining_date" value="'.$joining_date.'" class="form-control">
</div>
<a name="update" role = "button" type="submit" href="handle_update.php?ployee_id='.$id2.'">Save</a>
</form>

Add a hidden input field that holds the value you want to submit. Change your <a> to a <button> that can submit your form. Change your code to:
<form method="POST" action="handle_update.php">
<input type="hidden" name="ployee_id" value="' . $id2 . '">
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">First name</label>
<input type="text" name="fname" value="'.$first_name.'" class="form-control" >
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Last name</label>
<input type="text" name="last_name" value="'.$last_name.'" class="form-control">
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Email</label>
<input type="email" name="email" value="'.$email.'" class="form-control">
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Designation</label>
<input type="text" name="designation" value="'.$designation.'" class="form-control">
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Address</label>
<input type="address" name="address" value="'.$address.'" class="form-control">
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Date of Joining</label>
<input type="date" name="joining_date" value="'.$joining_date.'" class="form-control">
</div>
<button type="submit" name="update">Save</button>
</form>
More on forms: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form
More on hidden inputs: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/hidden

Bootstrap Panel Body Left and Right

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>

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