Change a CSS display style in Javascript - javascript

I have a problem with a bit of my javascript code.
I am trying to get my #showAddress to display: block when the deliverservice radio button is clicked/checked.
I've tried looking at some Stack Overflow posts but a lot of them are too advanced for my current level (I just started JavaScript).
<label>Delivery Type</label>
<input type="radio" name="delivery" value="Pickup" id="pickupService">Pickup
<input type="radio" name="delivery" value="Deliver" id="deliverService">Deliver
</p>
<div id="showAddress">
<p>
<label for="deliveryAddress">Delivery Address</label><br>
<input type="text" name="deliveryAddress" id="deliveryAddress" placeholder="Enter street number + name"><br>
<input type="text" name="deliverySuburb" id="deliverySuburb" placeholder="Enter your [suburb], [state]"><br>
<input type="text" name="deliveryAddress" id="deliveryPostcode" placeholder="Enter your postcode"><br>
Billing address same as Above
</div>
<p>
<label for="billingAddress">Billing Address</label><br>
<input type="text" name="deliveryAddress" id="billingAddress" placeholder="Enter street number + name"><br>
<input type="text" name="deliverySuburb" id="billingSuburb" placeholder="Enter your [suburb], [state]"><br>
<input type="text" name="deliveryAddress" id="billingPostcode" placeholder="Enter your postcode"><br>
</p>
<p>
I believe the error is happening in my JavaScript, however it's only two functions. The first two lines are my initialise function, which is calling my second function down below.
var showDelivery = document.getElementById("deliverService");
showDelivery.onclick = showAddress;
function showAddress() {
document.getElementById("showAddress").style.display= 'block';
}
#additionalInformation, #showAddress {
display: none;
}

You should change this line
showDelivery.onclick = showAddress;
to something like this:
showDelivery.onclick = function(){showAddress();};

Alternatively, you can set the onclick listener on the input element itself (in the html), to directly call the javascript function from the HTML element, rather than cluttering your JavaScript
<input type="radio" name="delivery" value="Deliver" id="deliverService" onclick="showAddress()">Deliver
function showAddress() {
document.getElementById("showAddress").style.display= 'block';
}
#additionalInformation, #showAddress {
display: none;
}
<label>Delivery Type</label>
<input type="radio" name="delivery" value="Pickup" id="pickupService">Pickup
<input type="radio" name="delivery" value="Deliver" id="deliverService" onclick="showAddress()">Deliver
<div id="showAddress">
<p>
<label for="deliveryAddress">Delivery Address</label><br>
<input type="text" name="deliveryAddress" id="deliveryAddress" placeholder="Enter street number + name"><br>
<input type="text" name="deliverySuburb" id="deliverySuburb" placeholder="Enter your [suburb], [state]"><br>
<input type="text" name="deliveryAddress" id="deliveryPostcode" placeholder="Enter your postcode"><br>
Billing address same as Above
</p>
</div>
<p>
<label for="billingAddress">Billing Address</label><br>
<input type="text" name="deliveryAddress" id="billingAddress" placeholder="Enter street number + name"><br>
<input type="text" name="deliverySuburb" id="billingSuburb" placeholder="Enter your [suburb], [state]"><br>
<input type="text" name="deliveryAddress" id="billingPostcode" placeholder="Enter your postcode"><br>
</p>
EDIT: An example of using addEventListener
document.getElementById("deliverService").addEventListener("click", function() {
document.getElementById("showAddress").style.display= 'block';
});
document.getElementById("deliverService").addEventListener("click", function() {
document.getElementById("showAddress").style.display= 'block';
});
#additionalInformation, #showAddress {
display: none;
}
<label>Delivery Type</label>
<input type="radio" name="delivery" value="Pickup" id="pickupService">Pickup
<input type="radio" name="delivery" value="Deliver" id="deliverService">Deliver
<div id="showAddress">
<p>
<label for="deliveryAddress">Delivery Address</label><br>
<input type="text" name="deliveryAddress" id="deliveryAddress" placeholder="Enter street number + name"><br>
<input type="text" name="deliverySuburb" id="deliverySuburb" placeholder="Enter your [suburb], [state]"><br>
<input type="text" name="deliveryAddress" id="deliveryPostcode" placeholder="Enter your postcode"><br>
Billing address same as Above
</p>
</div>
<p>
<label for="billingAddress">Billing Address</label><br>
<input type="text" name="deliveryAddress" id="billingAddress" placeholder="Enter street number + name"><br>
<input type="text" name="deliverySuburb" id="billingSuburb" placeholder="Enter your [suburb], [state]"><br>
<input type="text" name="deliveryAddress" id="billingPostcode" placeholder="Enter your postcode"><br>
</p>

