Enable and disable input field with select - html

I have a form, where I would like that the two input fields "CVR number" and "Telephone" is only enabled if the value is "Yes". (Se attached file which is the end result). The form is looking like this now: Example on my form
I tried to make something work with the below code, but I am not sure that I am on the correct track? The second input field is not getting active when I use yes.
What do you think?
HTML
<form>
<select id="mySelect" onChange="check(this);">
<option>No</option>
<option>Yes</option>
</select>
<input type="text" id="company" disabled="disabled" placeholder="CVR number">
<input type="text" id="company" disabled="disabled" placeholder="Telephone">
</form>
JS
function check(elem) {
document.getElementById('company').disabled = !elem.selectedIndex;
}
Updated HTML code
<h3>Do you want a company account?</h3>
<div class="form-group">
<select class="form-control" id="mce-COMPANY" name="COMPANY" id="mySelect" onChange="check(this);">
<option value="Nej">Nej</option>
<option value="Ja">Ja</option>
</select>
</div>
<input placeholder="CVR nummer" name="EMAIL" class="mail" type="text" id="mce-EMAIL" id="company1" disabled="disabled"></input>
<span class="icon4"><i class="fa fa-envelope" aria-hidden="true"></i></span>
<input placeholder="Telefonnummer" name="EMAIL" class="mail" type="text" id="mce-EMAIL" id="company2" disabled="disabled" ></input>
<span class="icon4"><i class="fa fa-envelope" aria-hidden="true"></i></span>
function check(elem) {
document.getElementById('company').disabled = !elem.selectedIndex;
}
<form>
<select id="mySelect" onChange="check(this);">
<option>No</option>
<option>Yes</option>
</select>
<input type="text" id="company" disabled="disabled" placeholder="CVR number">
<input type="text" id="company" disabled="disabled" placeholder="Telephone">
</form>

You have used the same ID for both the fields.
Use 2 different Ids and it works..
function check(elem) {
document.getElementById('company1').disabled = !elem.selectedIndex;
document.getElementById('company2').disabled = !elem.selectedIndex;
}
<form>
<select id="mySelect" onChange="check(this);">
<option>No</option>
<option>Yes</option>
</select>
<input type="text" id="company1" disabled="disabled" placeholder="CVR number">
<input type="text" id="company2" disabled="disabled" placeholder="Telephone">
</form>

Related

HTML search option with filters that link to external website

