I am new to Bootstrap 3. I am creating a login page and I have this code:
* I got this generated from Bootply.
<form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<legend>Registry Login</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="input_email">Email</label>
<div class="col-md-8">
<input id="input_username" name="input_email" placeholder="" class="form-control input-md" required="" type="email">
</div>
</div>
<!-- Password input-->
<div class="form-group">
<label class="col-md-4 control-label" for="input_password">Password</label>
<div class="col-md-8">
<input id="input_password" name="input_password" placeholder="" class="form-control input-md" required="" type="password">
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for=""></label>
<div class="col-md-4">
<button id="" name="" class="btn btn-default">Login</button>
</div>
</div>
</fieldset>
</form>
I keyed in on my Email field this sample string abcde and I received a small tooltip saying that Please enter an email address. Is there a way for me to change the text?
You'll have to change the form options with Codeigniter, I'm not too familiar with it, but it sounds like it would be under a submit code for a post.
Related
I have roughly the following html:
<div class="form-group row">
<label class="control-label col-md-2 font-weight-bold text-right" for="Name">Name</label>
<div class="col-md-10">
<input class="form-control text-box single-line valid" data-val="true" id="Name" name="Name" type="text" value="Mark"
<span class="text-danger field-validation-valid"</span>
</div>
</div>
<div class="form-group row">
<label class="control-label col-md-2 font-weight-bold text-right" for="Address">Address</label>
<div class="col-md-10">
<input class="form-control text-box single-line valid" data-val="true" id="Address" name="Address" type="text" value="101 Windmere"
<span class="text-danger field-validation-valid"</span>
</div>
</div>
<div class="form-group row">
<label class="control-label col-md-2 font-weight-bold text-right" for="Notes">Notes</label>
<div class="col-md-10">
<input class="form-control text-box single-line valid" data-val="true" id="Notes" name="Notes" type="text" value="Sample note goes here"
<span class="text-danger field-validation-valid"</span>
</div>
</div>
<div class="form-group row">
<label class="control-label col-md-2 font-weight-bold text-right" for="Award">Award</label>
<div class="col-md-10">
<input class="form-control text-box single-line valid" data-val="true" id="Award" name="Award" type="text" value="20"
<span class="text-danger field-validation-valid"</span>
</div>
</div>
As you may be able to tell, I am dealing with a form table of sorts. I am trying to iterate over this and grab all the values. I need all the instances of "col-md-10" except the last one (Award). So I am using the following xpath:
//div[#class = 'col-md-10'][position()<4]
However, it keeps finding all four instances and doesn't stop at 3. No matter what number I put in for position. Even if I do [position()<1], it finds all four.
Any ideas?
The <span> tags in your html aren't closed properly (they should be <span/>). That aside, the following expression should get you there:
(//div[#class = 'col-md-10'])[position()<4]
I'm using Laravel and Bootstrap 4.2.1 and would like to display a form label over two required in-line text fields. I can get the label over the two fields by placing the form label outside of a form group but I am unable to get the red asterisk (*) display next to the form label. I've placed my code here in jsfiddle.
<label for="contact_first_name" class="form-label required">Contact Name</label>
<div class="form-group mb-3">
<div class="row">
<div class="col-md-6">
<input class="form-control" id="contact_first_name" name="contact_first_name" type="text"
placeholder="First Name" value="" required>
</div>
<div class="col-md-6">
<input class="form-control" id="contact_last_name" name="contact_last_name" type="text"
placeholder="Last Name" value="" required>
</div>
</div>
</div>
Try adding a span tag with class="text-danger" or style="color:red" inside the label tag and the * in it. Either way, you will get an * sign with the label.
Below, I have used the bootstrap approach of adding class="text-danger" to the span tag.
<label for="contact_first_name" class="form-label required">Contact Name
<span class="text-danger">*</span>
</label>
<div class="form-group mb-3">
<div class="row">
<div class="col-md-6">
<input class="form-control" id="contact_first_name" name="contact_first_name" type="text"
placeholder="First Name" value="" required>
</div>
<div class="col-md-6">
<input class="form-control" id="contact_last_name" name="contact_last_name" type="text"
placeholder="Last Name" value="" required>
</div>
</div>
</div>
Here is the link to the Jsfiddle.
#AhmadKarimi Thank you for your comment and solution. I just figured it out (by accident) while working on a different form. I needed to drop the label form control down one level inside of the form-group. It doesn't appear to work in jfiddle though.
<div class="form-group mb-3">
<label for="contact_first_name" class="form-label required">Contact Name</label>
<div class="row">
<div class="col-md-6">
<input class="form-control" id="contact_first_name"
name="contact_first_name" type="text"
placeholder="First Name" value="" required>
</div>
<div class="col-md-6">
<input class="form-control" id="contact_last_name"
name="contact_last_name" type="text"
placeholder="Last Name" value="" required>
</div>
</div>
</div>
I have two almost identical forms. One is meant to edit an item, and the other is meant to create an item. For some reason, the create-form does not react at all to submit button clicks, while the edit/update form works exactly as expected. I can not find any differences between the two that should result in this behavior.
I am as sure as I can be that this has nothing to do with back end. I have monitored network activity, ant the submit button for the create-form does not activate any kind of network activity at all.
Working update form:
#extends ('layout')
#section('middle-content')
<div class="wrapper">
<div id="page" class="container">
<h4>Edit Competition Category</h4>
<form method="POST" action="/competition-categories/{{$competitionCategory->id}}">
#csrf
#method('PUT')
<div class="form-group row">
<label for="competition-category-name-input" class="col-4 col-form-label">Name</label>
<div class="col-8">
<input id="competition-category-name-input" name="name" type="text" class="form-control" required="required" value="{{ $competitionCategory->name }}">
</div>
</div>
<div class="form-group row">
<label for="competition-category-abbreviation-input" class="col-4 col-form-label">Abbreviation</label>
<div class="col-8">
<input id="competition-category-abbreviation-input" name="abbreviation" type="text" class="form-control" required="required" value="{{ $competitionCategory->abbreviation }}">
</div>
</div>
<div class="form-group row">
<div class="offset-4 col-8">
<button name="submit" type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
</div>
#endsection
Non-responding create-form:
#extends ('layout')
#section('middle-content')
<div class="wrapper">
<div id="page" class="container">
<h4>New Competition Category</h4>
<form method="POST" action="/competition-categories"></form>
#csrf
<div class="form-group row">
<label for="competition-category-name-input" class="col-4 col-form-label">Name</label>
<div class="col-8">
<input id="competition-category-name-input" name="name" type="text" class="form-control" required="required">
</div>
</div>
<div class="form-group row">
<label for="competition-category-abbreviation-input" class="col-4 col-form-label">Abbreviation</label>
<div class="col-8">
<input id="competition-category-abbreviation-input" name="abbreviation" type="text" class="form-control" required="required">
</div>
</div>
<div class="form-group row">
<div class="offset-4 col-8">
<button name="submit" type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
</div>
#endsection
This line: <form method="POST" action="/competition-categories"></form>
of your non working form, please remove </form> you started and closed it that's why.
What should I do to get my form working? My website and everything is set up. I just can't get my form working. Can I do it from rdp? or firezila server?
<form>
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<input type="text" class="form-control" required="required" placeholder="Name">
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group">
<input type="text" class="form-control" required="required" placeholder="Email address">
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<textarea name="message" id="message" required="required" class="form-control" rows="3" placeholder="Message"></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Submit Request</button>
</div>
</div>
</div>
</div>
</form>
Submit your form to php and send the mail, ulter the code as below and consider adding a subject field too:
<form name="nameforform" action="thephpfilename.php" method="POST">
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<input type="text" class="form-control" required="required" placeholder="Name" name="name">
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group">
<input type="text" class="form-control" required="required" placeholder="Email address" name="email">
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<textarea name="message" id="message" required="required" class="form-control" rows="3" placeholder="Message" name="message"></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Submit Request</button>
</div>
</div>
</div>
</div>
</form>
Then create a php file (eg: thefilename.php) [besure to change the action attribute of the form element to that of the created php file's name.
The php file should have the following code:
<?php
$to = $_POST['email'];
$subject = '';
$message = $_POST['message'];
$headers = 'From:'. $_POST['name'] . "\r\n" .
'X-Mailer: PHP/' . phpversion();
mail($to, $subject, $message, $headers);
?>
It would work, be sure to tweak your server's settings and also specify more info in the question next time.
Lastly how it works,
On submitting the form the browser sends a get/post request to the file specified on the action attribute of the form element. The php
file handles the request and does the needy. The data is stored with
reference to the name attribute of the input and textarea elements.
The data can be stored as arrays too. Here we use the php's mail()
function to send the mail using appropriate headers. HTML or bootstrap
cannot send mail independently without server intervention.
Be sure to comment for more info and other help, enjoy out there.
I am trying to get a value from a Servlet to an input box of a JSP using Ajax. I have managed to get that value to an Alert box. But it didn't work when I tried to get that value into an input box. Please see the following code.
This is the ajaxtTestServlet
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
{
response.setContentType("text/html");
String text = "some text";
response.setCharacterEncoding("UTF-8");
response.getWriter().write(text);
}
There is where the input box with the id "firstName" is.
<button type="button" class="close" data-dismiss="modal" aria-
hidden="true">×</button>
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"> <img src="images/arrow-back-512.png" width="30px" height="30px"> <small>Back</small> <span id="myModalLabel" style="margin-left:20px;"><font size="+2"><b>Edit New Member</b></font></span> </div>
<div class="modal-body">
<form class="form-horizontal" method="post" action="EditOnlySrvlt?idEmployee=<%=request.getParameter("idEmployee")%>"" >
<fieldset id="modal_form">
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">First Name</label>
<div class="col-md-6">
<input name="firstName" id="firstName" type="text" class="form-control input-md" >
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Middle Name</label>
<div class="col-md-6">
<input name="middleName" type="text" class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Last Name</label>
<div class="col-md-6">
<input name="lastName" type="text" class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Date Of Birth</label>
<div class="col-md-6">
<input name="dateOfBirth" type="date" class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Passport Number</label>
<div class="col-md-6">
<input name="passportNumber" type="text" class="form-control input-md">
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Edit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
<!-- /Edit Job modal -->
this is the Script
<script>
$(function() {
//twitter bootstrap script
$("tr#somebutton").click(function(){
$.get("ajaxTestSrvlt", function(responseText) { // Execute Ajax GET request on URL of "someservlet" and execute the following function with Ajax response text...
$('#firstName').text(responseText) ; // Locate HTML DOM element with ID "somediv" and set its text content with the response text.
});
});
});
</script>
if it's a input, you should give
$('#firstName').val(responseText);