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>
Related
I want this input project name and address displayed in the text area.
currently, the input project name and checkbox text can be displayed in the textbox.
ps: I forgot to add checkbox HTML codes in the previous question.
I would appreciate your help.
here is my code:
let existValue = "";
$('input:checkbox').click(function(){
var tb = "#"+$(this).attr('rel');
let text_to_add = this.name + "\n";
let inputVal = $('#pname').val()
//when click a checkbox and show checked items in the text area
if($(this).is(":checked")){
$(tb).val($(tb).val() + text_to_add);
}else{
let remove = this.name +"\n";
//when a box is unchecked it clears the previously populated text from checkbox
$(tb).val($(tb).val().replace(remove,""));
}
//storing the value to existValue
existValue = $(tb).val().replace(`${inputVal}\n`, "");
});
$('#pname').on('input',(e)=>{
//here to adding the input value to the existValue
$('#textbox1').val(`${e.target.value}\n${existValue}`)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="name">
<form>
<label for="projectname">Project name:</label>
<input type="text" id="pname" name="pname">
<br>
<div class="form-group">
<label>Project Address:</label>
<input type="text" class="form-control" id="search_input" placeholder="Type address..." />
<input type="hidden" id="loc_lat" />
<input type="hidden" id="loc_long" />
</div>
<div class="latlong-view">
<p><b>Latitude:</b> <span id="latitude_view"></span></p>
<p><b>Longitude:</b> <span id="longitude_view"></span></p>
</div>
</div>
<div class="series1">
<tr><input type="checkbox" rel="textbox1" name="Cabinets" class=test/>
Cabinets
</tr>
<input type="checkbox" rel="textbox1" name="Doors"/>
Doors
<input type="checkbox" rel="textbox1" name="Drawers">
Drawers
<input type="checkbox" rel="textbox1" name="Drawer Fronts">
Drawer Fronts
<input type="checkbox" rel="textbox1" name="Handles">
Handles
</div>
<br>
<textarea id="textbox1" ></textarea>
This should do it:
const inps=$('input[type=text]').on('input',()=>
$('#textbox1').val(inps.get().map(i=>i.value).join("\n"))
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="name">
<form>
<label for="projectname">Project name:</label>
<input type="text" id="pname" name="pname">
<br>
<div class="form-group">
<label>Project Address:</label>
<input type="text" class="form-control" id="search_input" placeholder="Type address..." />
<input type="hidden" id="loc_lat" />
<input type="hidden" id="loc_long" />
</div>
<div class="latlong-view">
<p><b>Latitude:</b> <span id="latitude_view"></span></p>
<p><b>Longitude:</b> <span id="longitude_view"></span></p>
</div>
</div>
<textarea id="textbox1"></textarea>
As there are no checkboxes in your current HTML I removed the event handling for these elements and concentrated on the text-inputs. In my snippet I selected the input fields by their type (=text). In a real example you should apply a common class to them and select them through that.
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 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>
I have a form with validation but the date validation message is not showing and in the console it reads..property style of null and highlights this code "error_box.style.display = 'block';" within the context of this function.
function displayError(fieldname, message){
var input_field = document.querySelector('#'+fieldname);
var error_box = document.querySelector('#'+fieldname+'Message');
addClass(input_field, 'error');
removeClass(input_field, 'correct');
error_box.style.display = 'block';
}
I have the full code in a fiddle:
http://jsfiddle.net/tUa5e/
HTML
<form action="#">
<div class="formColumn1">
<label for="pickup"><span class="textStyle">Pick-up</span>
<input type="date" id="pickup"></label><br>
<label for="dropoff"><span class="textStyle">Drop-off</span>
<input type="date" id="dropoff"><br>
<span id="dropoff" class="message">That date is invalid</span></label>
<div id="pickuperror"></div>
</div>
<!--COLUMN ONE END -->
</div>
<!--COLUMN TWO -->
<div class="formColumn2">
<label for="name"><span class="textStyle">Full Name*</span>
<input type="text" id="name"><br>
<span id="nameMessage" class="message">You must have a valid name</span>
</label>
<label for="email"><span class="textStyle">Email*</span>
<input type="text" id="email"><br>
<span id="emailMessage" class="message">You must have a valid email</span>
</label>
<label for="phoneNumber"><span class="textStyle">Phone Number*</span>
<input type="text" id="phoneNumber"><br>
<span id="phoneNumberMessage" class="message">You must have a valid phone number</span>
</label>
<label for="postalAddress"><span class="textStyle">Postal Address</span>
<input type="text" id="postalAddress"><br>
</label>
<label for="city"><span class="textStyle">City</span>
<input type="text" id="city"><br>
</label>
<span class="textStyle">Addtional Information</span>
<textarea name="comment" form="usrform">Enter text here...</textarea>
<input type="submit" id="submit" value="Submit"/>
<!--COLUMN TWO END-->
</div>
</form>
<!--END OF FORM-->
</div>
I'm trying to do a separate formulary for individuals and corporations
If the visitor check the "Individual" radio button, it would display a form
If the visitor check the "Corporation" radio button, it would display a different form
<fieldset>
<input type="radio" name="tipo_cadastro" value="individual_form" id="individual_form" style="margin:0px !important">
<strong>Individual Form</strong><br/>
<input type="radio" name="tipo_cadastro" value="corporation_form" id="corporation_form" style="margin:0px !important">
<strong>Corporation Form</strong>
<!-- If Individual Form is checked -->
<legend>Personal Data</legend>
<label for="Name">Full Name</label>
<input id="Name" type="text" />
<label for="City">City</label>
<input id="City" type="text" />
<label for="Email">Email</label>
<input id="Email" type="text" />
<!-- If Corporation Form is checked -->
<legend>Corporation Data</legend>
<label for="Name">Name</label>
<input id="Name" type="text" />
<label for="City">City</label>
<input id="City" type="text" />
<label for="Email">Email</label>
<input id="Email" type="text" />
</fieldset>
Ps: Because of my other javascript, I can't use other <fieldset> than the existing one
You'd need to wrap something around the fields to show/hide, even just a <div> tag with an ID.
Then for your radio buttons, you'd want to add onchange & onmouseup event handlers (to account for people either clicking to change the value, or using their keyboard).
eg.
<script type="text/javascript">
function onchange_handler(obj, id) {
var other_id = (id == 'personal')? 'corporate' : 'personal';
if(obj.checked) {
document.getElementById(id + '_form_fields').style.display = 'block';
document.getElementById(other_id + '_form_fields').style.display = 'none';
} else {
document.getElementById(id + '_form_fields').style.display = 'none';
document.getElementById(other_id + '_form_fields').style.display = 'block';
}
}
</script>
<fieldset>
<input type="radio" name="tipo_cadastro" value="individual_form" id="individual_form" style="margin:0px !important" onchange="onchange_handler(this, 'personal');" onmouseup="onchange_handler(this, 'personal');">
<strong>Individual Form</strong><br/>
<input type="radio" name="tipo_cadastro" value="corporation_form" id="corporation_form" style="margin:0px !important" onchange="onchange_handler(this, 'corporate');" onmouseup="onchange_handler(this, 'corporate');">
<strong>Corporation Form</strong>
<!-- If Individual Form is checked -->
<div id="personal_form_fields">
<legend>Personal Data</legend>
<label for="Name">Full Name</label>
<input id="Name" type="text" />
<label for="City">City</label>
<input id="City" type="text" />
<label for="Email">Email</label>
<input id="Email" type="text" />
</div>
<!-- If Corporation Form is checked -->
<div id="corporate_form_fields" style="display: none;">
<legend>Corporation Data</legend>
<label for="Name">Name</label>
<input id="Name" type="text" />
<label for="City">City</label>
<input id="City" type="text" />
<label for="Email">Email</label>
<input id="Email" type="text" />
</div>
</fieldset>