Angularjs enable and disable all textboxes when i empty one - javascript

I am beginner in web development and I want to learn more about how I can do controls on my inputs and select.
I have one select and four input.
I want to disable all other input and the select if I select an option or I enter a text in my input
Sorry for my English, can you help me with the AngularJS part, it's important I want to do it with AngularJS.
When the other inputs of selects are disabled I need to display a message for explain why it's impossible to use other input or select
I don't know how I can do, but I think I need to use ng-model , ng-disabled, ng-change, maybe ng-blur and ng-focus
<form>
<div class="form-group">
<label for="Select1">Choix</label>
<select class="form-control" id="exampleFormControlSelect1">
<option>choix 1</option>
<option>choix 2</option>
<option>choix 3</option>
<option>choix 4</option>
<option>choix 5</option>
</select>
</div>
<div class="form-group">
<label for="Input1">Choix A</label>
<input type="text" class="form-control" id="Input1" placeholder="Choix A">
</div>
<div class="form-group">
<label for="Input2">Choix B</label>
<input type="text" class="form-control" id="Input2" placeholder="Choix B">
</div>
<div class="form-group">
<label for="Input3">Choix C</label>
<input type="text" class="form-control" id="Input3" placeholder="Choix C">
</div>
<div class="form-group">
<label for="Input4">Choix D</label>
<input type="text" class="form-control" id="Input4" placeholder="Choix D">
</div>
</form>
Thanks for your future help .

You can use ng-model in selectedChoix to get the value of selected option and ng-disabled if there have no selectedChoix.
Choix
choix 1
choix 2
choix 3
choix 4
choix 5
<div class="form-group">
<label for="Input1">Choix A</label>
<input type="text" class="form-control" id="Input1" placeholder="Choix A" ng-disabled="!selectedChoix">
</div>
<div class="form-group">
<label for="Input2">Choix B</label>
<input type="text" class="form-control" id="Input2" placeholder="Choix B" ng-disabled="!selectedChoix">
</div>
<div class="form-group">
<label for="Input3">Choix C</label>
<input type="text" class="form-control" id="Input3" placeholder="Choix C" ng-disabled="!selectedChoix">
</div>
<div class="form-group">
<label for="Choix D">Email address</label>
<input type="text" class="form-control" id="Input4" placeholder="Choix D" ng-disabled="!selectedChoix">
</div>
This will automatically disabled other input fields until select any option.When select a option then other input fields will enable to write.
you can write your message anywhere until select any option or can use tooltip.

Related

Using Jquery/Javascript to delete elements based on dropdown options

