I am new to both bootstrap and php. I have created a registration modal form to register users for my site and it registers perfectly. However, I would like to retrieve a users details from my database based on their User ID and display their details in a registration form for them to edit and update.
What I don't know how to do is display the records in the form fields...
Please help by providing a simple syntax for this.
I am using PHP and MySql
This is my modal form
<div class="modal fade" id="updatelecModal" tabindex="-1" role="dialog" aria-labelledby="updatelecModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<!--End of modal-->
<!-- Start of form-->
<form id="updatelecForm" class="form-horizontal" role="form" method="post" action="#" nonvalidate>
<div class="form-group">
<label for="student_id" class="col-sm-3 control-label">Lecturer ID</label>
<div class="col-lg-9">
<input type="text" class="form-control" name="lec_id" required placeholder="Enter User ID">
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Full name</label>
<div class="col-lg-4">
<input type="text" class="form-control" name="firstName" required placeholder="First name" />
</div>
<div class="col-lg-4">
<input type="text" class="form-control" name="lastName" required placeholder="Last name" />
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-3 control-label">Email</label>
<div class="col-lg-9">
<input type="email" class="form-control" name="lec_email" required placeholder="#######.com">
</div>
</div>
<label class="col-xs-3 control-label" name="lec_gender">Gender:</label>
<label class="radio-inline control-label">
<input type="radio" name="optionsRadio" id="gender" value="Male">Male
</label>
<label class="radio-inline control-label">
<input type="radio" name="optionsRadio" id="gender" value="Female">Female
</label>
<div class="form-group">
<label for="password" class="col-sm-3 control-label">Password</label>
<div class="col-sm-7">
<input type="password" id="password" class="form-control" name="password" required placeholder ="Enter your Password">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-3 control-label">Confirm Password</label>
<div class="col-sm-7">
<input type="password" id="password2" class="form-control" name="cpassword" data-validate-linked="password" required placeholder ="Re-enter your Password">
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Register</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="reset" class="btn btn-default">Reset</button>
</div>
</form>
<!--End of registration form-->
</div>
</div>
</div>
</div>
I dont know how to include the php in this form as it disappears
Also if you could include links for further reading on php I would really appreciate.
Without seeing any code it's difficult to give more specific help. However, what I would do is store the user's id in a session. When they view the form brab the id from the session and do a SQL call to your db, something like:
SELECT firstName,lastName,email, FROM table_name WHERE id=$id
Obviously what you select, the table_name, and the where clause depends on your own tables and variables.
Run your SQL command and store the columns into variables. Then place the variable into the value of the input:
<input type="text" value="<?php echo $name != '' ? $name : ''; ?>" />
Basically, what I did above is a shorthand if statement that says if $name isn't blank they print it, otherwise print nothing.
Related
How do I give an error message inside modal after clicking update?
In my example here I gave a required attribute on the input field.
I want to change the error message based on Form Validation Best Practices.
(This code is part of CRUD PHP file for updating data in a table I had)
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Edit Data</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="form-update" action="proses_edit.php" name="modal_popup" enctype="multipart/form-data" method="POST">
<div class="form-group" style="padding-bottom: 20px;">
<label for="Name">Name</label>
<input type="hidden" name="modal_id" id="edit-id" class="form-control" value="<?php echo $r['modal_id']; ?>"/>
<input type="text" name="modal_name" id="edit-name" class="form-control" value="<?php echo $r['modal_name']; ?>" required />
</div>
<div class="form-group" style="padding-bottom: 20px;">
<label for="Description">Age</label>
<input type="text" id="edit-description" class="form-control" value="<?php echo $r['description']; ?>" required />
</div>
<div class="modal-footer">
<button class="btn btn-success" type="submit">
Update
</button>
<button type="reset" class="btn btn-danger" data-dismiss="modal" aria-hidden="true">
Cancel
</button>
</div>
</form>
</div>
</div>
</div>
Here’s how form validation works with Bootstrap, taken from the documentation:
HTML form validation is applied via CSS’s two pseudo-classes, :invalid and :valid. It applies to <input>, <select>, and <textarea> elements.
Bootstrap scopes the :invalid and :valid styles to parent .was-validated class, usually applied to the <form>. Otherwise, any required field without a value shows up as invalid on page load. This way, you may choose when to activate them (typically after form submission is attempted).
As a fallback, .is-invalid and .is-valid classes may be used instead of the pseudo-classes for server side validation. They do not require a .was-validated parent class.
To achieve somewhat of what you're trying to do, taken from the example here you can use custom styles and create tooltips for each input and display a response based on the validation result. You will need to add the novalidate property to your <form> in order to prevent the default browser validation for this to work.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="needs-validation" novalidate>
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="validationCustom01">First name</label>
<input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4 mb-3">
<label for="validationCustom02">Last name</label>
<input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4 mb-3">
<label for="validationCustomUsername">Username</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupPrepend">#</span>
</div>
<input type="text" class="form-control" id="validationCustomUsername" placeholder="Username" aria-describedby="inputGroupPrepend" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationCustom03">City</label>
<input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
<div class="invalid-feedback">
Please provide a valid city.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationCustom04">State</label>
<input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
<div class="invalid-feedback">
Please provide a valid state.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationCustom05">Zip</label>
<input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required>
<div class="invalid-feedback">
Please provide a valid zip.
</div>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">
Agree to terms and conditions
</label>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
More information on Bootstrap Validation: https://getbootstrap.com/docs/4.0/components/forms/#validation
I am building this website for a takeaway restaurant and the client requested 2 models one for career (receiving the resumes ) and the other for subscription to email updates.
How can I let the Form of the MODEL send the data to a Php page for GET_POST ?
The reason I am asking this is I need to record all the Model data to a database of the server not only send an email with the data.
First Model #join us
<div class="modal" id="JoinModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Subscribe for our updates</h5>
<button class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form action="addmail.php" method="post">
<div class="form-group">
<label for="username">Name</label>
<input type="text" id="fname" placeholder="Name" class="form-control">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" placeholder="Email" class="form-control">
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-success" value="Submit">Join</button>
</div>
</div>
</div>
</div>
The other model for receiving the resumes
<!-- Career MODAL -->
<div class="modal" id="CareerModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Join our Team</h5>
<button class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="username">Name</label>
<input type="text" placeholder="Name" class="form-control">
</div>
<div class="form-group">
<label for="familyname">Family Name</label>
<input type="text" placeholder="Family Name" class="form-control">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<label for="cv">Attach your CV</label>
<input type='file' name='cv' id='cv' class='form-control' ><br>
<input type='button' class='btn btn-info' value='Upload' id='upload'>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" value="Submit">Apply</button>
</div>
</div>
</div>
</div>
</div>
you can use ajax that will help you to perform parallel operation
e.g : inserting to database and sending mail
hope, it works for you
I'm actually developing a Web site where you can register yourself from a form.
I've create a code in PHP for managing the errors which could happen (wrong number, mail...)
Here is my problem : When I send the form, I cant manage to stay on it to overwrite the form with the errors encounters (if there are some).
I'm using Bootstrap form the form and I have absolutely no clue of how to do that.
This is the my HTML
<div class="modal fade" id="ins" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form id="FormIns" action="Index.php" method="post">
<div class="modal-header">
<h4 class="text-center">Inscription</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<input type="text" class="form-control" name="lastname" id="lname" placeholder="Nom" maxlength="25">
</div>
</div><br/>
<div class="row">
<div class="col-md-offset-3 col-md-6">
<input type="text" class="form-control" name="firstname" id="fname" placeholder="Prénom" maxlength="25">
</div>
</div><br/>
<div class="row">
<div class="col-md-offset-3 col-md-6">
<input type="text" class="form-control" name="nid" id="nidentifiant" placeholder="Identifiant" maxlength="25">
</div>
</div><br/>
<div class="row">
<div class="col-md-offset-3 col-md-6">
<input type="password" class="form-control" name="npass" id="npassword" placeholder="Mot de Passe" maxlength="25">
</div>
</div><br/>
<div class="row">
<div class="col-md-offset-3 col-md-6">
<input type="password" class="form-control" name="cnpass" id="cnpassword" placeholder="Confirmer Mot de Passe" maxlength="25">
</div>
</div><br/>
<div class="row">
<div class="col-md-offset-3 col-md-6">
<input type="mail" class="form-control" name="mail" id="mail" placeholder="Adresse Email" maxlength="25">
</div>
</div><br/>
<div class="row">
<div class="col-md-offset-3 col-md-6">
<input type="text" class="form-control" name="phone" id="phone" placeholder="Numéro de Téléphone" maxlength="25">
</div>
</div><br/>
<div class="modal-footer">
<input class="btn btn-primary" type="submit" value="Inscription" name="log">
<a class="btn btn-default" data-dismiss="modal">Annuler</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
Firstly, you should add labels to your form fields. These help with the page as well as give a good entry point for error messages.
A simple approach would be to set the form-action to the form page, and put validation errors in an associative array with values like
$errors['name'] = "Name did not match"; and so on and so forth.
Then you add a <span> at the end of the label like (roughly) this:
<span>
<?php echo (isset($errors['name'])) ? $errors['name'] : "";?>
</span>
</label>
This would make PHP evaluate the errors and put them into the label so they can be easily connected to the field.
Lastly, to continue, you add a redirect to the next page, if the validation is successful, so create a redirect function and send the validated data to the next page.
€: for good effects, you can use php to append the alert or warning class to the corresponding form-control groups or inputs.
If you are using a script to check that the values are right, the first thing you have to do is stop the form action.
<script type="text/javascript">
$("#FormIns").submit(function(e){
e.preventDefault();
// your code to check the form goes here
//once you finished and everything is right then:
$( "#FormIns" ).submit();
});
</script>
I'm having an issue getting my second of two forms on a single html to process data. I'm using Bootstrap 3 framework and have a form in a modal that processes correctly i.e. a user clicks the submit button and the form is processed correctly.
There is another form on the page which does not process correctly. When a user clicks the submit button, the form is supposed to be processed and bring the user to a new page (goodsub.html) but when the submit button is clicked, nothing happens. Is there something wrong with my HTML?
I am very new to PHP so I used some pre-made PHP documents that seem to work fine for the first form on the page. Note that when I comment out the form within the modal, my "second" form processes correctly and sends the user to goodsub.html.
Page in question can be viewed at http://josephsamora.com/contact.html
Here is my code for the working:
<!--modal-->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">I look forward to hearing from you.</h3>
</div>
<div class="modal-body">
<form id="personalform" name="personalform" action="mail_form.php" method="post" class="form-horizontal col-sm-12">
<div class="form-group"><input class="form-control required" placeholder="Your name*" data-placement="top" data-trigger="manual" data-content="Must be at least 3 characters long, and must only contain letters." type="text" name="Name"></div>
<div class="form-group"><textarea name="Message" class="form-control" placeholder="Your message here..*" data-placement="top" data-trigger="manual"></textarea></div>
<div class="form-group"><input name="email" class="form-control email" placeholder="email#you.com (so that I can contact you)*" data-placement="top" data-trigger="manual" data-content="Must be a valid e-mail address (user#gmail.com)" type="text"></div>
<div class="form-group"><input type="hidden" name="recipients"
value="walshv10#gmail.com" />
<input type="hidden" name="good_url" value="goodsub.html" />
<input type="hidden" name="bad_url" value="badsub.html" /></div>
<div class="form-group"><input Name="Phone Number" class="form-control phone" placeholder="Phone Number: 999-999-9999" data-placement="top" data-trigger="manual" data-content="Must be a valid phone number (999-999-9999)" type="text"></div>
<div class="form-group"><button type="submit" name="Sendit" value="Sendit" class="btn btn-success pull-right">Send It!</button> <p class="help-block pull-left text-danger hide" id="form-error"> The form is not valid. </p></div>
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
</div>
And the non-working form:
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form id="fullform" name="fullform" action="mail_form.php" method="post" class="form-horizontal" role="form">
<!--Hidden Section-->
<div class="form-group"><input type="hidden" name="recipients"
value="walshv10#gmail.com"/>
<input type="hidden" name="good_url" value="goodsub.html" />
<input type="hidden" name="bad_url" value="badsub.html" /></div>
<!-- Form Section Name -->
<h3>Name & Email</h3>
<hr>
<!-- Text Input -->
<div class="form-group">
<label class="col-sm-3 control-label">First Name*</label>
<div class="col-sm-9">
<input type="text" placeholder="First Name" class="form-control" data-placement="top" data-trigger="manual" name="First Name" required="">
</div>
</div>
<!-- Text Input -->
<div class="form-group">
<label class="col-sm-3 control-label">Last Name*</label>
<div class="col-sm-9">
<input type="text" placeholder="Last Name" class="form-control" data-placement="top" data-trigger="manual" name="Last Name" required="">
</div>
</div>
<!-- Text Input -->
<div class="form-group">
<label class="col-sm-3 control-label">Email*</label>
<div class="col-sm-9">
<input type="text" placeholder="Email" class="form-control" data-placement="top" data-trigger="manual" name="Email" required="">
</div>
</div>
<!-- Form Section Name -->
<h3>Address Details</h3>
<hr>
<!-- Text input-->
<div class="form-group">
<label class="col-sm-2 control-label">Line 1</label>
<div class="col-sm-10">
<input type="text" placeholder="Address Line 1" class="form-control" data-placement="top" data-trigger="manual" name="Address Line 1">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-sm-2 control-label">Line 2</label>
<div class="col-sm-10">
<input type="text" placeholder="Address Line 2" class="form-control" data-placement="top" data-trigger="manual" name="Address Line 2">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-sm-2 control-label">City</label>
<div class="col-sm-10">
<input type="text" placeholder="City" class="form-control" data-placement="top" data-trigger="manual" name="City">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-sm-2 control-label">State</label>
<div class="col-sm-4">
<input type="text" placeholder="State" class="form-control" data-placement="top" data-trigger="manual" name="State">
</div>
<label class="col-sm-2 control-label">Postcode</label>
<div class="col-sm-4">
<input type="text" placeholder="Post Code" class="form-control" data-placement="top" data-trigger="manual" name="Post code">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-sm-2 control-label">Country</label>
<div class="col-sm-10">
<input type="text" placeholder="Country" class="form-control" data-placement="top" data-trigger="manual" name="Country">
</div>
</div>
<!-- Form Section Name -->
<h3>Other Contact Info</h3>
<hr>
<!--Text Input -->
<div class="form-group">
<label class="col-sm-3 control-label">Phone Number</label>
<div class="col-sm-9">
<input type="text" placeholder="Phone Number" class="form-control" data-placement="top" data-trigger="manual" name="Phone Number">
</div>
</div>
<!--Text Input -->
<div class="form-group">
<label class="col-sm-3 control-label">Organization</label>
<div class="col-sm-9">
<input type="text" placeholder="Organization" class="form-control" data-placement="top" data-trigger="manual" name="Organization">
</div>
</div>
<!-- Form Section Name -->
<h3>Message</h3>
<hr>
<!--Text Input -->
<div class="form-group">
<label class="col-sm-2 control-label">Subject</label>
<div class="col-sm-10">
<input type="text" placeholder="Subject" class="form-control" data-placement="top" data-trigger="manual" name="Subject">
</div>
</div>
<!-- Textarea -->
<div class="form-group">
<label class="col-sm-2 control-label" for="Message">Message*</label>
<div class="col-sm-10">
<textarea class="form-control" id="Message" name="Message" placeholder="Message" required data-placement="top" data-trigger="manual"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="pull-right">
<div class="form-group"><button type="submit" name="submit" value="submit" class="btn btn-success pull-right">Submit</button></div>
</div>
</div>
</div>
</form>
</div>
</div>
I also have the following PHP above the head tag:
<?php
if (!empty($_POST['submit'])) {
//send to submit;
}
if (!empty($_POST['Sendit'])) {
//send to Sendit;
}
?>
Thanks!
remove this section from your non working form
<!--Hidden Section-->
<div class="form-group"><input type="hidden" name="recipients"
value="walshv10#gmail.com"/>
<input type="hidden" name="good_url" value="goodsub.html" />
<input type="hidden" name="bad_url" value="badsub.html" /></div>
I am using a form in a bootstrap modal window to post data to another page. However when i try to print the post values on the other page all I am getting is an empty array.
Here's my modal code:
<div class="modal hide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
X</button>
<h3 id="myModalLabel">
Enter your Credentials</h3>
</div>
<div class="modal-body">
<form id="modal-form" class="form-horizontal" accept-charset="UTF-8" method="POST" action="login.php" data-remote="true">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="email" id="email" placeholder="Email">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<input type="password" id="passwd" placeholder="Password">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
<input type="submit" class="btn btn-primary" value="Submit"/>
Sign up
</div>
</div>
</form>
</div>
</div>
Here's the command I'm giving in login.php:
echo "Email is:";
echo $_POST["email"];
echo "Password is:";
echo $_POST["passwd"];
However all I'm getting is an empty array.
Is there some sort of special way I'm supposed to do this?
You have't define name in input just change two line from your code. add name of that input.
<input type="email" id="email" name="email" placeholder="Email" />
<input type="password" id="passwd" name="passwd" placeholder="Password" />