I wish to show the input field when "Others" option is selected on dropdown, but can't figure out how to-
Here is my code
<div class="form-group">
<label for="college">College:</label>
<select class="form-control" id="college" ngModel name="college_name" required>
<option>Ajay Kumar Garg Engineering College</option>
<option>Others- Please Specify Below</option>
</select>
</div>
<div class="form-group" *ngIf="showfield">
<label for="name">Enter College Name:</label>
<input type="text" class="form-control" id="name" ngModel name="other_college_name" required>
</div>
showfield = false; is set in .ts file
In your component take a variable,
selectedValue: string = '';
Just assign selectedvalue to ngModel and use that value to display text field.
Also, options needs value attribute and it needs value to store in ngModel
<div class="form-group">
<label for="college">College:</label>
<select class="form-control" id="college" [(ngModel)]="selectedValue" name="college_name" required>
<option value="college">Ajay Kumar Garg Engineering College</option>
<option value="others">Others- Please Specify Below</option>
</select>
</div>
<div class="form-group" *ngIf="selectedValue == 'others'">
<label for="name">Enter College Name:</label>
<input type="text" class="form-control" id="name" ngModel name="other_college_name" required>
</div>
You can do like so
<div class="form-group">
<label for="college">College:</label>
<select class="form-control" id="college" [(ngModel)]="collegeName" name="college_name" required>
<option value="AKGEC">Ajay Kumar Garg Engineering College</option>
<option value="other">Others- Please Specify Below</option>
</select>
</div>
<div class="form-group" *ngIf="collegeName === 'other'">
<label for="name">Enter College Name:</label>
<input type="text" class="form-control" id="name" ngModel name="other_college_name" required>
</div>
Your options must have a value associated with them, the selected options value will get set to the model associated with your dropdown select. You can check that for show/hide as follows:
<div class="form-group">
<label for="college">College:</label>
<select class="form-control" id="college" [(ngModel)]="selectedVal" name="college_name" required>
<option value="ajay">Ajay Kumar Garg Engineering College</option>
<option value="others">Others- Please Specify Below</option>
</select>
</div>
<div class="form-group" *ngIf="selectedVal==='others'">
<label for="name">Enter College Name:</label>
<input type="text" class="form-control" id="name" ngModel name="other_college_name" required>
</div>
Related
HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> FreeCodeCamp Survey</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 id="title"> FreeCodeCamp Survey</h1>
<p id="description"> Thanks for taking the time to help us improve!</p>
<form id="survey-form">
<div class="details">
<label for="name" id="name-label"> Name <input id="name" type="text" required placeholder="Enter Your Name">
</label>
<label for="email" id="email-label"> Email <input id="email" type="email" required placeholder="Enter Your Email">
</label>
<label for="number" id="number-label"> Number <input id="number" type="number" required min="11" max="20" placeholder="Enter Your Number">
</label>
<label for="current-role" id="current-role-label">Which option best describes your current role?<br>
<select id="dropdown" name="dropdown">
<option value="current-role">(Select Current Role)</option>
<option value="student">Student</option>
<option value="full-time-job">Full Time Job</option>
<option value="full-time-learner">Full Time Learner</option>
<option value="prefer-not-to-say">Prefer Not to Say</option>
<option value="other">Other</option>
</select>
</label>
</div>
<div class="recommend">
<label>Would you Recommend FCC.com to a friend?</label>
<label for="definitely"><input id="definitely" name="definitely" value="definitely" type="radio"> Definitely</label>
<label for="maybe"><input id="maybe" type="radio" value="maybe" name="definitely"> Maybe</label>
<label><input id="not-sure" type="radio" value="not-sure" name="definitely"> Not Sure</label>
</div>
<div class="features">
<label for="favorite-feature" id="favorite-feature-label">What is your favorite feature of freeCodeCamp? (select an option/s)</label>
<select id="dropdown" name="dropdown">
<option value="favorite-feature">(Select Favorite Feature)
</option>
<option value="challenges">Challenges</options>
<option value="projects">Projects</options>
<option value="community">Community</options>
<option value="open-source">Open Source</option>
</select>
</div>
<div class="improvements">
<label>What would you like to see improved? (check all that apply)</label>
<label for="front-end"><input type="checkbox" value="front-end" name="front-end" id="front-end">Front-end Projects</label>
<label for="back-end"><input type="checkbox" value="back-end" name="back-end" id="back-end">Back-end Projects</label>
<label><input type="checkbox" value="challenges" name="challenges" id="challenges">Challenges</label>
</div>
<div class="comment">
<label for="comments">Any Comments or Suggestions?</label>
<textarea id="comments" name="comments" placeholder="Enter your comments here"></textarea>
</div>
<div>
<button type="submit" id="submit"> Submit</button>
</div>
</form>
</body>
</html>
I have tried styling using .features for example which is a class that I gave to my div but it doesn't seem to do anything. However if I use
label, input{ display:block;}
It seems to do the trick! I'm not sure if this makes sense. Anyhow, any help or guidance would be much appreciated. I'm having so much fun learning all this new stuff!
your class .features class is working. The option tags closing was wrong. Had an extra s in the end mentioned by #Nasser in the comment. Run the code below and you will get border which I have given through features class.
I think you should check stylesheets name 'styles.css' whether it's same with the css file name.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> FreeCodeCamp Survey</title>
<style>
label, input{ display:block;}
.features{
border: 2px solid #fcba03;
}
</style>
</head>
<body>
<h1 id="title"> FreeCodeCamp Survey</h1>
<p id="description"> Thanks for taking the time to help us improve!</p>
<form id="survey-form">
<div class="details">
<label for="name" id="name-label"> Name <input id="name" type="text" required placeholder="Enter Your Name">
</label>
<label for="email" id="email-label"> Email <input id="email" type="email" required placeholder="Enter Your Email">
</label>
<label for="number" id="number-label"> Number <input id="number" type="number" required min="11" max="20" placeholder="Enter Your Number">
</label>
<label for="current-role" id="current-role-label">Which option best describes your current role?<br>
<select id="dropdown" name="dropdown">
<option value="current-role">(Select Current Role)</option>
<option value="student">Student</option>
<option value="full-time-job">Full Time Job</option>
<option value="full-time-learner">Full Time Learner</option>
<option value="prefer-not-to-say">Prefer Not to Say</option>
<option value="other">Other</option>
</select>
</label>
</div>
<div class="recommend">
<label>Would you Recommend FCC.com to a friend?</label>
<label for="definitely"><input id="definitely" name="definitely" value="definitely" type="radio"> Definitely</label>
<label for="maybe"><input id="maybe" type="radio" value="maybe" name="definitely"> Maybe</label>
<label><input id="not-sure" type="radio" value="not-sure" name="definitely"> Not Sure</label>
</div>
<div class="features">
<label for="favorite-feature" id="favorite-feature-label">What is your favorite feature of freeCodeCamp? (select an option/s)</label>
<select id="dropdown" name="dropdown">
<option value="favorite-feature">(Select Favorite Feature)
</option>
<option value="challenges">Challenges</option>
<option value="projects">Projects</option>
<option value="community">Community</option>
<option value="open-source">Open Source</option>
</select>
</div>
<div class="improvements">
<label>What would you like to see improved? (check all that apply)</label>
<label for="front-end"><input type="checkbox" value="front-end" name="front-end" id="front-end">Front-end Projects</label>
<label for="back-end"><input type="checkbox" value="back-end" name="back-end" id="back-end">Back-end Projects</label>
<label><input type="checkbox" value="challenges" name="challenges" id="challenges">Challenges</label>
</div>
<div class="comment">
<label for="comments">Any Comments or Suggestions?</label>
<textarea id="comments" name="comments" placeholder="Enter your comments here"></textarea>
</div>
<div>
<button type="submit" id="submit"> Submit</button>
</div>
</form>
</body>
</html>
So I have already attempted to do this project by myself but the program I'm using as a sandbox seems incredibly picky at how one is to do it. Despite using examples and other aids to help get this done, nothing has worked. I'm having three separate issues that I think I have done correctly but, apparently, had not done correctly. The issues are as followed:
Script & Form Elements
The Regex
The Submit Button
The program will not tell me what's being done wrong either. Might I get some aid?
<section>
<h1>Conference Registration Form</h1>
<p>Required Item (*)</p>
<form action="http://www.example/cg/register" method="post">
<!-- title -->
<div>
<label for="title">Title</label>
<input type="text" name="title" id="titleBox" list="titleList">
<datalist id="titleList">
<option value="Mr."></option>
<option value="Mrs."></option>
<option value="Ms."></option>
<option value="Prof."></option>
<option value="Dr."></option>
<option value="Assist. Prof."></option>
<option value="Assoc. Prof."></option>
</datalist>
</div>
<!-- firstName -->
<label for="firstName">First Name*</label>
<input type="text" name="firstName" id="fnBox" required>
<!-- LastName -->
<label for="lastName">Last Name*</label>
<input type="text" name="lastName" id="lnBox" required>
<!-- address -->
<label for="address">Address*</label>
<textarea name="address" id="addBox"></textarea>
<!-- Company or University -->
<label for="group">Company or University</label>
<input type="text" name="group" id="groupBox">
<!-- E-mail -->
<label for="email">E-mail*</label>
<input type="email" name="email" id="mailBox" required>
<!-- Phone Number -->
<label for="phoneNumber">Phone Number*</label>
<input type="tel" name="phoneNumber" id="phoneNumber" required pattern="^\d{10}$|^(\(\d{3}\)\s*)?\d{3}[\s-]?\d{4}$" placeholder="(nnn) nnn-nnnn">
<!-- ACGIP Membership -->
<label for="acgipID">ACGIP Membership Number</label>
<input type="text" name="acgipID" id="idBox" placeholder="acgip-nnnnnn" pattern="^acgip\-\d{6}$">
<!-- Registration Category -->
<label for="regList">Registration Category</label>
<select id="regList" name="">
<option value="member">ACGIP Member ($695)</option>
<option value="nonmember">ACGIP Non-Member ($795)</option>
<option value="student">ACGIP Student ($310)</option>
<option value="poster">ACGIP Poster ($95)</option>
<option value="guest">ACGIP Guest ($35)</option>
</select>
<!-- Button -->
<p><input type="submit" name="continue" value="Continue"></p>
</form>
</section>
The code for the regex is wrong here.
it should be:
<input type="text" name="phoneNumber" id="phoneBox" placeholder="(nnn) nnn-nnnn" pattern="^\d{10}$|^(\(\d{3}\)\s*)?\d{3}[\s-]?\d{4}$" required />
NOT
<label for="phoneNumber">Phone Number*</label>
<input type="tel" name="phoneNumber" id="phoneNumber" required pattern="^\d{10}$|^(\(\d{3}\)\s*)?\d{3}[\s-]?\d{4}$" placeholder="(nnn) nnn-nnnn">
It gives an error every time. Cheers
i have a simple form that has a drop down
<form action="TasksController#store" method="POST">
<div>
<div class="textbox-first" style="float:left">
<label for="taskname"> Task Name </label><br>
<input type="text" placeholder="Enter task title" name="title" style="width:360px">
</div>
<div class="textbox-first" style="float:right;margin-right:0px">
<label for="priority">Task priority</label><br>
<select style="width:380px">
<option value="urgent" selected="selected">Urgent</option>
<option value="important">important</option>
<option value="later">Later</option>
</select>
</div>
</div>
the form is not selecting
<form action="check_rooms1.php" method="post" name="search_room" class="form" >
<p>
<label for="checkin">Check in date</label>
<input name="checkin" type="text" id="checkin" placeholder="click to enter" readonly required>
</p>
<p>
<label for="checkout">Check out date</label>
<input name="checkout" type="text" id="checkout" placeholder="click to enter" readonly required>
</p>
<p>
<label for="beds">Hotel type</label>
<label for="hotel_type"></label>
<select name="hotel_type" id="hotel_type">
<option value="1" selected>1 star</option>
<option value="2">2 star</option>
<option value="3">3 star</option>
<option value="4">4 star</option>
<option value="5">5 star</option>
</select>
<input type="submit" name="search_button" id="search_button" value="Search">
</p>
</form>
required validation is not working. I am entering the dates using a jquery calendar. that is why I disabled text edit by giving read only. Is there any problem with readonly?
Thanks for the concern.The problem is solved by using the input type date . It gives a calendar to pick date and cannot misformat the date also
Hi I want to do a simple angularjs filter so I have this:
<input type="text" id="name" style="display:block" class="form-control" placeholder="By name" ng-model="search.student_name">
<input type="text" id="code" style="display:none" class="form-control" placeholder="By code" ng-model="search.student_code">
<input type="text" id="room" style="display:none" class="form-control" placeholder="By room" ng-model="search.student_room">
<select name="filter" id="filter">
<option value="name">Name</option>
<option value="code">Code</option>
<option value="room">Room</option>
</select>
and the test script (doesn't works... Jquery conflict)
<script type="text/javascript">
if(document.getElementbyId('filter').value === 'code'){
document.getElementbyId('name').style.display="none";
document.getElementbyId('code').style.display="block";
};
</script>
The question is: there is another way to show and hide the selected input? Can I do it on the server-side?
With AngularJS you can use NgShow to show items optionally.
<div ng-app>
<input type="text" id="name" style="display:block" class="form-control" placeholder="By name" ng-model="search.student_name" ng-show="filter =='name'">
<input type="text" id="code" style="display:none" class="form-control" placeholder="By code" ng-model="search.student_code" ng-show="filter =='code'">
<input type="text" id="room" style="display:none" class="form-control" placeholder="By room" ng-model="search.student_room" ng-show="filter =='room'">
<select name="filter" id="filter" ng-model="filter">
<option value="name">Name</option>
<option value="code">Code</option>
<option value="room">Room</option>
</select>
</div>
I've added an ng-model to the select and an ng-show directive to each of the input fields. they will only show if the value of the select is equal to the literal in the ng-show
This assumes that angular is already referenced in the page.