Related

Would like to redirect users depending on the radio button value

I am trying to append a string to the description field and redirect users depending on the radio button they choose to click on. In this case, a customer clicks on "Cleardent Customer" radio button and upon submission, a string should be attached to the description field and it should direct them to a specific page.
It is a demo page where I am trying to figure out if the user is a returning customer or a new customer.
I tried my best to write the code but there seem to be a lot of mistakes that I am making. It's not passing value to the description field and not redirecting properly, etc.
Here's my CODE
$("#sfdemoPreSubmit").click(function(e) {
e.preventDefault();
$("#sfcompany").val($("#sflast_name").val() + ", " + $("#sffirst_name").val());
$("#sfphone").val(cleanPhNum($("#sfphone").val()));
$("#sfstate").val(getProvince($("#sfphone").val()));
$("#sfdescription").val($("sfdescription").val() + $("input[name=source]:checked").val());
$("#sfDemoForm").validate();
if ($("#sfDemoForm").valid()) {
grecaptcha.execute();
}
});
function redirect() {
var province = $('#sfstate').val();
var customerCategory = $('input[name=source]:checked').val();
if (customerCategory == 'cleardent customer') {
$("#retURL").val("https://cleardent.com/demo/demo-thankyou-existing.html");
}
else if (province == 'BC') {
$("#retURL").val("https://cleardent.com/demo/demo-thankyou-bc.html");
} else if (province == 'ON') {
$("#retURL").val("https://cleardent.com/demo/demo-thankyou-on.html");
} else if (province == 'AB') {
$("#retURL").val("https://cleardent.com/demo/demo-thankyou-ab.html");
} else {
$("#retURL").val("https://cleardent.com/demo/demo-thankyou-default.html");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<form id="sfDemoForm" action="https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST" class="sky-form">
<input name="captcha_settings" value="{"keyname":"IC_ClearDent_Main_Demo","fallback":"true","orgId":"00D1I0000002QyG","ts":""}" type="hidden">
<input name="oid" value="00D1I0000002QyG" type="hidden">
<input name="retURL" id="retURL" value="https://test.cleardent.com/demo-thankyou-bc.html" type="hidden">
<fieldset>
<label class="input margin-bottom-15"><i class="icon-prepend fa fa-user"></i>
<input id="sffirst_name" maxlength="40" name="first_name" size="20" type="text" required placeholder="First name">
</label>
<label class="input margin-bottom-15"><i class="icon-prepend fa fa-user"></i>
<input id="sflast_name" maxlength="80" name="last_name" size="20" type="text" required placeholder="Last name">
</label>
<label class="input margin-bottom-15"><i class="icon-prepend fa fa-envelope"></i>
<input id="sfemail" maxlength="80" name="email" size="20" type="email" required placeholder="Email address">
</label>
<!-- <label class="label" for="phone">Phone</label>-->
<label class="input margin-bottom-25"><i class="icon-prepend fa fa-phone"></i>
<input id="sfphone" maxlength="40" name="phone" size="20" type="text" required placeholder="Phone">
</label>
<div class="radio-button">
<input class="form-check-input" type="radio" name="source" id="inlineRadio1" value="new customer">
<label class="form-check-label" for="inlineRadio1">New Customer </label>
<input class="form-check-input" type="radio" name="source" id="inlineRadio2" value="cleardent customer">
<label class="form-check-label" for="inlineRadio2">ClearDent Customer </label>
<input class="form-check-input" type="radio" name="source" id="inlineRadio3" value="other3">
<label class="form-check-label" for="inlineRadio3">Other </label>
</div>
<!--<label class="label" for="description">Notes</label>-->
<label class="textarea textarea-resizable margin-bottom-25">
<textarea id="sfdescription" name="description" placeholder="Is there something specific you want to see from ClearDent?"></textarea>
</label>
<input id="sfstate" name="state" type="hidden">
<input id="sflead_source" name="lead_source" type="hidden" value="Website">
<input id="sfcompany" name="company" type="hidden">
<input id="sfCampaign_ID" name="Campaign_ID" type="hidden" value="7011I000000d5auQAA">
</fieldset>
<div id="recaptcha" class="g-recaptcha" data-sitekey="6LeXmEAUAAAAAG7VJd6Z8YCVkP44AgAlqCUmpRAi" data-callback="submitDemoToLead" data-size="invisible"> </div>
<footer>
<button id="sfdemoPreSubmit" class="btn-u"><i class="fa fa-paper-plane fa-fw"></i> Get Your Free Demo</button>
</footer>
</form>
</div>
</div>
Thank you so much! Please let me know if you have any questions.

how to calculate text field value without submit button

I am trying to calculate a value without a submit button. If a user enters the weight, height and number of PCs then my code should calculate the value and display it in the total text field automatically without refreshing the page. How can I do that?
This is my calculation: total = weight * height * no of pcs
<div class="right">
<label>
<span>Id :</span>
<input id="name" type="text" name="roll" />
</label>
<label>
<span>material name :</span>
<input type="text" name="material" placeholder="material Name" />
</label>
<input name="myprice" type="hidden" size="10" maxlength="10" value="1000" readonly/>
<label>
<span>Weight:</span>
<input name="kg" type="text" size="10" maxlength="10" value="0"/>
</label>
<label>
<span> height:</span>
<input name="mytax" type="text" value="0" size="3" maxlength="4"/>
</label>
<label>
<span> no of pcs :</span>
<input name="no" type="text" id="no" value="0" size="3" maxlength="4"/>
</label>
<label>
<span> Total :</span>
<input name="Total" type="text" value="0" size="3" maxlength="4"/>
</label>
</div>
try this code
javascript code
<script type="text/javascript">
function getOrderTotal() {
var iweight= document.myform.weight.value;
var iheight= document.myform.iheight.value;
var ino= document.myform.no.value;
if(!iweight.match(recurrency)) {
alert('Please provide an item cost in 0.00 format!');
}
else {
var ifinal=iweight * iheight * ino;
);
ifinal *= 100;
ifinal = Math.ceil(ifinal);
ifinal /= 100;
if(ifinal) {
ifinal = ifinal;
}
document.getElementById('mytotal').value = ifinal;
}
}
html code
<div class="right">
<label>
<span> Id :</span>
<input id="name" type="text" name="roll" />
</label>
<label>
<span>material name :</span>
<input type="text" name="material" placeholder="material Name" />
</label>
<label>
<span>Weight:</span>
<input name="weight" type="text" id="weight" onchange="getOrderTotal()" size="10" maxlength="10" value="0"/>
</label>
<label>
<span> height:</span>
<input name="height" id="height" type="text" onchange="getOrderTotal()" value="0" size="3" maxlength="4"/>
</label>
<label>
<span> no of pcs :</span>
<input name="no" type="text" id="no" onchange="getOrderTotal()" value="0" size="3" maxlength="4"/>
</label>
<label>
<span> Total :</span>
<input name="Total" type="text" id="mytotal" value="0" size="3" maxlength="4"/>
</label>
</div>
with jquery
$( '[name="mytax"]' ).change(function() {
//add here your formula
});
You will Use something like this
Include jquery code in your file
<script>
$(document).ready(function() {
$('input[name="no"]').keyup(function() {
var kg = $('input[name="kg"]').val();
var mytax = $('input[name="mytax"]').val();
var no = $('input[name="no"]').val();
var total = parseInt(kg) * parseInt(mytax) * parseInt(no);
$('input[name="Total"]').val(total);
});
});
</script>
Hope it will Work
Try this:
In html add ids to all input fields so that we can easily identify any element:
<div class="right">
<label>
<span> Id :</span>
<input id="name" type="text" name="roll" />
</label>
<label>
<span>material name :</span>
<input type="text" name="material" placeholder="material Name" />
</label>
<input name="myprice" id="myprice" type="hidden" size="10" maxlength="10" value="1000" readonly/>
<label>
<span>Weight:</span>
<input name="kg" id="kg" type="text" size="10" maxlength="10" value="0"/>
</label>
<label>
<span> height:</span>
<input name="mytax" id="mytax" type="text" value="0" size="3" maxlength="4"/>
</label>
<label>
<span> no of pcs :</span>
<input name="no" id="no" type="text" value="0" size="3" maxlength="4"/>
</label>
<label>
<span> Total :</span>
<input name="total" id="total" type="text" value="0" size="3" maxlength="4"/>
</label>
</div>
jquery:
1) check if value not then store value in any variable with parseFloat
here we have use parseFloat because because price or weight may be in float value.
$( document ).ready(function() {
$('#kg, #mytax, #no').change(function () {
var kg = ($("#kg").val() != "") ? parseFloat($("#kg").val()) : 0;
var mytax = ($("#mytax").val() != "") ? parseFloat($("#mytax").val()) : 0;
var no = ($("#no").val() != "") ? parseFloat($("#no").val()) : 0;
var total = kg * mytax * no;
$('#total').val(total);
});
});
Without using JQuery or any other JavaScript Library, the plain vanilla JavaScript solution will be to tap the "keypress" event.
Here is an example code just to give you the idea:
<html>
<head>
<script>
function calculate () {
var a = document.getElementById("a").value;
var b = document.getElementById("b").value;
document.getElementById("result").innerHTML = a * b;
}
</script>
</head>
<body>
First Value <input type="text" id="a"></input>
<br>
Second Value <input type="text" id="b" onkeyup="calculate()"></input>
<br>
<div id="result"></div>
</body>
</html>
The function calculate() is invoked on key press. It takes the value and does the multiplication.
You can try this.
<div class="right">
<label>
<span>Id :</span>
<input id="name" type="text" name="roll" />
</label>
<label>
<span>material name :</span>
<input type="text" name="material" placeholder="material Name" />
</label>
<input name="myprice" type="hidden" size="10" maxlength="10" value="1000" readonly/>
<label>
<span>Weight:</span>
<input name="kg" type="text" id="weight" onblur="findTotal()" size="10" maxlength="10" value="0"/>
</label>
<label>
<span> height:</span>
<input name="mytax" type="text" id="height" onblur="findTotal()" value="0" size="3" maxlength="4"/>
</label>
<label>
<span> no of pcs :</span>
<input name="no" type="text" id="nopc" onblur="findTotal()" value="0" size="3" maxlength="4"/>
</label>
<label>
<span> Total :</span>
<input name="Total" type="text" id="total" value="0" size="3" maxlength="4"/>
</label>
</div>
<script type="text/javascript">
function findTotal(){
var weight = document.getElementById('weight').value;
var height = document.getElementById('height').value;
var pc = document.getElementById('nopc').value;
total = weight * height * pc;
if(isNaN(total)){
alert("Please enter only numbers");
}
document.getElementById('total').value = total;
}
</script>

