What I mean is.
I've implemented a bootstrap datetimepicker here. https://eonasdan.github.io/bootstrap-datetimepicker/
my question is.
if you have an input box how do you disable it and only let the inputs of the datetimepicker be valid? because the user might input an invalid format of the date.
the code below is taken here https://eonasdan.github.io/bootstrap-datetimepicker/#minimum-setup
code:
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</div>
</div>
You should be able to use the readonly attribute on the text input, and jQuery will still be able to edit its contents.
<input type='text' id='foo' readonly>
You need to add the disabled attribute to your field, like so:
<input type='text' class="form-control" disabled="true">
And technically, these other options will also work fine:
value of 'disabled'
<input type='text' class="form-control" disabled="disabled">
or
no value at all, just the name of the attribute
<input type='text' class="form-control" disabled>
Related
I have a form with multiple input fields where users may choose to enter a value or not. Next to each input field is a hidden input field that will send a specific id unique to the previous input field. On form submission, all blank input fields are disabled. This I got to work using this code.
function disableEmptyInputs(form) {
var controls = form.elements;
for (var i = 0, iLen = controls.length; i < iLen; i++) {
controls[i].disabled = controls[i].value == '';
}
}
I now want to also disable the hidden inputs if their primary visible input field is null
<div class="col-md-4">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<input name="Pay" placeholder="Amount for A" class="form-control" type="text" />
<input type="hidden" name="PayId" value="A" />
</div>
</div>
<div class="col-md-4">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<input name="Pay" placeholder="Amount for B" class="form-control" type="text" />
<input type="hidden" name="PayId" value="B" />
</div>
</div>
Any help will be really appreciated. The form submits to a c# backend where I am able to filter out all blanks If I allowed all blanks to be submitted but I felt if I could filter all blanks by making them disabled at the client side in addition to server side that will be better.
You can use .each loop to iterate through your form elements and then compare if the value of input is "" simply disable that input and also the input next to it using .next().
Demo Code :
$("form").on("submit", function() {
//loop through input(exclude hidden input)..select..etc
$("form").find("input:not(:hidden),select").each(function() {
//if the value is empty
if ($(this).val() == "") {
$(this).prop("disabled", true) //disable
$(this).next().prop("disabled", true) //also next field (hidden) disable
}
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div class="col-md-4">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<input name="Pay" placeholder="Amount for A" class="form-control" type="text" value="abc" />
<input type="hidden" name="PayId" value="A" />
</div>
</div>
<div class="col-md-4">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<input name="Pay" placeholder="Amount for B" class="form-control" type="text" />
<input type="hidden" name="PayId" value="B" />
</div>
</div>
<button>Click me ..</button>
</form>
So i have done "select option" when user select i need show some data in inputs and it works,but only when i chose any value from select it shows my inputs,but i need always show my inputs,because i need this inputs for another actions
It is my select.
<select size="2" style="height: 200px;width: 200px" class="selection
data-bind="options:solutions, optionsText:'name',value:selectedSolutions"></select>
It is inputs which i must show always,they show only when i chose parameter from select which above
<form class="col-md-5" data-bind="with: selectedSolutions" style="margin-left:128px;">
<div class="form-group">
<label for="inputsm">Solution Name:</label>
<input class="form-control input-sm" data-bind="value:name" id="inputsm" type="text">
</div>
<div class="form-group">
<label for="inputdefault">Brief description:</label>
<input class="form-control " style="height: 100px" data-bind="value:briefDescription" id="inputdefault" type="text">
</div>
<div class="form-group">
<label for="url">Read more:</label>
<input class="form-control input-lg" data-bind="value:readMore" style="height:150px" data-bind="value:" id="url" type="text">
</div>
<div class="form-group">
<label for="inputlg">Solution manufacture URl:</label>
<input class="form-control input-sm" id="inputlg" data-bind="value:manufactureUrl" type="text">
</div>
</form>
thanks for help and sorry for english.
Because you are using with binding, anything inside your form tag will not being shown unless selectedSolutions is not null.
I guess inside your ViewModel, you are initializing the selectedSolutions property like this viewModel.selectedSolutions = ko.observable();
So, you have to set a default value for selectedSolutions to make sure anything inside your form tag is always shown. Something likes below:
viewModel.selectedSolutions = ko.observable({
name: "", // you could put any default value you want here, not just blank
briefDescription: "",
readMore: "",
manufactureUrl: ""
});
I have two inline radio button in a form using Bootstrap. But when I validate it then the message showing inside of first radio button instead of showing after second radio button. I would like to show that radio button message like Email and password. Here is the screenshot of my form.
Without Validation:
With Validation:
HTML Form:
<form name="registration" action="">
<div class="signingInner">
<h4 style="font-weight: 500; text-align:center; font-size: 20px ">Sign in to your Account</h4>
<div class="form-group">
<label for="emailId">Email Address:</label>
<input type="text" class="form-control" id="login_email" name="login_email" placeholder="Please enter Email address">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" name="login_password" id="login_password" placeholder="●●●●●●">
</div>
<div class="form-group">
<div class="radio-inline" style="padding-left: 100px;">
<input type="radio" id="user" name="LoginMode" value="user" >
As <strong>User</strong> </>
</div>
<div class="radio-inline" style="padding-left: 30px;">
<input type="radio" id="company" name="LoginMode" value="company" >
As <strong>Company</strong></>
</div>
</div>
<input type="submit" name="btnLogin" class="btn btn-lg btn-primary btn-block" value="Login"></input>
</div>
</form>
Plunker Link:
https://plnkr.co/edit/0vpvU9QbRu8Mlwbi04ti?p=preview
The trick is to use errorPlacement callback function.
So I am checking whether the rendered type is radio button then I am tracking the appropriate topmost parent div and inserting the message after that.
errorPlacement: function(error, element) {
if ( element.is(":radio") ) {
error.insertAfter( element.parent().parent().parent().parent());
}
else { // This is the default behavior of the script for all fields
error.insertAfter( element );
}
},
See the updated plunkr here.
And the output looks like
EDIT:
I have finally updated the original plunkr provided by you.
I have to hide the fields password and verify password from UI screen and assign a default password xyz for the new users created. Please suggest how I can do that in the below snippet:
<div class="field-row">
<span class="crud-label">${msg("bel.password")}: *</span>
</div>
<div class="field-row" type="hidden">
<input class="crud-input" id="${el}-create-password" type="password" maxlength="100" />
</div>
<div class="field-row">
<span class="crud-label">${msg("label.rifypassword")}: *</span>
</div>
<div class="field-row" type="hidden">
<input class="crud-input" id="${el}-create-verifypassword" type="password" maxlength="100" />
</div>
Seeing that no one helped you yet, let me help you here :).
You can set a default value on an input field with the "value" property.
Use this HTML:
<div class="field-row">
<span class="crud-label">${msg("bel.password")}: *</span>
</div>
<div class="field-row hidden" type="hidden">
<input class="crud-input" id="${el}-create-password" value="defaultPassword" type="password" maxlength="100" />
</div>
<div class="field-row">
<span class="crud-label">${msg("label.rifypassword")}: *</span>
</div>
<div class="field-row hidden" type="hidden">
<input class="crud-input" id="${el}-create-verifypassword" value="defaultPassword" type="password" maxlength="100" />
</div>
This will result in your default password values to be "defaultPassword".
Now, to hide these fields, you can use CSS:
.hidden {
display: none;
}
Note that in the HTML I added extra class names. You add extra class names by just adding more to the class="", seperated by a space.
If you use jQuery or something, you can also set the display to none with:
$(".hidden").css("display", "none");
Hope this helped you!
If you hide the password & confirm password controls in alfresco share, the form will not be sent to the server.
So disable them and set the default values for it.
Hope the below code helps you.
<div class="field-row">
<input class="crud-input" id="${el}-create-password" type="password" maxlength="100" value="admin" disabled="disabled"/>
</div>
<div class="field-row">
<span class="crud-label">${msg("label.verifypassword")}: *</span>
</div>
<div class="field-row">
<input class="crud-input" id="${el}-create-verifypassword" type="password" maxlength="100" value="admin" disabled="disabled"/>
</div>
I've implemented this datetimepicker for Bootstrap: http://www.malot.fr/bootstrap-datetimepicker/
It works fine on my PC, but when I open it from a phone browser, the picker doesn't show up under the field. I have to scroll all the way to the bottom of the page to see it.
Also, the input field is not disabled. Tapping on it brings up the keyboard, and it's possible to enter text manually (I don't want that to be possible). I guess I can disable it in code, but in the examples it looks like it should be disabled by default?
I'll post more code soon, but if anyone already know what may be the problem let me know. Thanks :)
<div class="form-group">
<label for="startpicker" class="col-sm-1 control-label">Start:</label>
<div class="col-sm-3">
<div class='input-group date'>
<input type='text' name="start" class="form-control datepicker" id="startpicker"/>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
</div>
<div class="form-group">
<label for="sluttpicker" class="col-sm-1 control-label">Slutt:</label>
<div class="col-sm-3">
<div class='input-group date'>
<input type='text' name="slutt" class="form-control datepicker" id="sluttpicker" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('.datepicker').datetimepicker(
{
format: "dd.mm kl.hh:ii",
autoclose: "true",
todayBtn: "true",
minuteStep: 15,
pickerPosition: "bottom-left"
}
);
$('.selectpicker').selectpicker({
style: "btn-primary"
});
});
</script>
Perhaps, you should try substituting class col-sm-3 with class col-xs-3 on the div inside <div class="form-group">
I know this is quite late but a good option would be to use data-date-container="#datepicker-container" and then create a empty div with an id to match the name of the data-date-container so in this case its id will be datepicker-container