Can we make select option html input required without touching html tags by using css/javascript code?
<form action="?" method="post">
<select class='css-class'>
<option value=''>choose</option>
<option value='1' data-key='1'>one</option>
<option value='2' data-key='2'>two</option>
<input type="submit"/>
</select>
</form>
css
.css-class select option{
/* anything here to make it required */
}
I don't mind using javascript
jsfiddle
You can use JS by using the required property. It's just like the required attribute that's on tags, but it's a JS property instead of a HTML attribute.
I added another <select> to demonstrate. Try submitting only the second <select> and you'll see it'll require <select class="css-class"> to be submitted.
document.querySelector('.css-class').required = true;
<form action="?" method="post">
<select class='css-class'>
<option value=''>choose</option>
<option value='1' data-key='1'>one</option>
<option value='2' data-key='2'>two</option>
<input type="submit" />
</select>
<select class='css-id'>
<option value=''>choose</option>
<option value='1' data-key='1'>one</option>
<option value='2' data-key='2'>two</option>
<input type="submit" />
</select>
</form>
I don't think that it is possible with just css as this is just for styling content.
Could this answer provide a solution for you: Can I apply the required attribute to <select> fields in HTML5?
The markup they suggest:
<select required>
<option value="">Please select</option>
<option value="one">One</option>
</select>
Related
I set datalist in input[type='date'].
For e.g.,
<input type="date" id="date" name="date" list="thesedates">
<datalist id="thesedates">
<option label="Groundhog Day">2014-02-02</option>
<option label="Valentine's Day">2014-02-14</option>
<option label="Flag Day">2014-06-14</option>
</datalist>
Question
In this example i seen Other option. I want to remove this.
Thank you for help me !
I guess you want to pick date only from given list. Why are you not using select element?
<form action="index.php">
<select name="date">
<option value="2014-02-02">Groundhog Day</option>
<option value="2014-02-14">Valentine's Day</option>
<option value="2014-06-14">Flag Day</option>
</select>
<input type="submit">
</form>
I have a form that is a simple dropdown menu that users can select an name and the affiliate code matched to it be used in the url but php changes the periods to underscores, so I was wondering if there was a roundabout way of doing it with javascript?
<form>
<div>
<label for="organisation">Please select:
</label>
<select name="quote/results.php?product=product_here&ac=group&username" method="get">
<option value="111111111">Number One</option>
<option value="222222222">Number Two</option>
<option value="333333333">Number Three</option>
<option value="444444444">Number Four</option>
</select>
<button>Quote </button>
</form>
After the username in the URL, that's where I want the number code to go which I had working in php but the results.php turned into results_php which obviously came back as an error.
Are there any possible ways to go around this?
I think you want something like this:
<form action="quote/results.php" method="GET">
<div>
<input type="hidden" name="product" value="product_here"/>
<input type="hidden" name="ac" value="group"/>
<label for="organisation">Please select:</label>
<select name="username">
<option value="111111111">Number One</option>
<option value="222222222">Number Two</option>
<option value="333333333">Number Three</option>
<option value="444444444">Number Four</option>
</select>
<button type="submit">Quote</button>
</div>
</form>
Put the url in the action attribute of the form instead, then use hidden inputs for the product and ac, so that they are included in the url after submitting. And add type="submit" in the buton
I have an angular js dropdown. I want that if my variabl e.g. 'x' has value true it makes it compulsory to select a value from the drop down and incase of false value it can allow it to save it without selecting anything from the drop down. Here is my drop down:
<select class="form-control dropdownheight"
ng-model="search.hardware"
ng-change="search()" >
<option value="" selected>Select Hardware</option>
<option ng-repeat="box in boxes" value="{{box.name}}">{{box.name}}</option>
</select>
You can use ng required for this.
<form name="form">
<select ng-model="hardware" class="form-control dropdownheight" ng-change="search()" >
<option value="" selected>Select Hardware</option>
<option ng-repeat="box in boxes" value="{{box.name}}">{{box.name}}</option>
</select>
<label for="input">This input must be filled if `required` is true: </label>
<input type="text" id="input" name="input" ng-required="isRequired" /><br>
<hr>
<code>{{form.input.$error}}</code><br>
isRequired = <code>{{isRequired}}</code>
<input type="submit" value="Save" ng-disabled="isRequired"/>
</form>
I have created plunkr for it:
https://plnkr.co/edit/bfWuGCOYLGIV0Krlaaeo?p=preview
Use the ng-required directive:
<select class="form-control dropdownheight"
ng-model="search.hardware"
ng-change="search()"
ng-required="x">
<option value="" selected>Select Hardware</option>
<option ng-repeat="box in boxes" value="{{box.name}}">{{box.name}}</option>
</select>
See this jsfiddle
how to connect two dropdown lists in html by putting conditions.
<p>Enter your source and destination.</p>
<p>From:</p>
<select name="from">
<option value="Islamabad">Islamabad</option>
<option value="Lahore">Lahore</option>
<option value="murree">Murree</option>
<option value="Muzaffarabad">Muzaffarabad</option>
</select>
<p>To:</p>
<select name="To">
<option value="Islamabad">Islamabad</option>
<option value="Lahore">Lahore</option>
<option value="murree">Murree</option>
<option value="Muzaffarabad">Muzaffarabad</option>
</select>
<form method="post" action="flights.html">
<input type="submit" value="search" />
</form>
when user enter source and destination and click on search button it will go on different page on all different entries in two dropdown lists.
First, your select dropdowns need to be INSIDE your form.
<form method="post" action="flights.html" >
<p>Enter your source and destination.</p>
<p>
From:</p>
<select name="from">
<option value="Islamabad">Islamabad</option>
<option value="Lahore">Lahore</option>
<option value="murree">Murree</option>
<option value="Muzaffarabad">Muzaffarabad</option>
</select>
<p>
To:</p>
<select name="To">
<option value="Islamabad">Islamabad</option>
<option value="Lahore">Lahore</option>
<option value="murree">Murree</option>
<option value="Muzaffarabad">Muzaffarabad</option>
</select>
<input type="submit" value="search" />
</form>
Second, on the action page, you can use PHP to process the form variables, then output conditional content based on them. Most likely the action should be flights.php, not flights.html
Is there a way to know which select tag submitted form?
<form method="POST" action="submit.php">
<select id="id1" name="sel1" onchange="this.form.submit()">
<option value="1">First</option>
<option value="2" selected="selected">Second</option>
</select>
<select id="id2" name="sel2" onchange="this.form.submit()">
<option value="1">First</option>
<option value="2" selected="selected">Second</option>
</select>
</form>
Non-jQuery solution is preferable, but not mandatory...
P.S. Problem is that selected="select" attribute is generated dynamically (i don't know which option would be selected as default - so i can't compare default with submitted)
The first thing that comes to mind is a hidden field with a value you set. Something like this should do.
<form method="POST" action="submit.php">
<input type="hidden" name="submitselect" value="" id="submitselect">
<select id="id1" name="sel1" onchange="document.getElementById('submitselect').value='sel1';this.form.submit()">
<option value="1">First</option>
<option value="2" selected="selected">Second</option>
</select>
<select id="id2" name="sel2" onchange="document.getElementById('submitselect').value='sel2';this.form.submit()">
<option value="1">First</option>
<option value="2" selected="selected">Second</option>
</select>
</form>
Alternatively, you could have a default option chosen, e.g.
<option value="" selected>-</option>
That would never otherwise be chosen. That way, this option would remain unset in the selects that didn't cause the submit.