Using bootstrap and can not set an input to hidden. It can be easily set to hidden with JS using
document.getElementById("inputCommentsBrand").style.visibility = "hidden";
but I would like it to be hidden by default.
<div class="form-group">
<label for="inputComments" class="col-sm-2 control-label">Markings</label>
<div class="col-sm-4">
<div><input hidden type="text" class="form-control" id="inputCommentsBrand" name="inputFlags[]" placeholder="Brand and Location: Sbar RH"></div>
<div><input type="text" class="form-control" id="inputCommentsEarTag" name="inputFlags[]" placeholder="Ear Tag Color & #: Green 165"></input></div>
</div>
</div>
Use <body onload="myFunction()"> to hide the field.
Below is the running example.
<script>
function myFunction() {
document.getElementById("inputCommentsBrand").style.visibility = "hidden";
}
</script>
<html>
<body onload="myFunction()">
<div class="form-group">
<label for="inputComments" class="col-sm-2 control-label">Markings</label>
<div class="col-sm-4">
<div><input type="text" class="form-control" id="inputCommentsBrand" name="inputFlags[]" placeholder="Brand and Location: Sbar RH"></div>
<div><input type="text" class="form-control" id="inputCommentsEarTag" name="inputFlags[]" placeholder="Ear Tag Color & #: Green 165"></input></div>
</div>
</div>
</body>
</html>
Instead of visibility:hidden
Use display:none
Related
On clicking submit button how to hide the below div class. I have tried >with div id but div class is not working as exactly as div id. As I have
written the code but It was closing entire window. Below is the code without adding jquery.
<div class="w3-container w3-light-grey w3-padding-32 w3-padding-large" id="contact">
<div class="w3-content" style="max-width:600px">
<h4 class="w3-center"><b>Please fill the form to continue</b></h4>
<script type="text/javascript">var submitted=false;</script>
<!--Update the URL for thank you page on form submit -->
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;"
onload="if(submitted) {window.location='';}"></iframe>
<!-- Update the Google forms URL in action-->
<form class= 'form1' action="https://docs.google.com/forms/u/0/d/a/1FAIlQLDFDHBaSVqkaf1BLTQ1MeRa1NH8OGw4Tpj_SZUvRj-QUTYu9Qw/formResponse" method="post" target="hidden_iframe" onsubmit="return validateForm(); ">
<div class="w3-section">
<label>Name</label>
<input class="w3-input w3-border" type="text" placeholder="Name" id="name" required name="entry.482263238">
</div>
<div class="w3-section">
<label>Email</label>
<input class="w3-input w3-border" type="text" placeholder="Email" id="email" required name="entry.227786006">
</div>
<div class="w3-section">
<label>Phone</label>
<input class="w3-input w3-border" type="text" placeholder="Phone" id="phone" required name="entry.30499006">
</div>
<div class="w3-section">
<button class="w3-button w3-block w3-black w3-margin-bottom" type="submit">submit</button>
</div>
</form>
</div>
</div>
In case you want to hide the entire form, you can add form.style.display = "none" to your validateForm() function:
const form = document.querySelector(".w3-container");
function validateForm() {
form.style.display = "none";
}
The same methodology applies if you want to hide some other div, just select it and apply element.style.display = "none";.
JSfiddle: Link
I am developing a system I have been asked to do but the form elements are not clickable to enter any info in the fields, I have tried moving the form tag to above the very first div in the code below in case it was the issue but did not work unfortunately. I am not sure what else to try, can someone have a look at the code below please
Update: I have got the form elements working by adding zindex: 9999; to .form-group class in the CSS but now the datetimepicker is appearing behind the select dropdown menu. I have uploaded a screenshot of the issue to the link below
Here is a screenshot of my issue:
My code:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-12" id="detail">
<form name="addData" id="addData" action="" method="post">
<div class="row">
<div class="form-group col-lg-3">
<input type="hidden" name="eventID" id="eventID" class="form-control">
<label for="StartDate">Start Date: </label>
<input type="date" class="form-control" required name="StartDate" id="StartDate" />
</div>
<div class="form-group col-lg-3">
<label for="StartTime" style="margin: 0 0 15px 0;">Start Time: </label>
<div class='input-group date' id='datetimepicker3'>
<input name="StartTime" id="StartTime" type='text' required class="form-control" />
<span class="input-group-addon">
<i class="fa fa-clock-o"></i>
</span>
</div>
<script type="text/javascript">
$(function() {
$('#datetimepicker3').datetimepicker({
format: 'LT'
});
});
</script>
</div>
<div class="form-group col-lg-3">
<label for="StartDate">End Date: </label>
<input type="date" required class="form-control" name="EndDate" id="EndDate" />
</div>
<div class="form-group col-lg-3">
<label for="EndTime" style="margin: 0 0 15px 0;">End Time: </label>
<div class='input-group date' id='datetimepicker4'>
<input name="EndTime" id="EndTime" required type='text' class="form-control" />
<span class="input-group-addon">
<i class="fa fa-clock-o"></i>
</span>
</div>
<script type="text/javascript">
$(function() {
$('#datetimepicker4').datetimepicker({
format: 'LT'
});
});
</script>
</div>
</div>
<div class="row">
<div class="form-group col-lg-3">
<label for="riders_name">Riders Name: </label>
<select class="form-control" style="height: 34px;" required name="riders_name" id="riders_name"></select>
</div>
<div class="form-group col-lg-3">
<label for="horses_name">Horses Name : </label>
<select class="form-control" style="height: 34px;" required name="horses_name" id="horses_name">
<option value="">--Empty--</option>
</select>
</div>
<div class="form-group col-lg-3">
<label for="instructor_name">Instructor Name : </label>
<select class="form-control" style="height: 34px;" required name="instructor_name" id="instructor_name">
<option value="">--Empty--</option>
</select>
</div>
<div class="form-group col-lg-3">
<label for="groom_name">Groom Name : </label>
<select class="form-control" style="height: 34px;" required name="groom_name" id="groom_name">
<option value="">--Empty--</option>
</select>
</div>
</div>
<br>
<div class="row">
<div class="form-group col-lg-9">
<label for="comments">Comments : </label>
<textarea name="comments" id="comments" class="form-control"></textarea>
</div>
<div class="form-group col-lg-3">
<label for="Repeat">Repeat : </label>
<select class="form-control" style="height: 34px;" required name="Repeat" id="Repeat">
<option value="0">none</option>
<option value="1">Daily</option>
<option value="2">Weekly</option>
<option value="3">Monthly</option>
</select>
</div>
</div>
<div class="row">
<div class="form-group col-lg-1">
<button type="submit" class="btn btn-primary" name="submit" id="submit">Submit</button>
</div>
<div class="form-group col-lg-1">
<button type="submit" class="btn btn-danger" name="cancel" id="cancel">Cancel</button>
</div>
<div class="form-group col-lg-5">
</div>
<div class="form-group col-lg-5">
</div>
</div>
</form>
</div>
<script>
$.getJSON("fullcalendar/getriders.php", function(data) {
var select = $('#riders_name'); //combo/select/dropdown list
if (select.prop) {
var options = select.prop('options');
} else {
var options = select.attr('options');
}
$('option', select).remove();
$.each(data, function(key, value) {
options[options.length] = new Option(value['name'], value['id']);
});
});
$.getJSON("fullcalendar/getinstructors.php", function(data) {
var select = $('#instructor_name'); //combo/select/dropdown list
if (select.prop) {
var options = select.prop('options');
} else {
var options = select.attr('options');
}
$('option', select).remove();
$.each(data, function(key, value) {
options[options.length] = new Option(value['name'], value['id']);
});
});
$.getJSON("fullcalendar/getgrooms.php", function(data) {
var select = $('#groom_name'); //combo/select/dropdown list
if (select.prop) {
var options = select.prop('options');
} else {
var options = select.attr('options');
}
$('option', select).remove();
$.each(data, function(key, value) {
options[options.length] = new Option(value['name'], value['id']);
});
});
</script>
I see several empty <select></select> tags in your form. I suspect you are intending text fields there? If so you need to replace <select></select> with <input type="text" />.
Example, this:
<label for="riders_name">Riders Name: </label>
<select class="form-control" style="height: 34px;" required name="riders_name" id="riders_name"></select>
...should be:
<label for="riders_name">Riders Name: </label>
<input class="form-control" type="text" style="height: 34px;" required name="riders_name" id="riders_name" />
Select drop down always higher z-index set by default by browsers. You have two row one underneath other. You should in top row set higher z-index value with position: relative; then I hope it will work as expected.
Add CSS code with following way:
.higher-z-index {
postion: relative; // This line help z-index work relatively
z-index: 999;
}
Your markup will be something like that:
<div class="row higher-z-index">
.....
....
</div>
<div class="row">
.....
....
</div>
Why this approach:
You should keep it mind this is dose not matter how much z-index value applied in .form-group selector it will work for only sibling elements. But in your case it is going behind of next row elements because modern browsers set by default higher z-index in each next sibling elements until we set explicitly. So underneath row getting higher z-index than top row. So it is dose not matter how many higher z-index value are applied inside of top row container, all will go behind of next row container.
I want to display the value in the input text field using ng-bind directive.Can someone help me with this?
<div class="col-md-3">
<input class="form-control" disabled="disabled" value="ng-bind="type"">
</div>
Controller:
$scope.type = $scope.name[0].type_of_request;
I am trying to print this type in html page.I am not able to achieve that.Would someone help
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope, $timeout) {
$scope.type = "test";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<html ng-app="myApp">
<div ng-controller="MyCtrl">
<input class="form-control" disabled="disabled" ng-model="type">
</div>
</html>
ng-model works to be fine here, use it:
<html ng-app="myApp">
<div ng-controller="MyCtrl">
<input class="form-control" disabled="disabled" ng-model="type">
</div>
</html>
Or Use ng-value="type"
Check the below example:
<div ng-app="">
<p>Enter your Name: <input type="text" ng-model="name"></p>
<p>Hello <span ng-bind="name"></span>!</p>
<p>Hi <input type="text" value="{{name}}" /></p>
<p>Ahoy <input type="text" ng-value="name" /></p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
Use ng-model instead
If you need one way binding then
<input class="form-control" disabled="disabled" ng-model="::type">
else if you need two way binding
<input class="form-control" disabled="disabled" ng-model="type">
My current code is :
<div class="row" id="loginForm">
<p>Username : </p>
<input type="text" class="form-control input" id="usr">
</div>
This shows the input box in the next line, how can i display the p tag and the input box on the same line?
Paragraphs are usually displayed as a block of their own.
While you can change the styling of it to change that, what you have is not a paragraph, so you shouldn't mark it up with the p element.
Use a label element instead. Aside from being the correct markup, it is an inline element so will render on the same line by default.
<div class="row" id="loginForm">
<label for="usr">Username : </label>
<input type="text" class="form-control input" id="usr">
</div>
display: inline-block is your friend:
p {
display: inline-block;
}
<div class="row" id="loginForm">
<p>Username:</p>
<input type="text" class="form-control input" id="usr">
</div>
You can use table without border. So it looks very tasteful and easy.
<div class="row" id="loginForm">
<table border="0">
<tr>
<td><p>Username : </p></td>
<td><input type="text" class="form-control input" id="usr"></td>
</tr>
</table>
</div>
Use Bootstrap form-horizontal
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" for="usr">Username:</label>
<div class="col-sm-10">
<input type="text" class="form-control input" id="usr">
</div>
</div>
</form>
You can simply wrap your input into tag so you don't need to use for attribute.
HTML:
<div class="row" id="loginForm">
<label
>Username :
<input type="text" class="form-control input" id="usr">
</label>
</div>
CSS:
label {
display: block;
}
label > p {
display: inline-block;
}
You could just use a span tag,
<div class="row" id="loginForm">
<p>Username : <span><input type="text" class="form-control input" id="usr"></span></p>
</div>
with boostrap you only add class form-horizontal and this work for you
<form class="form-inline">
<div class="form-group">
<label class="sr-only"></label>
<input class="form-control" type="text"/>
</div>
<div class="form-group">
<label class="sr-only"></label>
<input class="form-control hello" type="text"/>
</div>
<div class="form-group">
<label class="sr-only"></label>
<input class="form-control" type="text"/>
</div>
<input type="submit" class="btn" value="submit"/>
</form>
How would I make the middle input have a width of 500px? I tried wrapping it in a row with col-xs-10, but that also didn't work. Here is a jsfiddle demo.
The following CSS rule would work:
.form-inline .form-control.hello {
display: inline-block;
width:500px;
}
JS Fiddle: http://jsfiddle.net/uvdU8/3/
The simplest solution would probably be to add style="width:500px;" to the input.
Updated JSFiddle: http://jsfiddle.net/ThomasMcNaught/uvdU8/1/
If you want it to be applied through CSS then try an ID.
input#width {
width: 500px;
}
Demo: http://jsfiddle.net/ThomasMcNaught/uvdU8/2/