I'm required to use only HTML to create a web form in which the search result will link me to the external website's search results. There are search options with filters that I have included and when I enter the input and select the filters, it links me to the external website but it does not filter out the search from my own web form, meaning that it would treat any search as a normal search without the filters for 'month', '6months' and 'year' option.
https://www.worldscientific.com/search/advanced - The website that I am supposed to link the search result from my web form to.
HTML Code:
<html>
<style>
*{
box-sizing: border-box;
}
#border1 {
width: 1000px;
height: 500px;
padding: 15px;
border: 2px;
}
</style>
<h2>Part 3 - World Science</h2>
<form id="worldscience_search-form"
action="https://www.worldscientific.com/action/doSearch?field1=AllField&text1=text1&publication=&Ppub=&AfterMonth=&AfterYear=&BeforeMonth=&BeforeYear=&earlycite=on" method="get" target="_blank" class="jcf-select" autocomplete="off">
<div id="border1">
<div style = "float:left; width:20%">
<select id="textArea2" name="field1" style = "height:40px; width:120px;">
<option value="AllField">Anywhere</option>
<option value="Title">Title</option>
<option value="Contrib">Author</option>
<option value="Keyword">Keywords</option>
<option value="Abstract">Abstract</option>
</select>
<br><br><br>
<label for="publication">Published in</label> <br><br><br>
<label>Publication Date</label>
<input type="hidden" value="AfterYear">
<input type="hidden" value="BeforeYear">
<br>
</div>
<div style = "float:left; width:20%">
<input type="text" placeholder="Enter Search term" name="text1" style = "width: 500px; height:40px"><br><br>
<input type="text" name="publication" placeholder="e.g. Journal of Theoretical Biology" style = "width:500px; height :40px">
<br><br><br>
<input type="radio" name="Ppub" value="" checked="checked">
<label>All dates</label>
<br><br><br>
<input type="radio" name="Ppub" value="">
<label>Last</label>
<br><br><br>
<input type="radio" name="Ppub" value="">Custom Range
</div>
<div style = "float:left; width:50%">
<br><br><br><br><br><br><br><br><br><br>
<select id="Ppub" value="" style = "height:40px; width:120px;">
<option value="">Select</option>
<option value="20181218-20190118">month</option>
<option value="20180718-20190118">6 months</option>
<option value="20180118-20190118">year</option></select><br><br>
<input type="submit" value="Search" />
</div>
</form>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br>
</html>
I don't think that I should have coded the values in the option value. How am I supposed to filter out without coding in the dates?
You have to use hidden inputs: (I only show start of the form)
<form id="worldscience_search-form" action="https://www.worldscientific.com/action/doSearch" method="get" target="_blank" class="jcf-select" autocomplete="off">
<input type="hidden" name="field1" value="AllField">
<input type="hidden" name="text1" value="text1">
<input type="hidden" name="publication" value="">
<input type="hidden" name="Ppub" value="">
<input type="hidden" name="AfterMonth" value="">
<input type="hidden" name="AfterYear" value="">
<input type="hidden" name="BeforeMonth" value="">
<input type="hidden" name="BeforeYear" value="">
<input type="hidden" name="earlycite" value="on">

html - how to send to email both - select tag value and input value?

<!DOCTYPE html>
<html>
<body>
<form action="" method="post" enctype="text/plain">
IP Address:<br>
<input type="text" name="" placeholder=""><br>
Port:<br>
<input type="text" name="" placeholder=""><br>
Game:<br>
<input type="text" name="" placeholder="" ><br>
Type:<br>
<input type="option" name="Type" size="50"><br><br>
<select name="cars">
<option value="volvo">Volvo XC90</option>
<option value="saab">Saab 95</option>
<option value="mercedes">Mercedes SLK</option>
<option value="audi">Audi TT</option>
</select>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
</body>
</html>
I want to send this to mail when I write the right action="mailto:....." I can send only the input things, but not select tag selected option i tried any of this things separately it works but when i wanna do this with one button it doesn't works...
you can use in your HTML somthing like this :
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<input type="email" name="email" placeholder="Email" id="Email"><br>
<input type="text" name="titre" placeholder="Title" id="Title"><br>
<textarea name="content" placeholder="Content" id="Content"></textarea><br>
<button id="send">send</button>
Now using jquery add this :
$("#send").click(function(){
var email=$('#Email').val();
var title=$('#Title').val();
var content=$('#Content').val();
document.location.href = "mailto:"+email+"?subject="+title+"&body="+content;
});
for the options tag in your select you have to know that you can only send the selected value from options inside the select tag
hope this will help you.

How can I prevent blank HTML form submissions to go through?

