Form get - remove the not selected - html

I have a html form
<form method="get" action="http://domainn.com/">
<div class="item">
<span>order_by</span>
<select class="input" name="order_by">
<option value="">DF</option>
<option value="id">id</option>
<option value="year">year</option>
</select>
</div><div class="item">
<span>category</span>
<select class="input" name="category">
<option value="">DF</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<div>
<input type="submit" class="btn" value="Search">
</div>
</form>
When clicking on it will move to buttu find links domain/?order_by=&category =
I want only values ​​are selected to appear on the link
For example, just select the category that it will not switch to select order_by domain/?category=1 not link domain/?order_by=&category=1

Related

How can I update values of a dropdown list with angular?

I want to update values into dropdown list but when I click in the form the value change to null.
knowing that the add works correctly . Anyone can help me please ?
this is my html code:
<div class="form-group">
<label for="service">Service</label>
<select id="service" class="form-control" ngModel="{{editPersonne?.service}}" name="serviceId">
<option value="">Service</option>
<option value="service.id" *ngFor="let service of services" >{{service.designation}}</option>
</select>
</div>
you should use varibale
<div class="form-group">
<label for="service">Service</label>
<select id="service" class="form-control" [(ngModel)]="{{editPersonne?.service}}" name="serviceId">
<option value="">Service</option>
<option [value]="service.id" *ngFor="let service of services" >{{service.designation}}</option>
</select>
</div>
or
<div class="form-group">
<label for="service">Service</label>
<select id="service" class="form-control" ngModel="{{editPersonne?.service}}" name="serviceId">
<option value="">Service</option>
<option value="{{service.id}}" *ngFor="let service of services" >{{service.designation}}</option>
</select>
</div>

Bootstrap form dropdown validation

I've been working on this bootstrap dropdown and the form still submits even though nothing has been selected. The inputs work. When left blank the form doesnt submit, but doesn't work in the dropdown selects. Any ideas? I've tried required, required="true", and required="required" on the select element.
https://getbootstrap.com/docs/4.0/components/forms/#validation
<div class="form-group--custom form-group">
<select class="form-control selectpicker" data-style="btn btn-link" id="C_Salutation" name="C_Salutation" title="Title" value="">
<option value="" disabled selected style="display: none;" id="C_Country-Placeholder">Business Markets Served*</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
I can't see required in your code?
What about using required this way...
https://www.w3schools.com/tags/att_select_required.asp
<div class="form-group">
<select class="form-control" required>
<option value disabled selected>Business Markets Served*</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>

How do I connect a <form>, <select> and a <div> slider to a button in HTML?

I have to connect a tag, three tags and a that contains a slider to a that is connected to a database.
I have made all of the elements but they are in no way connected to each other, and pressing the button does nothing.
Here is the form where the user types their points:
<form id="pointsform">
Points:<input type="number">
</form>
Then I have the user select a subject:
<select id="subject-selection">
<option value="Math">Math</option>
<option value="Physics">Physics</option>
<option value="Chemistry">Chemistry</option>
<option value="English">English</option>
</select>
Then they choose the year:
<select id="year-selection">
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
</select>
Then they choose the season:
<select id="season-selection">
<option value="Spring">Kevät</option>
<option value="Fall">Syksy</option>
</select>
Then they can choose a value from a slider:
<div class="slidecontainer">
<p id="slider">How strictly did your teacher grade:</p>
<input type="range" min="1" max="100" value="50">
Under all of that there is a button:
<button id="compare-button">Compare</button>
I would like to connect all the user inputted answers to the button, so when I click the button, it interacts with the database.
You simply have to wrap everything into a single form like this:
<form id="pointsform">
<input type="number">
<select id="subject-selection">
<option value="Math">Math</option>
<option value="Physics">Physics</option>
<option value="Chemistry">Chemistry</option>
<option value="English">English</option>
</select>
<select id="year-selection">
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
</select>
<select id="season-selection">
<option value="Spring">Kevät</option>
<option value="Fall">Syksy</option>
</select>
<div class="slidecontainer">
<p id="slider">How strictly did your teacher grade:</p>
<input type="range" min="1" max="100" value="50">
</div>
<input type="submit" value="Compare">
</form>
Put all the form controls inside the <form> element, not just the <input type="number">.

Form Validation not working with tel, email and select