JavaScript Validation needed for this form, it does not work whatever I try

This form needs to calculate cost for each course (which is not done yet). It needs JavaScript Validation, and PHP for Username and Password info to go somewhere. The credentials will be used in a PHP login. Can you help?
<form form name="myform" id="myform" method="post">
<p>
<label for="name">Name</label>
<input type=text name="name" placeholder="Enter your full name" />
</p>
<p>
<label for="gender">Gender</label>
<input type="radio" name="gender" value="M"> Male
<input type="radio" name="gender" value="F"> Female
</p>
<p>
<label for="birthday">Date of Birth</label>
<input type="date" name="bday" />
</p>
<p>
<label for="username">Create Username</label>
<input type="text" id="username" name="username">
</p>
<p>
<label for="password" name="name">Password</label>
<input type="password" id="password" name="username" value="">
</p>
<p>
<label for="Comments">Address</label>
</p>
<textarea cols="40" rows="5" name="Address" id="address" placeholder="Address"></textarea>
<br>
<p>
<label for="postcode">Postcode</label>
<input type="text" name="postcode" id="postcode" placeholder="Enter your postcode" />
</p>
<p>
<label for="contactnumber">Contact Number</label>
<input type="number" id="contactnumber" placeholder="Enter your number" />
</p>
<p>
<label for="email">Email</label>
<input type="text" name="email" id="email" placeholder="Enter your email" />
</label>
</p>
<p>
<label for="select">Select Course</label>
</p>
<select id="course" name="courses">
<option value="000" selected="selected">[Select course]</option>
<option value="screenplay">Screenplay FL0330 04-01-16</option>
<option value="camerawork">Camerawork FL566 05-01-16</option>
<option value="soundrecording">Sound Recording FB700 06-01-16</option>
<option value="lighting">Lighting FN250 11-01-16</option>
<option value="editing">Editing FB420 12-01-16</option>
<option value="3dgraphics">3D Graphics FA554 13-01-16</option>
<option value="makeup">Make up and Prosthetics FA128 15-01-16</option>
</select>
<br>
<input type="submit" name="submit" value="Submit Now">
</form>