I have a form that has a dropdown menu and a few text fields. I would like the form to delete the text areas if one of the options from the dropdown menu is selected. Thus, if the Credit Card option is selected, only then will these four fields appear.
Card Number
CVV Code
Expiry Date
Name on Card
If no option or Paypal is selected, the above 4 fields should be removed. The reason why it is insufficient to hide them is that they are required fields so hiding alone them will not allow users to submit the form.
Below is the full code. As the code is messy, I have tidied it up here: https://jsfiddle.net/lindychen/ow8zq1y6/28/
Thank you.
<label for="form-field-field_5" class="elementor-field-label">Payment Method</label>
<div class="elementor-field elementor-select-wrapper ">
<select name="form_fields[field_5]" id="form-field-field_5" class="elementor-field-textual elementor-size-sm" required="required" aria-required="true">
<option value=""></option>
<option value="Paypal">Paypal</option>
<option value="Credit Card">Credit Card</option>
</select>
</div>
</div>
<div class="elementor-field-type-number elementor-field-group elementor-column elementor-field-group-field_6 elementor-col-100 elementor-field-required">
<label for="form-field-field_6" class="elementor-field-label">Card Number</label><input type="number" name="form_fields[field_6]" id="form-field-field_6" class="elementor-field elementor-size-sm elementor-field-textual" placeholder="Card Number" required="required" aria-required="true"> </div>
<div class="elementor-field-type-number elementor-field-group elementor-column elementor-field-group-field_7 elementor-col-100 elementor-field-required">
<label for="form-field-field_7" class="elementor-field-label">CVV Code</label><input type="number" name="form_fields[field_7]" id="form-field-field_7" class="elementor-field elementor-size-sm elementor-field-textual" placeholder="CVV Code" required="required" aria-required="true"> </div>
<div class="elementor-field-type-date elementor-field-group elementor-column elementor-field-group-field_8 elementor-col-100 elementor-field-required">
<label for="form-field-field_8" class="elementor-field-label">Expiry Date</label><input type="text" name="form_fields[field_8]" id="form-field-field_8" class="elementor-field elementor-size-sm elementor-field-textual elementor-date-field flatpickr-input" required="required" aria-required="true"> </div>
<div class="elementor-field-type-text elementor-field-group elementor-column elementor-field-group-field_9 elementor-col-100 elementor-field-required">
<label for="form-field-field_9" class="elementor-field-label">Name on card</label><input size="1" type="text" name="form_fields[field_9]" id="form-field-field_9" class="elementor-field elementor-size-sm elementor-field-textual" placeholder="NAME ON CARD" required="required" aria-required="true"> </div>
If I understood you correctly. You just want to show/hide Credit Card details with required fields on the basis of payment option selected. (e.g Credit Card)
Your jQuery selector hierarchic is not correct and there it is not working.
As you don't want to update your HTML/CSS. I have fixed your jQuery code. Working JSFIDDLE is here.
I have also updated the below snippet.
$(document).ready(function() {
$('#form-field-field_5').change(function() {
if ($('#form-field-field_5 option:selected').val().toString() === "Credit Card") {
// Show credit card details
$('.elementor-field-group-field_6, .elementor-field-group-field_7, .elementor-field-group-field_8, .elementor-field-group-field_9').show();
// Add required attribute
$('#form-field-field_6, #form-field-field_7, #form-field-field_8, #form-field-field_9').attr("required", "required");
} else {
// Hide credit card details
$('.elementor-field-group-field_6, .elementor-field-group-field_7, .elementor-field-group-field_8, .elementor-field-group-field_9').hide();
// remove required attribute
$('#form-field-field_6, #form-field-field_7, #form-field-field_8, #form-field-field_9').removeAttr("required");
}
});
});
.elementor-field-type-number.elementor-field-group.elementor-column.elementor-field-group-field_6.elementor-col-100.elementor-field-required,
.elementor-field-type-number.elementor-field-group.elementor-column.elementor-field-group-field_7.elementor-col-100.elementor-field-required,
.elementor-field-type-date.elementor-field-group.elementor-column.elementor-field-group-field_8.elementor-col-100.elementor-field-required,
.elementor-field-type-text.elementor-field-group.elementor-column.elementor-field-group-field_9.elementor-col-100.elementor-field-required {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="elementor-field-type-select elementor-field-group elementor-column elementor-field-group-field_5 elementor-col-100 elementor-field-required">
<label for="form-field-field_5" class="elementor-field-label">Payment Method</label>
<div class="elementor-field elementor-select-wrapper ">
<select name="form_fields[field_5]" id="form-field-field_5" class="elementor-field-textual elementor-size-sm" required="required" aria-required="true">
<option value=""></option>
<option value="Paypal">Paypal</option>
<option value="Credit Card">Credit Card</option>
</select>
</div>
</div>
<div class="elementor-field-type-number elementor-field-group elementor-column elementor-field-group-field_6 elementor-col-100 elementor-field-required">
<label for="form-field-field_6" class="elementor-field-label">Card Number</label><input type="number" name="form_fields[field_6]" id="form-field-field_6" class="elementor-field elementor-size-sm elementor-field-textual" placeholder="Card Number" required="required"
aria-required="true"> </div>
<div class="elementor-field-type-number elementor-field-group elementor-column elementor-field-group-field_7 elementor-col-100 elementor-field-required">
<label for="form-field-field_7" class="elementor-field-label">CVV Code</label><input type="number" name="form_fields[field_7]" id="form-field-field_7" class="elementor-field elementor-size-sm elementor-field-textual" placeholder="CVV Code" required="required"
aria-required="true"> </div>
<div class="elementor-field-type-date elementor-field-group elementor-column elementor-field-group-field_8 elementor-col-100 elementor-field-required">
<label for="form-field-field_8" class="elementor-field-label">Expiry Date</label><input type="text" name="form_fields[field_8]" id="form-field-field_8" class="elementor-field elementor-size-sm elementor-field-textual elementor-date-field flatpickr-input"
required="required" aria-required="true"> </div>
<div class="elementor-field-type-text elementor-field-group elementor-column elementor-field-group-field_9 elementor-col-100 elementor-field-required">
<label for="form-field-field_9" class="elementor-field-label">Name on card</label><input size="1" type="text" name="form_fields[field_9]" id="form-field-field_9" class="elementor-field elementor-size-sm elementor-field-textual" placeholder="NAME ON CARD"
required="required" aria-required="true"> </div>
There are many ways to solve this :
If other than credit card is selected hide the 4 fields + remove the required attribute form the input fields. $('.elementor-field').attr('required',false); This will allow the user to submit the form. (elementor-field I have taken this class just for example. You can add one separate class to the fields you want to hide )
Instead of putting the input fields in html file you generate them dynamically based on the selection.
Make two separate form and show and hide them based on the drop down selection
Write your code like this:
When you hide inputs remove Required ($("#cvv").removeAttr("required");)
When you show inputs add Required ($("#cvv").attr("required",true);)
$(function(){
$("#selectState").on("change",function(){
if (this.value==="show"){
$("div#inputs").show();
$("#cvv").attr("required",true);
$("#cardno").attr("required",true);
}else{
$("#cvv").removeAttr("required");
$("#cardno").removeAttr("required");
$("div#inputs").hide();
}
})
$("#theForm").on("submit", function(){
console.log("Submited");
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<form id="theForm">
<div>
<select id="selectState">
<option value="show">
Show
</option>
<option value="hide">
Hide
</option>
</select>
<div id="inputs">
<br/>
<input id="cvv" name="cvv" type="text" required/>
<br/>
<input id="cardno" name="cardno" type="text" required/>
<br/>
<input id="date" name="date" type="text" />
</div>
<br/>
<input type="submit" value="Submit"/>
</div>
</form>
</body>
</html>

How can i write the validation rule(required) for the select dropdown using Jquery Validation Plugin

I have a set of html5 fields inside a registration form tags in the code below.The inbuilt jquery plugin called validation.js is working fine with all the html fields which doesnt have any other jquery function defined on the html element tag's "id" attribute. In validate.js , the jquery validation rules: and messages: are customised with respect to html element's "name" attribute.My problem is jquery validations are not working on those html element tags whose id is used for defining other functions
For eg :
<p>Are you a user1 or user2 </p>
<div class="form-group">
<label class="control-label" for="usertype"></label>
<select name="usertype" class="form-control input-lg" placeholder="Select user type" id="usertype">
<option value="none" selected>Select user type</option>
<option id="S" value="user1">user1</option>
<option id="T" value="user2">user2</option>
</select>
In the above code snippet you can see the usertype . when the usertype is selected there is a jquery which works onChange event with respect to the id="usertype".But my requirement is to do the validation that,the user must mandatorily select the usertype with the jquery validation plugin as well with the other jquery function .How to solve this? How can i write the validation rule for the select dropdown (required).
<div class="form-group">
<input type="email" class="form-control input-lg" name="uname" placeholder="email address" id="uname" onBlur="checkAvailability()">
<span id="user-availability-status"></span>
<p><img src="loading-small.gif" id="loaderIcon" style="display:none" /></p>
<div id ="errors">
</div>
</div>
<div class="form-group">
<input class="form-control input-lg" name="password" id="password" placeholder="Password" type="password">
</div>
<div class="form-group">
<input class="form-control input-lg" name="password2" placeholder="Re-enter password" type="password">
</div>
<!--<div class="form-group">
<input type="password" class="form-control input-lg" name="cfmPassword" placeholder="Retype above password" id="cfmPassword">
<span id="confirm-password-status"></span>
</div>-->
<p>Are you a user1 or user2 </p>
<div class="form-group">
<label class="control-label" for="usertype"></label>
<select name="usertype" class="form-control input-lg" placeholder="Select user type" id="usertype">
<option value="none" selected>Select user type</option>
<option value="user1">user1</option>
<option value="user2">user2</option>
</select>
<div id ="errors">
</div>
</div>
<p> </p>
<!--Student Section Form BEGIN-->
<div id="user1">
<div class="form-group" >
<input type="text" align="center" class="form-control input-lg" name="user1_first_name" placeholder="First Name" id="firstname">
</div>
<div class="form-group">
<input type="text" align="center" class="form-control input-lg" name="user1_last_name" placeholder="Last Name" id="lastname">
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Gender</label>
<div class="col-xs-9">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" class="form-control input-lg" name="gender" value="male" /> Male
</label>
<label class="btn btn-default">
<input type="radio" class="form-control input-lg" name="gender" value="female"/> Female
</label>
<label class="btn btn-default">
<input type="radio" class="form-control input-lg" name="gender" value="other" /> Other
</label>
</div>
</div>
</div>

how can i make key value pair for label and value label : value

i want to make table with label and value pair, suppose i have something like this <label>i can </label> and value like this <input type="text" value="why not" /> my desired result
{"i can" : " why not "}
here is my sample element with code snippet
var result = [];
$('div label').each(function(){
var $this = $(this);
var label = $this.text();
//console.log(label);
value = $this.siblings().attr('value');
//console.log(value);
result.push({label:label,value:value});
});
console.log(result);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<form action="uploaddata.php" method="POST">
<div class="form-group">
<label for="text-1483332101835-preview" class="fb-text-label">Mobile Number : </label>
<input type="text" class="form-control" name="mobNum" value="963242726" id="mobNum">
</div>
<div class="form-group">
<label for="textarea" class="fb-textarea-label" >Comments : </label>
<textarea type="textarea" class="form-control" name="comments" maxlength="11" id="comments">
very bad service
</textarea>
</div>
<div class="form-group">
<label for="select" class="fb-select-label">Select Your Locality: </label>
<select type="select" class="form-control" name="locality" id="locality">
<option value="vrpura">V.R Pura</option><option selected="true" value="bel">B.E.L</option>
<option value="jala">Jalahalli</option>
</select>
</div>
<div class="fb-checkbox form-group field-checkbox-1483332316174-preview">
<input type="checkbox" class="checkbox" name="checkbox-1483332316174-preview" id="checkbox-1483332316174-preview">
<label for="checkbox-1483332316174-preview" class="fb-checkbox-label">Home Delivery: </label>
</div>
<div class="fb-checkbox form-group field-checkbox-group-1483332396337-preview">
<label for="checkbox-group-1483332396337-preview" class="fb-checkbox-group-label">Select Your Item : </label>
<div class="checkbox-group">
<input value="jamoon" type="checkbox" class="checkbox-group" name="" id="checkbox-group-1483332396337-preview-0" checked="">
<label for="checkbox-group-1483332396337-preview-0">Jamoon</label><br>
<input value="samosa" type="checkbox" class="checkbox-group" name="checkbox-group-1483332396337-preview[]" id="checkbox-group-1483332396337-preview-1" selected="">
<label for="checkbox-group-1483332396337-preview-1">samosa</label><br>
<input value="beedi" type="checkbox" class="checkbox-group" name="checkbox-group-1483332396337-preview[]" id="checkbox-group-1483332396337-preview-2" selected="">
<label for="checkbox-group-1483332396337-preview-2">beedi</label><br>
</div>
</div>
</form>
Please note for check group i want all the checked value with single label and all its associated checked values.
and for select i want single selected value how it can be done?
please help me thanks in advance!!!
However as per OP statement, You need to create a object then set it property
var obj = {};
obj[label] = value;
result.push(obj);
var result = [];
$('div label').each(function() {
var $this = $(this);
var label = $this.text();
value = $this.siblings().attr('value');
var obj = {};
obj[label] = value;
result.push(obj);
});
console.log(result);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<form action="uploaddata.php" method="POST">
<div class="form-group">
<label for="text-1483332101835-preview" class="fb-text-label">Mobile Number :</label>
<input type="text" class="form-control" name="mobNum" value="963242726" id="mobNum">
</div>
<div class="form-group">
<label for="textarea-1483332158183-preview" class="fb-textarea-label">Comments :</label>
<textarea type="textarea" class="form-control" name="comments" maxlength="11" id="comments">
very bad service
</textarea>
</div>
<div class="form-group">
<label for="select-1483332201030-preview" class="fb-select-label">Select Your Locality:</label>
<select type="select" class="form-control" name="locality" id="locality">
<option value="vrpura">V.R Pura</option>
<option selected="true" value="bel">B.E.L</option>
<option value="jala">Jalahalli</option>
</select>
</div>
<div class="fb-checkbox form-group field-checkbox-1483332316174-preview">
<input type="checkbox" class="checkbox" name="checkbox-1483332316174-preview" id="checkbox-1483332316174-preview">
<label for="checkbox-1483332316174-preview" class="fb-checkbox-label">Home Delivery:</label>
</div>
<div class="fb-checkbox form-group field-checkbox-group-1483332396337-preview">
<label for="checkbox-group-1483332396337-preview" class="fb-checkbox-group-label">Select Your Item :</label>
<div class="checkbox-group">
<input value="jamoon" type="checkbox" class="checkbox-group" name="" id="checkbox-group-1483332396337-preview-0" checked="">
<label for="checkbox-group-1483332396337-preview-0">Jamoon</label>
<br>
<input value="samosa" type="checkbox" class="checkbox-group" name="checkbox-group-1483332396337-preview[]" id="checkbox-group-1483332396337-preview-1" selected="">
<label for="checkbox-group-1483332396337-preview-1">samosa</label>
<br>
<input value="beedi" type="checkbox" class="checkbox-group" name="checkbox-group-1483332396337-preview[]" id="checkbox-group-1483332396337-preview-2" selected="">
<label for="checkbox-group-1483332396337-preview-2">beedi</label>
<br>
</div>
</div>
</form>
I would recommend you to use .serializeArray()
Encode a set of form elements as an array of names and values.
console.log($("form").serializeArray());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<form action="uploaddata.php" method="POST">
<div class="form-group">
<label for="text-1483332101835-preview" class="fb-text-label">Mobile Number :</label>
<input type="text" class="form-control" name="mobNum" value="963242726" id="mobNum">
</div>
<div class="form-group">
<label for="textarea-1483332158183-preview" class="fb-textarea-label">Comments :</label>
<textarea type="textarea" class="form-control" name="comments" maxlength="11" id="comments">
very bad service
</textarea>
</div>
<div class="form-group">
<label for="select-1483332201030-preview" class="fb-select-label">Select Your Locality:</label>
<select type="select" class="form-control" name="locality" id="locality">
<option value="vrpura">V.R Pura</option>
<option selected="true" value="bel">B.E.L</option>
<option value="jala">Jalahalli</option>
</select>
</div>
<div class="fb-checkbox form-group field-checkbox-1483332316174-preview">
<input type="checkbox" class="checkbox" name="checkbox-1483332316174-preview" id="checkbox-1483332316174-preview">
<label for="checkbox-1483332316174-preview" class="fb-checkbox-label">Home Delivery:</label>
</div>
<div class="fb-checkbox form-group field-checkbox-group-1483332396337-preview">
<label for="checkbox-group-1483332396337-preview" class="fb-checkbox-group-label">Select Your Item :</label>
<div class="checkbox-group">
<input value="jamoon" type="checkbox" class="checkbox-group" name="checkbox-group-1483332396337-preview[]" id="checkbox-group-1483332396337-preview-0" checked="">
<label for="checkbox-group-1483332396337-preview-0">Jamoon</label>
<br>
<input value="samosa" type="checkbox" class="checkbox-group" name="checkbox-group-1483332396337-preview[]" id="checkbox-group-1483332396337-preview-1" checked="">
<label for="checkbox-group-1483332396337-preview-1">samosa</label>
<br>
<input value="beedi" type="checkbox" class="checkbox-group" name="checkbox-group-1483332396337-preview[]" id="checkbox-group-1483332396337-preview-2" checked="">
<label for="checkbox-group-1483332396337-preview-2">beedi</label>
<br>
</div>
</div>
</form>
You can loop in label and inputs the way you doing or as said by Satpal you can use map and serializeArray too
Now if you dont use serializeArray then you have to check what type of input label has then only you can get the selected text or values
For Eg:
If next is checkbox then following checks has to be done to get value,
if($(this).next().is(":checkbox")){
$.each($(this).siblings(":checked"), function(){
alert($(this).val());
// get all checked values
});
}
You can go through this to know more. So better to go with serializeArray

show different form with radio buttons

In my HTML I have 4 fieldsets.
In the second fieldset there are 2 radio buttons. The first one needs to show the thirth fieldset and the second one needs to show the 4th fieldset.
Now the problem is that the second radio button does it's job. It shows the right fieldset and it hides when the first radio button is selected. But the first radio button does nothing anymore.
It won't show the thirth fieldset. This is since I added the classList.remove for the fieldset2 var.
I don't know why this line of code permanently hides the thirth fieldset.
I just found out that the first var gets declined completely. Only the last var will be executed.
Even if I put them in different files or different functions and even if I make different classes for them in css the var will overwrite the first one...
function form
<form>
<fieldset>
<legend>Contactgegevens</legend>
<label for="naam">Naam</label>
<input type="text" id="naam" required/>
<label for="bedrijf">Naam bedrijf</label>
<input type="email" id="bedrijf" required/>
<label for="adres">Adres</label>
<input type="text" id="adres" required/>
<label for="postcode">Postcode</label>
<input type="text" pattern="[1-9][0-9]{3}\s?[a-zA-Z]{2}" id="postcode" placeholder="1234AB" required/>
<label for="plaats">Plaatsnaam</label>
<input type="number" id="plaats" required/>
<label for="telefoon">Telefoon</label>
<input type="tel" id="telefoon" />
<label for="land">E-mail</label>
<input type="text" id="land" placeholder="voorbeeld#email.com" required/>
</fieldset>
<fieldset>
<legend>Ik wil mij aanmelden voor:</legend>
<label for="project">Een project</label>
<input type="radio" name="aanmelden" id="project"/>
<label for="stage">Een stage</label>
<input type="radio" name="aanmelden" id="stage"/>
</fieldset>
<fieldset>
<legend>Project</legend>
<label for="titel">Titel project</label>
<input type="text" id="titel" />
<label for="omschrijving">Opdrachtomschrijving</label>
<textarea id="omschrijving" rows="6" cols="25"></textarea>
<label for="doelgroep">Doelgroepomschrijving</label>
<textarea id="doelgroep" rows="6" cols="25"></textarea>
<label for="intentie">Intentie van het project</label>
<textarea id="intentie" rows="6" cols="25"></textarea>
<label for="looptijd">Looptijd</label>
<input type="text" id="looptijd" placeholder="Bijv: 10 weken"/>
<label for="deadline">Deadline</label>
<input type="text" id="deadline" placeholder="dd-mm-jjjj"/>
<label for="geschikt">Geschikt voor</label>
<select id="geschikt">
<option>Eerstejaar studenten</option>
<option>Tweedejaars studenten</option>
<option>Derdejaars studenten</option>
<option>Afstudeer studenten</option>
<option>Onbekend</option>
</select>
</fieldset>
<fieldset>
<legend>Stage</legend>
<label for="geschikt2">Geschikt voor</label>
<select id="geschikt2">
<option>Tweedejaars studenten</option>
<option>Afstudeer studenten</option>
<option>Onbekend</option>
</select>
<label for="hoelang">Hoelang is de stage?</label>
<select id="hoelang">
<option>10 weken</option>
<option>20 weken</option>
</select>
<label for="begindatum">Begindatum</label>
<input type="text" id="begindatum" placeholder="dd-mm-jjjj"/>
<label for="werkzaamheden">Omschrijving stagewerkzaamheden</label>
<textarea id="werkzaamheden" rows="6" cols="25"></textarea>
</fieldset>
</form>
Keuze(){
console.log("hoi")
var fieldset = document.querySelector('fieldset:nth-of-type(3)');
fieldset.classList.add('hidefield');
document.querySelector('input[type="radio"]:first-of-type').onclick = function() {
fieldset.classList.add('showfield');
}
document.querySelector('input[type="radio"]:last-of-type').onclick = function() {
fieldset.classList.remove('showfield');
}
var fieldset2 = document.querySelector('fieldset:nth-of-type(4)');
fieldset2.classList.add('hidefield');
document.querySelector('input[type="radio"]:last-of-type').onclick = function() {
fieldset2.classList.add('showfield');
}
document.querySelector('input[type="radio"]:first-of-type').onclick = function() {
fieldset2.classList.remove('showfield');
}
}
window.onload=formKeuze;

toggle form between display between specific input fields and full form [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 8 years ago.
Improve this question
I have a form in a page that means to manage jobs posted in another page. The form has a few key fields that decide if the job posting gets approved or rejected. I would like the form to display initially only those fields specified as critical or key to the selection process. And also have a toggle button to display the full form in case the reviewer want more info on the particular job being reviewed.
How do I specify the fields I want to make critical?
And how do I toggle between those fields and the full form?
The form I have so far is this (critical inputs are Industry, Experience and Skills required):
<div class="row">
<div class="col-md-8 col-md-offset-2 col-sm-6 col-sm-offset-3">
<div class="w-section inverse">
<div class="w-box sign-in-wr bg-5">
<div class="form-body">
<h5>
Please provide the following information about employment opportunity.
</h5>
<div class="row">
<form class="form-light padding-20" id="addJob">
<div class="form-group">
<div class="col-lg-6">
<label style="font-size:16px;" data-for="title">Title</label>
<input type="text" class="form-control" name="title" id="title" placeholder="">
</div>
<div class="col-md-12">
<label style="font-size:16px;" data-for="salary">Salary</label>
<input type="text" class="form-control" name="salary" id="salary" placeholder="">
</div>
<div class="col-lg-12">
<label style="font-size:16px;" data-for="location">Location</label>
<input type="text" class="form-control" name="location" id="location" placeholder="">
</div>
<div class="col-lg-4">
<label style="font-size:16px;" data-for="company">Company</label>
<input type="text" class="form-control" name="company" id="company" placeholder="">
</div>
<div class="col-lg-4">
<label style="font-size:16px;" data-for="jobDescription">Job Description</label>
<input type="text" class="form-control" name="jobdescription" id="jobdescription" placeholder="">
</div>
<div class="col-lg-2">
<label style="font-size:16px;" data-for="industry">Industry</label>
<input type="text" class="form-control" name="industry" id="industry" placeholder="">
<label class="checkbox"><input type="checkbox" name="profit" id="profit">Profit</a></label>
<label class="checkbox"><input type="checkbox" name="nonprofit" id="nonprofit">Non-Profit</a></label>
</div>
<div class="col-lg-2">
<label style="font-size:16px;" data-for="experience">Experience</label>
<input type="text" class="form-control" name="experience" id="experience" placeholder="">
</div>
<div class="col-lg-2">
<label style="font-size:16px;" data-for="reqSkills">Skills required</label>
<select name="requiredSkillsDropdown">
<option value="HTML5">HTML5</option>
<option value="CS3">CS3</option>
<option value="javascrip">Javascript</option>
<option value="jquery">jQuery</option>
</select>
</div>
<div class="col-lg-6">
<label style="font-size:16px;" data-for="workexp">Address</label>
<input type="text" class="form-control" name="street" id="street" placeholder="Street">
<input type="text" class="form-control" name="city" id="city" placeholder="City">
<input type="text" class="form-control" name="state" id="state" placeholder="State">
<input type="text" class="form-control" name="zip" id="zip" placeholder="Zip">
</div>
<div class="col-lg-4">
<label style="font-size:16px;" data-for="contact">Contact</label>
<input type="text" class="form-control" name="contact" id="zip" placeholder="">
</div>
<div class="col-lg-12">
<button class="btn btn-two pull-right" id="capturejobinfo" type="button">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
Give the containers for the inputs a custom data-* attribute indicating if they are critical or not (sample from above)
<div class="col-lg-2" data-critical="true">
<label style="font-size:16px;" data-for="experience">Experience</label>
<input type="text" class="form-control" name="experience" id="experience" placeholder="">
</div>
And for others use false for data-critical. You can then toggle with:
$("div.form-group div[data-critical=true]").show(); //to show
Or .hide() to hide.

Categories

Resources