I want to add readonly attribute on all input fields using javascript. I have done for single input field using this $('#someid').prop('readonly', true); but I want to add to all input field in Edit Mode.
Input Fields
<div class="form-group">
<label for="Barcode">Barcode: </label>
<input name="Barcode" id="Barcode" class="form-control" value="<?=$data['Barcode']?>" placeholder="Barcode">
</div>
<div class="form-group">
<label for="ApplicantName">ApplicantName: </label>
<input name="ApplicantName" id="ApplicantName" class="form-control" value="<?=$data['ApplicantName']?>" placeholder="ApplicantName">
</div>
<div class="form-group">
<label for="SubBarcode">Reference No: </label>
<input name="SubBarcode" id="SubBarcode" class="form-control" value="<?=$data['SubBarcode']?>" placeholder="Reference No">
</div>
<div class="form-group">
<label for="ClientName">Client Name: </label>
<input name="ClientName" id="ClientName" class="form-control" value="<?=$data['ClientName']?>" placeholder="Client Name">
</div>
<div class="form-group">
<label for="ClientRefNo">Client Reference No: </label>
<input name="ClientRefNo" id="ClientRefNo" class="form-control" value="<?=$data['ClientRefNo']?>" placeholder="Client Reference No">
</div>
<div class="form-group">
<label for="DateOfBirth">Date Of Birth: </label>
<input name="DateOfBirth" id="DateOfBirth" class="datetimepicker-month form-control" value="<?=$data['DateOfBirth']?>" placeholder="Date Of Birth">
</div>
<div class="form-group">
<label for="PassportNo">Passport No: </label>
<input name="PassportNo" id="PassportNo" class="datetimepicker-month form-control" value="<?=$data['PassportNo']?>" placeholder="Passport No">
</div>
<div class="form-group">
<label for="AKAName">AKAName: </label>
<input name="AKAName" id="AKAName" class="datetimepicker-month form-control" value="<?=$data['AKAName']?>" placeholder="AKAName">
</div>
<div class="form-group">
<label for="Gender">Gender: </label>
<input name="Gender" id="Gender" class="datetimepicker-month form-control" value="<?=$data['Gender']?>" placeholder="Gender">
</div>
<div class="form-group">
<label for="Nationality">Nationality: </label>
<input name="Nationality" id="Nationality" class="datetimepicker-month form-control" value="<?=$data['Nationality']?>" placeholder="Nationality">
</div>
<div class="form-group">
<label for="ArabicName">Arabic Name: </label>
<input name="ArabicName" id="ArabicName" class="datetimepicker-month form-control" value="<?=$data['ArabicName']?>" placeholder="Arabic Name">
</div>
Is there any short way that i can dynamically add read-only attribute to all input fields.
You can use element selector with attribute value selector to select all the textboxes and apply the readonly property to all of the selected elements.
$('input[type="text"]').prop('readonly', true);
To select all the textboxes in the form
$('yourFormSelector input[type="text"]').prop('readonly', true);
As an alternative to attribute value selector, you can also use :text selector to select all textboxes.
$(':text').prop('readonly', true);
You can use class for that
$('.form-control').prop('readonly', true);
you can specify a common class (recommended) or just globally target all the input elements in the form (not recommended)
$('input[type="text"]').prop('readonly', true);
Try this:
$('.classname').attr('readonly', 'readonly');
OR you can use this:
$('.classname').prop('readonly', true);
this worked for me
<script>
$(function () {
$('input[type="text"]').prop('readonly', true);
});
</script>
Related
I have been told i need to do as the title says and use separate divs for each set of inputs and labels and place ID in a hidden input. could any one give me advice on how to do this please as i am just learning at the moment, my code for my labels and inputs are below:::
```
<label for="editEmployeeFirstNameInput" class="form-label">First Name</label>
<input type="text" class="form-control" id="editEmployeeFirstNameInput" required>
<label for="editEmployeeLastNameInput" class="form-label">Last Name</label>
<input type="text" class="form-control" id="editEmployeeLastNameInput" required>
<label for="editEmployeePositionInput" class="form-label">Position</label>
<input type="text" class="form-control" id="editEmployeePositionInput">
<label for="editEmployeeEmailInput" class="form-label">Email</label>
<input type="email" class="form-control" id="editEmployeeEmailInput" required>
<label for="editEmployeeDepartmentSelect" class="form-label">Department</label>
<select id="editEmployeeDepartmentSelect" class="form-select" aria-label="Default select example">
```
<div>
<label for="editEmployeeFirstNameInput" class="form-label">First Name</label>
<input type="text" class="form-control" id="editEmployeeFirstNameInput" required>
</div>
<div>
<label for="editEmployeeLastNameInput" class="form-label">Last Name</label>
<input type="text" class="form-control" id="editEmployeeLastNameInput" required>
</div>
<div>
<label for="editEmployeePositionInput" class="form-label">Position</label>
<input type="text" class="form-control" id="editEmployeePositionInput">
</div>
<div>
<label for="editEmployeeEmailInput" class="form-label">Email</label>
<input type="email" class="form-control" id="editEmployeeEmailInput" required>
</div>
<div>
<label for="editEmployeeDepartmentSelect" class="form-label">Department</label>
<select id="editEmployeeDepartmentSelect" class="form-select" aria-label="Default select example">
</div>
<input type="hidden" id="id" name="id" />
I am having an HTML template for displaying my form data to allow users to view as well as edit their data:-
<div id="div_id_first_name" class="form-group">
<label for="id_first_name" class="requiredField"> First name<span class="asteriskField">*</span> </label>
<div class="">
<input type="text" name="first_name" value="{{p_form.first_name}}" maxlength="20" class="textinput textInput form-control" required id="id_first_name" />
</div>
</div>
<div id="div_id_last_name" class="form-group">
<label for="id_last_name" class="requiredField"> Last name<span class="asteriskField">*</span> </label>
<div class=""><input type="text" name="last_name" value="{{p_form.last_name}}" maxlength="20" class="textinput textInput form-control" required id="id_last_name" /></div>
</div>
<div id="div_id_id_no" class="form-group">
<label for="id_id_no" class="requiredField"> ID No.<span class="asteriskField">*</span> </label>
<div class=""><input type="text" name="id_no" value="{{p_form.}}" maxlength="20" class="textinput textInput form-control" required id="id_id_no" /></div>
</div>
<div id="div_id_phone_no" class="form-group">
<label for="id_phone_no" class="requiredField"> Phone No.<span class="asteriskField">*</span> </label>
<div class=""><input type="text" name="phone_no" value="{{p_form.}}" maxlength="20" class="textinput textInput form-control" required id="id_phone_no" /></div>
</div>
<div id="div_id_cgpa" class="form-group">
<label for="id_cgpa" class="requiredField"> CGPA<span class="asteriskField">*</span> </label>
<div class=""><input type="text" name="cgpa" value="{{p_form.}}" maxlength="20" class="textinput textInput form-control" required id="id_cgpa" /></div>
</div>
<div id="div_id_degree" class="form-group">
<label for="id_degree" class="requiredField"> Degree<span class="asteriskField">*</span> </label>
<div class=""><input type="text" name="degree" value="{{p_form.}}" maxlength="20" class="textinput textInput form-control" required id="id_degree" /></div>
</div>
<div id="div_id_stream" class="form-group">
<label for="id_stream" class="requiredField"> Stream<span class="asteriskField">*</span> </label>
<div class=""><input type="text" name="stream" value="{{p_form.}}" maxlength="20" class="textinput textInput form-control" required id="id_stream" /></div>
</div>
I am rendering this page with the view funstion:-
def profile(request):
if request.method == 'POST':
u_form = UserUpdateForm(request.POST, instance=request.user)
p_form = ProfileUpdateForm(request.POST,
request.FILES,
instance=request.user.profile)
if u_form.is_valid() and p_form.is_valid():
u_form.save()
p_form.save()
messages.success(request, f'Your account has been updated!')
return redirect('profile')
else:
u_form = UserUpdateForm(instance=request.user)
p_form = ProfileUpdateForm(instance=request.user.profile)
v_form = ProfileViewForm(instance=request.user.profile)
context = {
'u_form': u_form,
'p_form': p_form,
'v_form': v_form
}
return render(request, 'users/profile.html', context)
I am trying to get this:-
But The view turns out to look something like this:-
I am unable to figure out how can I display those values.
Problem is that p_form.first_name is an input field itself. Please try to add .value fields this way:
value="{{p_form.first_name.value}}"
I have this radio button in HTML.
<div class="radio">
<label>
<input id="vendor" type="radio" ng-model="c.data.cvendor" name="customerType" value="cvendor" ng-true-value="CVendor" ng-false-value="false">
${CVendor}
</label>
</div>
Once this option checked, the two fields below should be displayed and are mandatory. How can I achieve this in HTML?
<div class="form-group is-required">
<label for="fieldb">${FieldB}:</label>
<input type="text" class="my-input" ng-model="c.data.fieldb" id="fieldb" placeholder="Enter Field B">
</div>
<div class="form-group is-required">
<label for="fieldc">${FieldC}:</label>
<input type="text" class="my-input" ng-model="c.data.fieldc" id="fieldc" placeholder="Enter Field C">
</div>
Try this ng-if="c.data.cvendor==='cvendor'".
Radio button sets c.data.cvendor to 'cvendor'. Thus you can control the display of two input fields via ng-if
As for the fields to be mandatory, you can try ng-required="true".
<div class="form-group is-required" ng-if="c.data.cvendor==='cvendor'">
<label for="fieldb">${FieldB}:</label>
<input type="text" class="my-input" ng-model="c.data.fieldb" id="fieldb" placeholder="Enter Field B" ng-required="true">
</div>
<div class="form-group is-required" ng-if="c.data.cvendor==='cvendor'">
<label for="fieldc">${FieldC}:</label>
<input type="text" class="my-input" ng-model="c.data.fieldc" id="fieldc" placeholder="Enter Field C" ng-required="true">
</div>
Try This code
var checkBox;
function DemoFunctin() {
checkBox = document.querySelector('input[type="checkbox"]');
var textInput1 = document.querySelector('input[name="first"]');
var textInput2 = document.querySelector('input[name="second"]');
if (textInput1.hasAttribute('required') !== true && textInput2.hasAttribute('required') !== true) {
textInput1.setAttribute('required','required');
textInput2.setAttribute('required','required');
}
else {
textInput1.removeAttribute('required');
textInput2.removeAttribute('required');
}
}
if(checkBox){
checkBox.addEventListener('change',toggleRequired,false);
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<h3>display-two-fields-as-mandatory-based-on-selected-radio-button</h3>
<form>
<p><input type="radio" onclick="DemoFunctin();"/>Check Me to make the Text Box a Required Field</p>
<input type="text" name="first"/>
<input type="text" name="second"/>
<input type="submit" value="Submit" />
</form>
</body>
</html>
You can achieve this by using ng-required. Based on 'c.data.fieldb' value it will become mandatory or non-mandatory. Similarly, for hide and show you can use ng-show / ng-hide.
<div class="form-group is-required">
<label for="fieldb">${FieldB}:</label>
<input type="text" class="my-input" ng-model="c.data.fieldb" id="fieldb" placeholder="Enter Field B" ng-required="c.data.cvendor == 'CVendor'">
</div>
<div class="form-group is-required">
<label for="fieldc">${FieldC}:</label>
<input type="text" class="my-input" ng-model="c.data.fieldc" id="fieldc" placeholder="Enter Field C" ng-required="c.data.cvendor == 'CVendor'">
</div>
I'm new to scripting and trying to understand it better. I have a modal being displayed after clicking a button that has a form inside of it. There is a dropdown box with two selections. The first selection (Single) is meant for all divs and text fields to be displayed with the exception of the Guest text fields since they will be coming alone without a guest.
What I am trying to do is make the text fields show up once the second option (Couple) is selected so that the Guest name fields can be entered, and I can't seem to get them to display so that text can be entered. Here is my code:
<div class="form-group" id="selector">
<label for"selection" class="col-xs-8" control-label>Will you be joining us with a guest?</label>
<select class="form-control" id="selection" name="amount">
<option value="40.00">Single - $40.00</option>
<option value="75.00">Couple - $75.00</option>
</select>
</div>
<div class="form-group">
<label for="first_name" class="col-xs-4" control-label>First Name</label>
<div class="col-xs-8">
<input type="hidden" name="on0" value="First Name">
<input type="text" class="form-control" id="first_name"
name="os0" placeholder="i.e. John" required autofocus>
</div>
</div>
<div class="form-group">
<label for="last_name" class="col-xs-4" control-label>Last Name</label>
<div class="col-xs-8">
<input type="hidden" name="on1" value="Last Name">
<input type="text" class="form-control" id="last_name"
name="os1" placeholder="i.e. Smith" required autofocus>
</div>
</div>
<div class="form-group" id="guestFirst">
<label for="guestFirstName" class="col-xs-4" control-label>Guest's First Name</label>
<div class="col-xs-8" style="display: none">
<input type="hidden" name="on3" value="Guest's First Name">
<input type="text" class="form-control" id="guestFirstName" name="os3"
placeholder="i.e. Jane" autofocus>
</div>
</div>
<div class="form-group" id="guestLast">
<label for="guestLastName" class="col-xs-4" control-label>Guest's Last Name</label>
<div class="col-xs-8">
<input type="hidden" name="on4" value="Guest's Last Name">
<input type="text" class="form-control" id="guestLastName" name="os4"
placeholder="i.e. Smith" autofocus>
</div>
</div>
-----
<script>
$('#selection').on('change', function() {
if ( this.value == '75.00')
{
$("#guestFirstName").show();
}
else
{
$("#guestFirstName").hide();
}
});
</script>
Problem : you set the input field to display via jQuery but set display:none property to the col-xs-8 before that input filed.
Solution: I think you need to hide the div id #guestFirst, #guestLast and show them after select couple from dropdown.
So set those div style display none using css. then show those divs using if else condition on jQuery.
LiveOnFiddle
$('#selection').on('change', function() {
if ( this.value == '75.00')
{
$("#guestFirst, #guestLast").show();
}
else
{
$("#guestFirst, #guestLast").hide();
}
});
#guestFirst, #guestLast{
display:none;
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="form-group" id="selector">
<label for="selection" class="col-xs-8" control-label>Will you be joining us with a guest?</label>
<select class="form-control" id="selection" name="amount">
<option value="40.00">Single - $40.00</option>
<option value="75.00">Couple - $75.00</option>
</select>
</div>
<div class="form-group">
<label for="first_name" class="col-xs-4" control-label>First Name</label>
<div class="col-xs-8">
<input type="hidden" name="on0" value="First Name">
<input type="text" class="form-control" id="first_name"
name="os0" placeholder="i.e. John" required autofocus>
</div>
</div>
<div class="form-group">
<label for="last_name" class="col-xs-4" control-label>Last Name</label>
<div class="col-xs-8">
<input type="hidden" name="on1" value="Last Name">
<input type="text" class="form-control" id="last_name"
name="os1" placeholder="i.e. Smith" required autofocus>
</div>
</div>
<div class="form-group" id="guestFirst">
<label for="guestFirstName" class="col-xs-4" control-label>Guest's First Name</label>
<div class="col-xs-8" >
<input type="hidden" name="on3" value="Guest's First Name">
<input type="text" class="form-control" id="guestFirstName" name="os3"
placeholder="i.e. Jane" autofocus>
</div>
</div>
<div class="form-group" id="guestLast">
<label for="guestLastName" class="col-xs-4" control-label>Guest's Last Name</label>
<div class="col-xs-8" >
<input type="hidden" name="on4" value="Guest's Last Name">
<input type="text" class="form-control" id="guestLastName" name="os4"
placeholder="i.e. Smith" autofocus>
</div>
</div>
I have a new profile form that has multiple required fields, email, password and confirm password. The submit button is set to be disabled if the form is in invalid state. I believe that form should remain in invalid state until user has filled in all the required fields. To my surprise, angular checks my first field only. If it is alone in valid state, submit button gets activated, regardless of states of other fields. I am using angular 1.0.7. What is the reason behind this behavior ?
<form name='newProfileForm' ng-submit="formSubmit(newProfileForm.$valid)" novalidate>
<fieldset>
<legend>Login Information</legend>
</fieldset>
<!-- NAME -->
<div class="form-group">
<label>Email</label>
<input type="email" name="email" class="form-control" ng-model="user.mail" required>
<p ng-show="newProfileForm.email.$invalid && newProfileForm.email.$dirty">Please enter valid email.</p>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" name="pass" required/>
</div>
<div class="form-group">
<label>Confirm Password</label>
<input type="password" class="form-control" required/>
</div>
<fieldset>
<legend>Personal Details</legend>
</fieldset>
<div class="form-group">
<label>Title</label>
<select class="span3">
</select>
</div>
<div class="form-group">
<label>First Name</label>
<input type="text" class="form-control"/>
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" class="form-control"/>
</div>
<div class="form-group">
<label>Contact Number</label>
<input type="text" class="form-control"/>
</div>
<div class="form-group">
<label>Date of Birth</label>
<input type="text" class="form-control"/>
</div>
<div class="form-group">
<label>Address</label>
<textarea rows="3"></textarea>
</div>
<div class="form-group">
<label>Country</label>
<select class="span3">
</select>
</div>
<div class="form-group">
<label>State</label>
<select class="span3">
</select>
</div>
<div class="form-group">
<label>City</label>
<select class="span3">
</select>
</div>
<div class="form-group">
<label>Pin Code</label>
<input type="text" class="form-control"/>
</div>
<div class="form-group">
<label>Gender</label>
<select class="span3">
<option label="Male" value="Male"/>
<option label="Female" value="Female"/>
</select>
</div>
<div class="form-group">
<label>Field of Interest</label>
<input type="text" class="form-control"/>
</div>
<!-- SUBMIT BUTTON -->
<button type="submit" class="btn btn-primary" ng-disabled="newProfileForm.$invalid">Submit</button>
</form>
You forgot to give ng-model to your password and confirm password field. Do it like
<input type="password" class="form-control" name="pass" ng-model="pass" required/>
<input type="password" class="form-control" name="confirmpass" ng-model="confirmpass" required/>