I am using Formspree (which is awesome) except: I have set all my fields to required, when I try manually I can't submit a form without filling everything properly, and however I still get a bunch of blank forms coming through. Has anybody experienced / fixed this before?
Thanks!
<form action="https://formspree.io/XXXXXXXX" method="post">
<input name="_gotcha" style="display: none" type="text">
<input class="form-control input-lg" name="firstname" placeholder="First Name" required type="text">
<input class="form-control input-lg" name="lastname" placeholder="Last name" required type="text">
<input class="form-control input-lg" name="phone" placeholder="Phone number" required type="text">
<select required name="country" class="form-control input-lg" style="border-radius:none; -webkit-appearance: none; padding-top:0px;">
<option value="" disabled selected>Please select your country </option>
<option value="Afganistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="other">Not in the List</option>
<!-- etc -->
</select>
<input type="hidden" name="referrer" id="referrer_field" />
<input type="hidden" name="url" id="url_field" />
<button id="demo" type="submit">GO</button>
And this is another Solution for your code, as this will work even if somebody put "spaces or leave it with blank" in the field of Name or Phone.
Check the Fiddle..
// Bind the event handler to the "submit" JavaScript event
$('form').submit(function () {
// Get the Login Name value and trim it
var fname = $.trim($('#fname').val());
var lname = $.trim($('#lname').val());
var phon =$.trim($('#phon').val());
// Check if empty of not
if (fname === '') {
alert('First name is empty.');
return false;
}
else if (lname === '') {
alert('Last Name is empty.');
return false;
}
else if (phon === '') {
alert('Phone is empty.');
return false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<form action="https://formspree.io/XXXXXXXX" method="post">
<input name="_gotcha" style="display: none" type="text">
<input class="form-control input-lg" name="firstname" placeholder="First Name" id="fname" required type="text">
<input class="form-control input-lg" name="lastname" placeholder="Last name" id="lname" required type="text">
<input class="form-control input-lg" name="phone" placeholder="Phone number" id="phon" required type="text">
<select name="country" class="form-control input-lg" style="border-radius:none; -webkit-appearance: none; padding-top:0px;">
<option value="" disabled selected>Please select your country </option>
<option value="Afganistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="other">Not in the List</option>
<!-- etc -->
</select>
<input type="hidden" name="referrer" id="referrer_field" />
<input type="hidden" name="url" id="url_field" />
<button id="demo" type="submit">GO</button>
If somebody type space to the input box then this Jquery code will work and ask him to fill proper text in fields.
Try W3Schools example of
http://www.w3schools.com/tags/att_input_required.asp
<input class="form-control input-lg" name="firstname" placeholder="First Name" required >
with no equals or anything
I thought the required tag was
required="True/false"
A simple solution would be something like this.
You can do this by using JQuery
// Bind the event handler to the "submit" JavaScript event
$('form').submit(function () {
// Get the Login Name value and trim it
var name = $.trim($('#log').val());
// Check if empty of not
if (name === '') {
alert('Text-field is empty. You cannot leave is blank!');
return false;
}
});
.text-label {
color: #cdcdcd;
font-weight: bold;
}
#pwd{
margin:10px 18px;
}
#logBtn{
margin:10px 90px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<form action="login.php" method="post">
<label>Login Name:</label>
<input type="text" name="email" id="log" />
<br/>
<label>Password:</label>
<input type="password" name="password" id="pwd" />
<br/>
<input type="submit" id="logBtn" name="submit" value="Login" />
</form>

How can i enable specific textboxes when a specific combo box option is chosen

Sorry but i'm new in html and i would like to ask how can i enable specific textboxes when a specific combo box option is chosen.
I've seen the topic how to activate a textbox if I select an other option in drop down box but i don't understoond what am i doing wrong.
I want when a combo box option such as option1 is selected to enable textboxes with the name lesson1, lesson2, lesson3, when a combo box option such as option2 is selected to enable textboxes with the name lesson4, lesson5, lesson6 etc for the user to fill.
Here is my code
function Select(val) {
var element=document.getElementById("options1");
var element2=document.getElementById("options2");
var element3=document.getElementById("options3");
if (val=="option 1"){
element.style.display="block";
else
element.style.display="none"; }
else if (val=="option2"){
element2.style.display="block";
else
element2.style.display="none"; }
else if (val=="option 3"){
element3.style.display="block";
else
element3.style.display="none"; }
}
<label class="formLabel">
Options*</label><br />
<select name="select2" required="" onchange="Select(this.value);">
<option disabled="disabled" selected="selected" value=""></option>
<option value="">option 1</option>
<option value="">option 2</option>
<option value="">option 3</option>
</select><br />
<div id="options1" style="display: none;">
<label class="classLabel">
lesson 1*
</label>
<label class="classLabel">
lesson 2*</label>
<label class="classLabel">
lesson 3*</label><br />
<input class="formText" name="field7" required="" type="text" />
<input class="formText" name="field8" required="" type="text" />
<input class="formText" name="field9" required="" type="text" /><br />
</div>
<div id="options2" style="display: none;">
<label class="classLabel">
lesson 4*
</label>
<label class="classLabel">
lesson 5*</label>
<label class="classLabel">
lesson 6*</label><br />
<input class="formText" name="field10" required="" type="text" />
<input class="formText" name="field11" required="" type="text" />
<input class="formText" name="field12" required="" type="text" /><br />
</div>
<div id="options3" style="display: none;">
<label class="classLabel">
lesson 7*
</label>
<label class="classLabel">
lesson 8*</label>
<label class="classLabel">
lesson 9*</label><br />
<input class="formText" name="field13" required="" type="text" />
<input class="formText" name="field14" required="" type="text" />
<input class="formText" name="field15" required="" type="text" /><br />
</div>
<input id="submitButton" type="submit" value="send" /></form> </div>
You have not added values to combo box , combo box must be like
<select name="select2" required="" onchange="Select(this.value);">
<option disabled="disabled" selected="selected" value=""></option>
<option value="option 1">option 1</option>
<option value="option 2">option 2</option>
<option value="option 3">option 3</option>
</select>
and there is some syntax error in your js script also
please try the following code
syntax of if else wrong
<script>function Select(val) {
var element=document.getElementById("options1");
var element2=document.getElementById("options2");
var element3=document.getElementById("options3");
if (val=="option 1")
element.style.display="block";
else
element.style.display="none";
if (val=="option 2")
element2.style.display="block";
else
element2.style.display="none";
if (val=="option 3")
element3.style.display="block";
else
element3.style.display="none";
}
</script>
<script>
function Select(val) {
var element=document.getElementById("options1");
var element2=document.getElementById("options2");
var element3=document.getElementById("options3");
if (val=="option 1")
element.style.display="block";
else
element.style.display="none";
if (val=="option 2")
element2.style.display="block";
else
element2.style.display="none";
if (val=="option 3")
element3.style.display="block";
else
element3.style.display="none";
}
</script>
<label class="formLabel">Options*</label><br />
<select name="select2" required="" onchange="Select(this.value);">
<option disabled="disabled" selected="selected" value=""></option>
<option value="option 1">option 1</option>
<option value="option 2">option 2</option>
<option value="option 3">option 3</option></select><br />
<div id="options1" style="display:none;">
<label class="classLabel">lesson 1* </label>
<label class="classLabel">lesson 2*</label>
<label class="classLabel" >lesson 3*</label><br />
<input class="formText" name="field7" required="" type="text" />
<input class="formText" name="field8 required="" type="text" />
<input class="formText" name="field9" required="" type="text" /><br />
</div>
<div id="options2" style="display:none;">
<label class="classLabel" >lesson 4* </label>
<label class="classLabel">lesson 5*</label>
<label class="classLabel" >lesson 6*</label><br />
<input class="formText" name="field10" required="" type="text" />
<input class="formText" name="field11" required="" type="text" />
<input class="formText" name="field12" required="" type="text" /><br />
</div>
<div id="options3" style="display:none;">
<label class="classLabel">lesson 7* </label>
<label class="classLabel">lesson 8*</label>
<label class="classLabel">lesson 9*</label><br />
<input class="formText" name="field13" required="" type="text" />
<input class="formText" name="field14" required="" type="text" />
<input class="formText" name="field15" required="" type="text" /><br />
</div>
<input id="submitButton" type="submit" value="send" /></form>
</div>

Angularjs - How to do a Select - option filter

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.