We Keep Coding

Click function does not append HTML block using append() function

I'm trying to append the same code again on click. My 'education_wrap" class empty for now. Other than that I have just added in-line CSS for now.
var max_fields = 5; //maximum input boxes allowed
var wrapper = $(".education_wrap"); //Fields wrapper
var add_button = $("#add_education"); //Add button ID
$(add_button).click(function(e){
e.preventDefault();
var total_fields = wrapper[0].childNodes.length;
if(total_fields < max_fields){
$(wrapper).append('<p style="font-weight:bold;">Institute Name<span class="required">*</span></p><div class="item"><input type="text" id="institute" name="institute" placeholder="Institute Name" required/></div><p style="font-weight:bold;">Degree Name<span class="required">*</span></p><div class="item"><input type="text" id="degree" name="degreen" placeholder="Bachelor of Engineering in Software Engineering, etc." required/></div><p style="font-weight:bold;">From<span class="required">*</span></p><div class="item"><input type="date" id="from_date" name="from_date" value="2020-07-22" required/></div><p style="font-weight:bold;">To<span class="required">*</span></p><div class="item"> <input type="date" id="to_date" name="to_date" value="2020-07-22" required/></div></div>'); //add input box
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form><h3 style="font-weight: bold;">Education</h3>
<div class="education_wrap">
<p style="font-weight:bold;">Institute Name<span class="required">*</span></p>
<div>
<input type="text" id="institute" name="institute" placeholder="Institute Name" required/>
</div>
<p style="font-weight:bold;">Degree Name<span class="required">*</span></p>
<div>
<input type="text" id="degree" name="degreen" placeholder="Bachelor of Engineering in Software Engineering, etc." required/>
</div>
<p style="font-weight:bold;">From<span class="required">*</span></p>
<div>
<input type="date" id="from_date" name="from_date" value="2020-07-22" required/>
</div>
<p style="font-weight:bold;">To<span class="required">*</span></p>
<div>
<input type="date" id="to_date" name="to_date" value="2020-07-22" required/>
</div>
</div>
<div style="margin-top:20px;">
<button id="add_education">Add Another Education</button>
</div></form>
Also, I cannot get my mind around how to submit multiple sets of information using POST method for once. Please guide.

var max_fields = 5; //maximum input boxes allowed
var wrapper = $(".education_wrap"); //Fields wrapper
var add_button = $("#add_education"); //Add button ID
$(add_button).click(function(e) {
var total_fields = wrapper[0].childNodes.length;
alert(total_fields < max_fields);
//if (total_fields < max_fields) { // this condition returns false that's why it creates issue
$(wrapper).append('<p style="font-weight:bold;">Institute Name<span class="required">*</span></p><div class="item"><input type="text" id="institute" name="institute" placeholder="Institute Name" required/></div><p style="font-weight:bold;">Degree Name<span class="required">*</span></p><div class="item"><input type="text" id="degree" name="degreen" placeholder="Bachelor of Engineering in Software Engineering, etc." required/></div><p style="font-weight:bold;">From<span class="required">*</span></p><div class="item"><input type="date" id="from_date" name="from_date" value="2020-07-22" required/></div><p style="font-weight:bold;">To<span class="required">*</span></p><div class="item"> <input type="date" id="to_date" name="to_date" value="2020-07-22" required/></div></div>'); //add input box
//}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<h3 style="font-weight: bold;">Education</h3>
<div class="education_wrap">
<p style="font-weight:bold;">Institute Name<span class="required">*</span></p>
<div>
<input type="text" id="institute" name="institute" placeholder="Institute Name" required/>
</div>
<p style="font-weight:bold;">Degree Name<span class="required">*</span></p>
<div>
<input type="text" id="degree" name="degreen" placeholder="Bachelor of Engineering in Software Engineering, etc." required/>
</div>
<p style="font-weight:bold;">From<span class="required">*</span></p>
<div>
<input type="date" id="from_date" name="from_date" value="2020-07-22" required/>
</div>
<p style="font-weight:bold;">To<span class="required">*</span></p>
<div>
<input type="date" id="to_date" name="to_date" value="2020-07-22" required/>
</div>
</div>
<div style="margin-top:20px;">
<button type="submit" id="add_education">Add Another Education</button>
</div>
</form>
Note:- There is a slight mistake in your code. There is one if condition which returns a false value that's why a block of code is not executed.

There is many issue in your Code, follow below things:
1 . if(total_fields < max_fields){ Here your condition getting false, so no append process will begin
2 . use type="button" instead of submit
3 . use separate button for append html and for submit form
for how to submit multiple sets of information using POST
use input name as array like <input type="date" id="from_date" name="from_date[]" value="2020-07-22" required/>
use classes instead of id here because of repetition here id="from_date"

Display two fields as mandatory based on selected radio button

I have this radio button in HTML.
<div class="radio">
<label>
<input id="vendor" type="radio" ng-model="c.data.cvendor" name="customerType" value="cvendor" ng-true-value="CVendor" ng-false-value="false">
${CVendor}
</label>
</div>
Once this option checked, the two fields below should be displayed and are mandatory. How can I achieve this in HTML?
<div class="form-group is-required">
<label for="fieldb">${FieldB}:</label>
<input type="text" class="my-input" ng-model="c.data.fieldb" id="fieldb" placeholder="Enter Field B">
</div>
<div class="form-group is-required">
<label for="fieldc">${FieldC}:</label>
<input type="text" class="my-input" ng-model="c.data.fieldc" id="fieldc" placeholder="Enter Field C">
</div>

Try this ng-if="c.data.cvendor==='cvendor'".
Radio button sets c.data.cvendor to 'cvendor'. Thus you can control the display of two input fields via ng-if
As for the fields to be mandatory, you can try ng-required="true".
<div class="form-group is-required" ng-if="c.data.cvendor==='cvendor'">
<label for="fieldb">${FieldB}:</label>
<input type="text" class="my-input" ng-model="c.data.fieldb" id="fieldb" placeholder="Enter Field B" ng-required="true">
</div>
<div class="form-group is-required" ng-if="c.data.cvendor==='cvendor'">
<label for="fieldc">${FieldC}:</label>
<input type="text" class="my-input" ng-model="c.data.fieldc" id="fieldc" placeholder="Enter Field C" ng-required="true">
</div>

Try This code
var checkBox;
function DemoFunctin() {
checkBox = document.querySelector('input[type="checkbox"]');
var textInput1 = document.querySelector('input[name="first"]');
var textInput2 = document.querySelector('input[name="second"]');
if (textInput1.hasAttribute('required') !== true && textInput2.hasAttribute('required') !== true) {
textInput1.setAttribute('required','required');
textInput2.setAttribute('required','required');
}
else {
textInput1.removeAttribute('required');
textInput2.removeAttribute('required');
}
}
if(checkBox){
checkBox.addEventListener('change',toggleRequired,false);
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<h3>display-two-fields-as-mandatory-based-on-selected-radio-button</h3>
<form>
<p><input type="radio" onclick="DemoFunctin();"/>Check Me to make the Text Box a Required Field</p>
<input type="text" name="first"/>
<input type="text" name="second"/>
<input type="submit" value="Submit" />
</form>
</body>
</html>

You can achieve this by using ng-required. Based on 'c.data.fieldb' value it will become mandatory or non-mandatory. Similarly, for hide and show you can use ng-show / ng-hide.
<div class="form-group is-required">
<label for="fieldb">${FieldB}:</label>
<input type="text" class="my-input" ng-model="c.data.fieldb" id="fieldb" placeholder="Enter Field B" ng-required="c.data.cvendor == 'CVendor'">
</div>
<div class="form-group is-required">
<label for="fieldc">${FieldC}:</label>
<input type="text" class="my-input" ng-model="c.data.fieldc" id="fieldc" placeholder="Enter Field C" ng-required="c.data.cvendor == 'CVendor'">
</div>

Get input value using JavaScript

i need to get my input value using JavaScript but i get undefined only. Here is my code:
document.forms[0].elements[0] or
document.forms['form_id']['fieldname']
Where is my mistake?
Here is my form:
<form action="registrationHandler.php" onsubmit="return validateRegistrationForm()" method="post" name="reg_form" enctype="multipart/form-data" id="reg-form">
<div>
<label for="username">Username</label>
<input type="text" name="username" required="">
</div>
<div>
<label for="password">Password</label>
<input type="password" name="password" required="">
</div>
<div>
<label for="email">E-mail</label>
<input type="text" name="email">
</div>
<div>
<label for="telephone">Telephone</label>
<input type="text" name="telephone">
</div>
<div>
<label for="sex">Sex</label>
<input type="radio" value="male" name="sex">Male
<input type="radio" value="female" name="sex">Female
</div>
<div>
<label for="user_photo">User photo</label>
<input type="file" name="user_photo">
</div>
<div>
<label for="birthDate">Birth Date</label>
<input type="date" name="birthDate">
</div>
<div>
<label for="country">Country</label>
<input type="text" name="country">
</div>
<div>
<label for="info">Info about user</label>
<textarea name="info"></textarea>
</div>
<div>
<input type="hidden" name="PHPSESSID" value="<?php echo session_id(); ?>">
</div>
<div><input type="submit" value="Register"></div>
</form>
Form lies in php file, maybe problem in that? Because when i console log forms.length i get zero...

You need to put these DOM object accessing codes into the window.onload event handler,because it need to wait the document loaded before accessing the DOM objects.

Can you try for example:
document.forms['reg-form']['email'].value
I think you might not are not targeting the right Dom-element with
document.forms['form_id']['fieldname']
Please look at this jsfiddle-Sample:
http://jsfiddle.net/3gevoyn5/8/
I have two input fields and get the Values with this code, which is then output again:
function getValues(){
var test = document.forms['myform']['firstname'].value + " " + document.forms['myform']['lastname'].value;
document.getElementById("demo").innerHTML = test;
}

form validation cannot read property style of null

I have a form with validation but the date validation message is not showing and in the console it reads..property style of null and highlights this code "error_box.style.display = 'block';" within the context of this function.
function displayError(fieldname, message){
var input_field = document.querySelector('#'+fieldname);
var error_box = document.querySelector('#'+fieldname+'Message');
addClass(input_field, 'error');
removeClass(input_field, 'correct');
error_box.style.display = 'block';
}
I have the full code in a fiddle:
http://jsfiddle.net/tUa5e/
HTML
<form action="#">
<div class="formColumn1">
<label for="pickup"><span class="textStyle">Pick-up</span>
<input type="date" id="pickup"></label><br>
<label for="dropoff"><span class="textStyle">Drop-off</span>
<input type="date" id="dropoff"><br>
<span id="dropoff" class="message">That date is invalid</span></label>
<div id="pickuperror"></div>
</div>
<!--COLUMN ONE END -->
</div>
<!--COLUMN TWO -->
<div class="formColumn2">
<label for="name"><span class="textStyle">Full Name*</span>
<input type="text" id="name"><br>
<span id="nameMessage" class="message">You must have a valid name</span>
</label>
<label for="email"><span class="textStyle">Email*</span>
<input type="text" id="email"><br>
<span id="emailMessage" class="message">You must have a valid email</span>
</label>
<label for="phoneNumber"><span class="textStyle">Phone Number*</span>
<input type="text" id="phoneNumber"><br>
<span id="phoneNumberMessage" class="message">You must have a valid phone number</span>
</label>
<label for="postalAddress"><span class="textStyle">Postal Address</span>
<input type="text" id="postalAddress"><br>
</label>
<label for="city"><span class="textStyle">City</span>
<input type="text" id="city"><br>
</label>
<span class="textStyle">Addtional Information</span>
<textarea name="comment" form="usrform">Enter text here...</textarea>
<input type="submit" id="submit" value="Submit"/>
<!--COLUMN TWO END-->
</div>
</form>
<!--END OF FORM-->
</div>

radio button change visible input fields

I'm trying to do a separate formulary for individuals and corporations
If the visitor check the "Individual" radio button, it would display a form
If the visitor check the "Corporation" radio button, it would display a different form
<fieldset>
<input type="radio" name="tipo_cadastro" value="individual_form" id="individual_form" style="margin:0px !important">
<strong>Individual Form</strong><br/>
<input type="radio" name="tipo_cadastro" value="corporation_form" id="corporation_form" style="margin:0px !important">
<strong>Corporation Form</strong>
<!-- If Individual Form is checked -->
<legend>Personal Data</legend>
<label for="Name">Full Name</label>
<input id="Name" type="text" />
<label for="City">City</label>
<input id="City" type="text" />
<label for="Email">Email</label>
<input id="Email" type="text" />
<!-- If Corporation Form is checked -->
<legend>Corporation Data</legend>
<label for="Name">Name</label>
<input id="Name" type="text" />
<label for="City">City</label>
<input id="City" type="text" />
<label for="Email">Email</label>
<input id="Email" type="text" />
</fieldset>
Ps: Because of my other javascript, I can't use other <fieldset> than the existing one

You'd need to wrap something around the fields to show/hide, even just a <div> tag with an ID.
Then for your radio buttons, you'd want to add onchange & onmouseup event handlers (to account for people either clicking to change the value, or using their keyboard).
eg.
<script type="text/javascript">
function onchange_handler(obj, id) {
var other_id = (id == 'personal')? 'corporate' : 'personal';
if(obj.checked) {
document.getElementById(id + '_form_fields').style.display = 'block';
document.getElementById(other_id + '_form_fields').style.display = 'none';
} else {
document.getElementById(id + '_form_fields').style.display = 'none';
document.getElementById(other_id + '_form_fields').style.display = 'block';
}
}
</script>
<fieldset>
<input type="radio" name="tipo_cadastro" value="individual_form" id="individual_form" style="margin:0px !important" onchange="onchange_handler(this, 'personal');" onmouseup="onchange_handler(this, 'personal');">
<strong>Individual Form</strong><br/>
<input type="radio" name="tipo_cadastro" value="corporation_form" id="corporation_form" style="margin:0px !important" onchange="onchange_handler(this, 'corporate');" onmouseup="onchange_handler(this, 'corporate');">
<strong>Corporation Form</strong>
<!-- If Individual Form is checked -->
<div id="personal_form_fields">
<legend>Personal Data</legend>
<label for="Name">Full Name</label>
<input id="Name" type="text" />
<label for="City">City</label>
<input id="City" type="text" />
<label for="Email">Email</label>
<input id="Email" type="text" />
</div>
<!-- If Corporation Form is checked -->
<div id="corporate_form_fields" style="display: none;">
<legend>Corporation Data</legend>
<label for="Name">Name</label>
<input id="Name" type="text" />
<label for="City">City</label>
<input id="City" type="text" />
<label for="Email">Email</label>
<input id="Email" type="text" />
</div>
</fieldset>