I use Dreamweaver to write my html code, but now have run into a problem.
I have created an enquiry form which contains several different fields, but when I try to validate the form using Window | Behavior | Validate Form, it only shows my "firstname", "lastname", "Datepicker1", "Datepicker2" as well as the "Comments" field.
I want to make sure that the telephone, email and select fields are required and will be filled by a number and an email address. It worked fine when I made the contact form, but for some reason it does not in the enquiry.
My code is as follows:
<form action="../../enquiryform.php" method="post" id="enquiry">
<h1>ENQUIRE ABOUT<br><span style="color:#816122">VILLA 2610</span></h1>
<input type="hidden" name="villaid" id="villaid" value="2610">
<br>
Arrival Date<br>
<input type="text" name="arrivaldate" id="Datepicker1">
<br>Departure Date<br>
<input type="text" name="departuredate" id="Datepicker2"><br>
First Name
<input type="text" name="firstname" id="firstname"><br>
Last Name
<input type="text" name="lastname" id="lastname"><br>
Telephone
<input type="tel" name="tel" id="tel"><br>
Email
<input type="email" name="email" id="email"><br>
<div class="leftcolumn">Adults<br>
<select name="adults" id="adults">
<option value=""> </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10+">10+</option>
</select>
</div>
<div class="rightcolumn">Children<br>
<select name="children" id="children">
<option value=""> </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10+">10+</option>
</select>
</div>
Comments (optional)<br>
<textarea name="comments" id="comments" wrap="soft" style="width:150px; height:100px;"></textarea><br>
<p class="antispam">Leave this empty: <input name="url" type="text" id="url" /></p>
<input type="submit" value="Send" style="background-color:#aa802c; color:#FFFFFF; border-radius:5px; text-align:center; cursor:pointer;"><br><br>
I have added the following inside the starting form bracket:
onSubmit="MM_validateForm('firstname','','R','lastname','','R');return document.MM_returnValue"
But what should I use for a telephone number, email address as well as the 2 select options that I have?
My suggestion is
onSubmit="MM_validateForm('firstname','','R','lastname','','R','tel','','RisNum','email','','RisEmail',);return document.MM_returnValue"
But how do I add that I require for my viewers to select children and adults options?
And are my thoughts above correct?
Why don't you use the require attribute on input tag like this
Telephone
<input type="tel" name="tel" id="tel" required>

Aligning input and radio buttons with label at different places

I have this code :
<form action="#" method="get">
<fieldset>
<div>
<label for="profilephoto">Your profile photo</label>
<input type="file" name="profilephoto" id="profilephoto" />
</div>
<div>
<label for="firstname">Your first name</label>
<input type="text" name="firstname" id="firstname" />
</div>
<div>
<label for="lastname">Your last name</label>
<input type="text" name="lastname" id="lastname" />
</div>
<div>
<label for="gender">Gender</label>
<input type="radio" name="gender" value="female" id="female" />
<label for="female">Female</label>
<input type="radio" name="gender" value="male" id="male" />
<label for="male">Male</label>
</div>
<div>
<label for="birthdategroup">Birth Date</label>
<select name="Month">
<option value="none">- Month -</option>
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
<select name="Day">
<option value="none">- Day -</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="22">30</option>
<option value="29">31</option>
</select>
<select name="year">
<option value="none">- Year -</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
</select>
<p>This is hidden by fault from your profile.</p>
</div>
<div>
<label for="about">About you</label>
<textarea id="about" rows="9" cols="30"></textarea>
</div>
<div>
<label for="websiteaddress">Your website address
</label>
<input type="text" id="websiteaddress" name="websiteaddress" />
</div>
<div>
<label for="websitename">Website name</label>
<input type="text" id="websitename" name="websitename" />
</div>
<div>
<span>preview profile</span> <input type="submit" value="save"/>
</div>
</fieldset>
</form>
And the desired design is this :
http://d.pr/i/WZ0U
The problem is, I tried to align this by adding padding and a width to the labels, but given that the radio buttons have their own label (male and female), it also increase the space between these buttons, which isn't desired.
How can I style this ?
Also, is the use of 3rd label for "gender" really appropriate, since each radio button already has their own label ?
Give the "odd" label a class name and style it separately.
Also, it better form to use a styled unordered list as a container than DIVs.
See: http://www.alistapart.com/articles/prettyaccessibleforms
add classes to the labels, for example if radio boxes labels need different styling then other labels add a specific class to those labels:
<label class="radio">text</label>
<label class="input">text</label>
...
then use the classes in css:
instead of
label {css code}
use
.radio {css code}
and so on so you can give different css to different labels.