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
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>
I am currently working on a form, within a modal.
My objective is to implement dynamic fields that the user can add and remove.
*its also worth mentioning that the value of these "dynamic fields" later will be exported to a
firebase database!
For now the fields show up but, when i execute the delete/remove function to a recently
added field everything disapears.
This is the html section
<div class="bg-modal">
<div class="modal-contents">
<div class="close li:hoover">+</div>
<!-- validation todo -->
<form class="input-modal" id="kundInfo">
<br>
<input class="input-modal" type="text" placeholder="name" id="userName" required>
<input class="input-modal" type="email" placeholder="e-mail" id="userEmail" required>
<textarea class="input-modal" name="meddelande" placeholder="Övrig information" id="userMessage"></textarea>
<select class="input-modal" id="deliveryTown" value="">
<option value="default">Välj leveransort</option>
<option value="Stockholm">Stockholm</option>
<option value="Göteborg">Göteborg</option>
<option value="Kalmar">Kalmar</option>
</select>
<br>
<div id="dynamic-items">
<input class="dynamic-input-fields" type="text" name="artikel[]" placeholder="Artikel">
<input class="dynamic-input-fields" type="number" name="kvantitet[]" placeholder="kvantitet">
<input class="dynamic-input-fields" type="button" value="Lägg till" id="add">
<!-- (original submit button)
<input type="submit" value="submit">
-->
</div>
<br>
<select class="input-modal" id="produktKategori" value="">
<option value="default">Välj inköpskategori</option>
<option value="trävaror">Trävaror</option>
<option value="mur&puts">Mur & puts</option>
<option value="mark&trädgård">Mark & trädgård</option>
<option value="vvs">VVS</option>
<option value="våtrum">Våtrum</option>
<option value="verktyg">Verktyg</option>
</select>
<br>
<br>
<button class="input-modal" id="Skicka" type="submit">Skicka</button>
</form>
<div class="alert">Ditt förfrågan är skickad!</div>
</div>
</div>
...and this is the jquery file:
$(document).ready(function(){
$("#add").click(function (e){
event.preventDefault()
$('#dynamic-items').append(
'<input class="dynamic-input-fields" type="text" name="artikel[]" placeholder="Artikel">'+
'<input class="dynamic-input-fields" type="number" name="kvantitet[]" placeholder="kvantitet">'+
'<input type="button" name="delete[]" value="delete" id="delete"/></div>'
);
});
$('body').on('click', '#delete',function (e){
event.preventDefault()
$(this).parent('div').remove();
});
});
The html string not have <div> on start.
$(document).ready(function() {
$("#add").click(function(e) {
event.preventDefault()
$('#dynamic-items').append(
'<div><input class="dynamic-input-fields" type="text" name="artikel[]" placeholder="Artikel">' +
'<input class="dynamic-input-fields" type="number" name="kvantitet[]" placeholder="kvantitet">' +
'<input type="button" name="delete[]" value="delete" id="delete"/></div>'
);
});
$('body').on('click', '#delete', function(e) {
event.preventDefault()
$(this).parent('div').remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bg-modal">
<div class="modal-contents">
<div class="close li:hoover">+</div>
<!-- validation todo -->
<form class="input-modal" id="kundInfo">
<br>
<input class="input-modal" type="text" placeholder="name" id="userName" required>
<input class="input-modal" type="email" placeholder="e-mail" id="userEmail" required>
<textarea class="input-modal" name="meddelande" placeholder="Övrig information" id="userMessage"></textarea>
<select class="input-modal" id="deliveryTown" value="">
<option value="default">Välj leveransort</option>
<option value="Stockholm">Stockholm</option>
<option value="Göteborg">Göteborg</option>
<option value="Kalmar">Kalmar</option>
</select>
<br>
<div id="dynamic-items">
<input class="dynamic-input-fields" type="text" name="artikel[]" placeholder="Artikel">
<input class="dynamic-input-fields" type="number" name="kvantitet[]" placeholder="kvantitet">
<input class="dynamic-input-fields" type="button" value="Lägg till" id="add">
<!-- (original submit button)
<input type="submit" value="submit">
-->
</div>
<br>
<select class="input-modal" id="produktKategori" value="">
<option value="default">Välj inköpskategori</option>
<option value="trävaror">Trävaror</option>
<option value="mur&puts">Mur & puts</option>
<option value="mark&trädgård">Mark & trädgård</option>
<option value="vvs">VVS</option>
<option value="våtrum">Våtrum</option>
<option value="verktyg">Verktyg</option>
</select>
<br>
<br>
<button class="input-modal" id="Skicka" type="submit">Skicka</button>
</form>
<div class="alert">Ditt förfrågan är skickad!</div>
</div>
</div>
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>
I am a bit new to coding. I have made a HTML form which is posting to one website after submission and is also landing on the other page for acknowledgement. but my form page is not disappearing. i am using google sites for this form so cant use any scripting language. Have to rely on html only
<form action="https://www.salesforce.com/servlet/servlet.WebToCase?encoding=UTF-8" method="POST">
<!-- ---------------------------------------------------------------------- -->
<!-- NOTE: These fields are optional debugging elements. Please uncomment -->
<!-- these lines if you wish to test in debug mode. -->
<!-- <input type="hidden" name="debug" value=1> -->
<!-- <input type="hidden" name="debugEmail" value="smoiz88#gmail.com"> -->
<!-- ---------------------------------------------------------------------- -->
<label for="first_name">First Name</label>
<input id="first_name" maxlength="40" name="first_name" size="40" type="text" required />
<br>
<label for="last_name">Last Name</label>
<input id="last_name" maxlength="40" name="last_name" size="40" type="text" required />
<br>
<label for="email">Email</label>
<input id="email" maxlength="80" name="email" size="40" type="text" required />
<br>
<label for="phone">Phone</label>
<input id="phone" maxlength="40" name="phone" size="40" type="number" />
<br>
<label class="label">Site</label>
<select class="select" id="Site" name="site" title="Site">
<option value="None">None</option>
<option value="Armadale">Armadale</option>
<option value="Elsternwick">Elsternwick</option>
<option value="Hawthorn">Hawthorn</option>
<option value="Manila">Manila</option>
<option value="UK">UK</option>
<option value="Other">Other</option>
</select>
<br>
<br>
<label class="label">Salesforce Profile</label>
<select class="select" id="Profile">
<option value="None">None</option>
<option value="Acquire Career Champion">Acquire Career Champion</option>
<option value="Acquire Career Advisor">Acquire Career Advisor</option>
<option value="Acquire Career Hunter">Acquire Career Hunter</option>
<option value="Acquire Data Analyst">Acquire Data Analyst</option>
<option value="Acquire Retention Specialist">Acquire Retention Specialist</option>
<option value="Acquire Training Admin">Acquire Training Admin</option>
<option value="Acquire Qualifier">Acquire Qualifier</option>
</select>
<br>
<br>
<label for="fault">Fault Title</label>
<input id="fault" maxlength="20" name="fault" size="30" type="text" required />
<br>
<br>
<label>Fault Type</label>
<select class="select" id="Type">
<option value="None">None</option>
<option value="Password Reset">Password Reset</option>
<option value="Report Required">Report Required</option>
<option value="Login Details">Login Details</option>
<option value="End Of Employment">End Of Employment</option>
<option value="File Merge">File Merge</option>
<option value="Insufficient Privilege">Insufficient Privilege</option>
<option value="Other">Other</option>
</select>
<br>
<br>
<label for="description">Description</label>
<textarea name="description"></textarea>
<br>
<div id="submit">
<input type="submit" name="submit">
</div>
</form>
any suggestions how can i make it disapper once it is submitted.
It seems the server brings you back because it doesn't know where to redirect after form submission.
Try create another page with confirmation text and configure server to redirect there after submission.
There must be a parameter or something on the server side to control submission behavior.
I have a <select> dropdown in my HTML form. How do I add required attribute to my <select> element? I would like a pure HTML5 solution. I googled but I dont seem to find it.
Here is my fiddle.
The first <option> needs to be empty. Otherwise, required will see it as a value filled.
Example
<select required>
<option></option>
<option>1</option>
<option>2</option>
</select>
First of all you must insert empty field in movie list.and add required
HTML
<form id="book_tickets">
<fieldset>
<legend>Booking Details</legend>
<p>
<label for="movie_name">Choose Movie</label>
<select id="movie_name" name="movie_name" required>
<option></option>
<option value="Movie 1">Movie 1</option>
<option value="Movie 2">Movie 2</option>
<option value="Movie 3">Movie 3</option>
</select>
</p>
<p>
<label for="theaters">Theaters</label>
<input list="theaters" name="theaters" required>
<datalist id="theaters">
<option value="Inox" />
<option value="E Square" />
</datalist>
</input>
</p>
<p>
<label for="date">Select Date</label>
<input type="date" name="date" id="date" required />
</p>
<p>
<label for="email">Enter Email</label>
<input type="email" name="email" id="email" placeholder="abc#gmail.com" required />
</p>
<p>
<label for="tickets_quantity">Number of Tickets</label>
<input type="number" min="1" max="10" name="tickets_quantity" id="tickets_quantity" required />
</p>
<p>
<label>Total Price</label>
<span id="total_price"></span>
</p>
<p>
<input type="submit" id="book_tickets" value="Book Tickets" />
</p>
</fieldset>
</form>
The required attribute on select element: video demo
select element HTML5 here
referring to the first option, check out the placeholder label option demo