Append HTML FORM in JQuery or Javascript

I'm trying to append some HTML FORM codes but it seems that there's wrong in my code. When I try to click the button "Add another experience", it will go to a required field then say "Please fill in this field". What seems to be the problem? Here is my HTML CODE:
<div class="form-group row" style="width: 100%;">
<div class="col-md-12 exp">
<label for="exp"><br>Do you have call center experience? </label>
<label class="radio-inline"><input type="radio" name="exp" id="exp" value="Yes">Yes</label>
<label class="radio-inline"><input type="radio" name="exp" id="exp" value="No">No</label>
<br>
<label for="exp"><br>Did you have any language training? </label>
<label class="radio-inline"><input type="radio" name="training" id="training" value="Yes">Yes</label>
<label class="radio-inline"><input type="radio" name="training" id="training" value="No">No</label>
<br>
<label for="exp"><br><br>Company Name: </label>
<input type="input" style="width: 60%;" class="form-control" id="company_name" placeholder="Company Name">
<br>
<label for="exp"><br><br>Position: </label>
<input type="input" class="form-control" id="position" placeholder="Position">
<label for="bday"> Duration: </label>
<input id="date-picker-2" type="date" class="date-picker form-control" placeholder="Date Started"/>
<input id="date-picker-3" type="date" class="date-picker form-control" placeholder="Date Ended"/> <input type="checkbox" id="present" value="present"> Present
<br><br><br>
<button class="btn btn-primary add_exp1" >Add another experience</button>
</div>
</div
And here is my JQUERY CODE:
$(".add_exp1").click(function(){
$(".exp").append('<br>
<label for="exp">Another Work Experience<br><br>Company Name: </label>
<input type="input" style="width: 60%;" class="form-control" id="company_name" placeholder="Company Name">
<br>
<label for="exp"><br><br>Position: </label>
<input type="input" class="form-control" id="position" placeholder="Position">
<label for="bday"> Duration:
</label>
<input id="date-picker-2" type="date" class="date-picker form-control" placeholder="Date Started"/>
<input id="date-picker-3" type="date" class="date-picker form-control" placeholder="Date Ended"/> <input type="checkbox"
id="present" value="present"> Present
<br><br><br>'); });
I just have it working like this.
Jquery in the head
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
$(document).ready(function () {
$(".add_exp1").click(function(){
$(".exp").append('<br><label for="exp">Another Work Experience<br><br>Company Name: </label>' +
'<input type="input" style="width: 60%;" class="form-control" id="company_name" placeholder="Company Name">'+
'<br>'+
'<label for="exp"><br><br>Position: </label>'+
'<input type="input" class="form-control" id="position" placeholder="Position">'+
'<label for="bday"> Duration:'+
' </label>'+
'<input id="date-picker-2" type="date" class="date-picker form-control" placeholder="Date Started"/>'+
'<input id="date-picker-3" type="date" class="date-picker form-control" placeholder="Date Ended"/> <input type="checkbox"'+
'id="present" value="present"> Present'+
'<br><br><br>');
});
})
</script>
And body in the html is the same as yours.
The only change is the appending of the strings for the new elements in html.
To have multiple lines, you need to escape it or append the strings.
When you add multiline string in javascript code you can escape the literal newline by '\' otherwise newline symbol will break your js code. That's the right way to use multiline string:
$(".add_exp1").click(function(){
$(".exp").append('<br>\
<label for="exp">Another Work Experience<br><br>Company Name: </label>\
<input type="input" style="width: 60%;" class="form-control" id="company_name" placeholder="Company Name">\
<br>\
<label for="exp"><br><br>Position: </label>\
<input type="input" class="form-control" id="position" placeholder="Position">\
<label for="bday"> Duration:\
</label>\
<input id="date-picker-2" type="date" class="date-picker form-control" placeholder="Date Started"/>\
<input id="date-picker-3" type="date" class="date-picker form-control" placeholder="Date Ended"/> <input type="checkbox"\
id="present" value="present"> Present\
<br><br><br>'); });
Here is working fiddle
You have two ways to do that the most simple way is to wrap a part of html that you want to clone in a div.
In your html:
<div class="form-group row" style="width: 100%;">
<div class="col-md-12 exp">
<label for="exp"><br>Do you have call center experience? </label>
<label class="radio-inline"><input type="radio" name="exp" id="exp" value="Yes">Yes</label>
<label class="radio-inline"><input type="radio" name="exp" id="exp" value="No">No</label>
<br>
<label for="exp"><br>Did you have any language training? </label>
<label class="radio-inline"><input type="radio" name="training" id="training" value="Yes">Yes</label>
<label class="radio-inline"><input type="radio" name="training" id="training" value="No">No</label>
<br>
<div id ="partialForm">
<label for="exp"><br><br>Company Name: </label>
<input type="input" style="width: 60%;" class="form-control" id="company_name" placeholder="Company Name">
<br>
<label for="exp"><br><br>Position: </label>
<input type="input" class="form-control" id="position" placeholder="Position">
<label for="bday"> Duration: </label>
<input id="date-picker-2" type="date" class="date-picker form-control" placeholder="Date Started"/>
<input id="date-picker-3" type="date" class="date-picker form-control" placeholder="Date Ended"/> <input type="checkbox" id="present" value="present"> Present
</div>
<br><br><br>
<button class="btn btn-primary add_exp1" >Add another experience</button>
</div>
</div>
I wrapped a part of the form in a div with id = "partialForm"
Then I clonned this part in jquery and added specific html elements
$(".add_exp1").click(function(){
var newForm= $("#partialForm").clone();
$('input',newForm).val('');
var generatedBr = $(document.createElement('br'));
var header = $(document.createElement('label'))
.attr('for','exp')
.text('Another Work Experience');
$('.exp').append( generatedBr,
header,
newForm);
});
Here is the working fiddle: http://jsfiddle.net/defee/nna15kph/
Another way is to generate Html from javascript with the use of best practices.
Here there is an example how to generate an input in jquery:
var dateStartInput = $(document.createElement('input'))
.attr('id','date-picker-2')
.attr('type','date')
.attr('placeholder','Date Started')
.addClass('date-picker form-control');

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;

Categories

Resources