We Keep Coding

JS FormData giving UncaughtTypeError when the HTML form data seems okay

Here's the HTML code:
<div class="some_class">
<form id="some_acc">
<p>First Name</p>
<input type="text" id="firstname" name="firstname" placeholder="Enter your first name">
<p>Last Name</p>
<input type="text" id="lastname" name="lastname" placeholder="Enter your last name">
<p>Date of Birth</p>
<input type="date" id="dob" name="dob" placeholder="Enter your date of birth">
<p>Email</p>
<input type="text" id="email" name="email" placeholder="Enter your email">
<p>Gender</p>
<div class="fieldset_account">
<fieldset>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="Other" name="gender" value="other">
<label for="other">Other</label>
</fieldset>
</div>
<p>Choose no.</p>
<div class="acc_no">
<fieldset>
<input type="radio" id="regular" name="account_type" value="regular">
<label for="account_type">Acc 1</label>
<input type="radio" id="zero_bal" name="account_type" value="zero_bal">
<label for="account_type">Acc 2</label>
<input type="radio" id="children_acc" name="account_type" value="children_acc">
<label for="account_type">Acc 3</label>
<input type="radio" id="sr_cit_acc" name="account_type" value="sr_cit_acc">
<label for="account_type">Acc 4</label>
</fieldset>
</div>
<p>Remarks</p>
<div id="textarea_bio">
<textarea name="bio" id="bio" cols="30" rows="10"></textarea>
</div>
<br><br><input type="submit" value="Submit">
</form>
</div>
Here's the JS:
function FormDataToJSON(FormElement){
var formData = new FormData(FormElement);
var ConvertedJSON= {};
for (const [key, value] of formData.entries())
{
ConvertedJSON[key] = value;
}
return ConvertedJSON
}
var ReceivedJSON = FormDataToJSON(document.getElementById('some_acc'));
console.log(ReceivedJSON);
The error I'm getting is this:
Uncaught TypeError: Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'.
Doesn't seem like there's anything wrong with the HTML form data. I'm guessing the radio buttons are the issue, but when I comment them out and try again, the error persists. What is going wrong here?
Thanks

select option with additional form: hide unwanted input fields and show the wanted ones as required

Below is part of my code. Idea is you pick one option and it's input fields are marked as required, while options that are not picked are hidden.
I would like the displayed additional input field to be marked by the js script as "required", like input fields in --MAIN FORM--
I suppose it needs only one additional line of code added to script, but no idea how to do it. I am just a beginner. I believe it needs additional line like this one: $("."+formClass).slideDown('medium'); with pointing to all displayed inputs and .attr('required', true); but I've no idea how to do it. Any help will be appreciated :-)
Thanks and have a nice Sunday
Here's part of html code and js code:
$('#productType').on('change', function() {
var formClass = $(this).val();
$(".op").hide();
$("." + formClass).slideDown('medium');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--MAIN FORM-->
<form id="product_form" action="php/add.php" method="POST">
<label for="sku">SKU</label>
<input type="text" id="sku" name="sku" required><br>
<label for="name">Name</label>
<input type="text" id="name" name="name" required><br>
<label for="price">Price ($)</label>
<input type="number" id="price" name="price" required><br>
<label for="productType" id="switcher">Product type</label>
<select name="productType" id="productType" required>
<option value="" selected disabled>Product type</option>
<option id="dvd" value="dvd">DVD</option>
<option id="book" value="book">Book</option>
<option id="furniture" value="furniture">Furniture</option>
</select>
<!--ADDITIONAL FORM DEPENDING ON SELECT OPTION-->
<div class="additional-form dvd op" id="dvd-form">
<p>Please provide size in MB</p>
<label for="size">Size (MB)</label>
<input type="number" id="size" name="size">
</div>
<div class="additional-form book op" id="book-form">
<p>Please provide weight in KG</p>
<label for="weight">Weight (KG)</label>
<input type="number" id="weight" name="weight">
</div>
<div class="additional-form op furniture" id="furniture-form">
<p>Please provide dimensions in CM</p>
<label for="height">Height (CM)</label>
<input type="number" id="height" name="height"><br>
<label for="width">Width (CM)</label>
<input type="number" id="width" name="width"><br>
<label for="length">Length (CM)</label>
<input type="number" id="length" name="length">
</div>
</form>

Remove the required attribute from all the inputs inside the elements being hidden, and add it to the ones being shown with .slideDown().
$('#productType').on('change', function() {
var formClass = $(this).val();
$(".op").hide().find(':input').removeAttr('required');
$("." + formClass).slideDown('medium').find(':input').attr('required', true);;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--MAIN FORM-->
<form id="product_form" action="php/add.php" method="POST">
<label for="sku">SKU</label>
<input type="text" id="sku" name="sku" required><br>
<label for="name">Name</label>
<input type="text" id="name" name="name" required><br>
<label for="price">Price ($)</label>
<input type="number" id="price" name="price" required><br>
<label for="productType" id="switcher">Product type</label>
<select name="productType" id="productType" required>
<option value="" selected disabled>Product type</option>
<option id="dvd" value="dvd">DVD</option>
<option id="book" value="book">Book</option>
<option id="furniture" value="furniture">Furniture</option>
</select>
<!--ADDITIONAL FORM DEPENDING ON SELECT OPTION-->
<div class="additional-form dvd op" id="dvd-form">
<p>Please provide size in MB</p>
<label for="size">Size (MB)</label>
<input type="number" id="size" name="size">
</div>
<div class="additional-form book op" id="book-form">
<p>Please provide weight in KG</p>
<label for="weight">Weight (KG)</label>
<input type="number" id="weight" name="weight">
</div>
<div class="additional-form op furniture" id="furniture-form">
<p>Please provide dimensions in CM</p>
<label for="height">Height (CM)</label>
<input type="number" id="height" name="height"><br>
<label for="width">Width (CM)</label>
<input type="number" id="width" name="width"><br>
<label for="length">Length (CM)</label>
<input type="number" id="length" name="length">
</div>
</form>

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"

Get value from radio button AND copy value using JQuery

I've looked all over, and can see many ways to get the value of a radio button, but not take it the next step and set the same value to a similar set of radio buttons. Copying text values works fine, just can't get the radio buttons to copy also.
EDIT:
I added the entire relevant html:
<div class="form-container">
<div class="form-titles">
<h4>Customer <span>Shipping</span> Information</h4>
</div>
<div id="fillout-form">
<label for="name"><span>*</span>Contact Name:</label>
<input type="text" id="name" name="name" maxlength="50" class="required" />
<label for="company"><span>*</span>Company Name:</label>
<input type="text" id="company" name="company" maxlength="50" class="required" />
<label for="land-line"><span>*</span>Primary Phone:</label>
<input type="text" id="land-line" name="land-line" maxlength="50" class="required" />
<label for="cell">Cell Phone:</label>
<input type="text" id="cell" name="cell" maxlength="50" />
<label for="email"><span>*</span>Email:</label>
<input type="email" id="email" name="email" maxlength="50" class="required" />
<label for="fax">Fax:</label>
<input type="text" id="fax" name="fax" maxlength="50" />
<label for="address"><span>*</span>Street Address:</label>
<input type="text" id="address" name="address" maxlength="50" class="required" />
<label for="address-2">Street Address 2:</label>
<input type="text" id="address-2" name="address-2" maxlength="50" />
<label for="city"><span>*</span>City:</label>
<input type="text" id="city" name="city" maxlength="50" class="required" />
<label for="state"><span>*</span>State or Province:</label>
<input type="text" id="state" name="state" maxlength="50" class="required" />
<label for="zip"><span>*</span>Zip / Postal Code:</label>
<input type="text" id="zip" name="zip" maxlength="50" class="required" />
</div>
<div id="vertical-radio">
<div id="radio-buttons">
<label for="country"><span>*</span>Country:</label>
<div id="multi-line-radio"><input type="radio" name="country" id="country" value="USA" class="required" checked >United States</div>
<div id="multi-line-radio"><input type="radio" name="country" id="country" value="Canada" >Canada</div>
</div>
</div>
<div class="form-container">
<div class="form-titles">
<h4>Customer <span>Billing</span> Information</h4>
<div class="same-address">
<input type="checkbox" name="same-address" value="same-address" id="copyCheck"><p>Same as Shipping Address?</p>
</div>
</div>
<div id="fillout-form">
<label for="name_2"><span>*</span>Contact Name:</label>
<input type="text" id="name_2" name="name_2" maxlength="50" class="required" />
<label for="company_2"><span>*</span>Company Name:</label>
<input type="text" id="company_2" name="company_2" maxlength="50" class="required" />
<label for="land-line_2"><span>*</span>Primary Phone:</label>
<input type="text" id="land-line_2" name="land-line_2" maxlength="50" class="required" />
<label for="cell_2">Cell Phone:</label>
<input type="text" id="cell_2" name="cell_2" maxlength="50" />
<label for="email_2"><span>*</span>Email:</label>
<input type="email" id="email_2" name="email_2" maxlength="50" class="required" />
<label for="fax_2">Fax:</label>
<input type="text" id="fax_2" name="fax_2" maxlength="50" />
<label for="PO-Box_2">PO-Box:</label>
<input type="text" id="PO-Box_2" name="PO-Box_2" maxlength="50" />
<label for="address_2">Street Address:</label>
<input type="text" id="address_2" name="address_2" maxlength="50" />
<label for="address-2_2">Street Address 2:</label>
<input type="text" id="address-2_2" name="address-2_2" maxlength="50" />
<label for="city_2"><span>*</span>City:</label>
<input type="text" id="city_2" name="city_2" maxlength="50" class="required" />
<label for="state_2"><span>*</span>State or Province:</label>
<input type="text" id="state_2" name="state_2" maxlength="50" class="required" />
<label for="zip_2"><span>*</span>Zip / Postal Code:</label>
<input type="text" id="zip_2" name="zip_2" maxlength="50" class="required" />
</div>
<div id="vertical-radio">
<div id="radio-buttons">
<div id="country_option_2">
<label for="country_2"><span>*</span>Country:</label>
<div id="multi-line-radio"><input type="radio" name="country_2" id="country_2" value="USA" class="required" checked >United States</div>
<div id="multi-line-radio"><input type="radio" name="country_2" id="country_2" value="Canada" >Canada</div>
</div>
</div>
</div>
And jQuery:
$(document).ready(function(){
$(function(){
$("#copyCheck").change(function() {
if ($("#copyCheck:checked").length > 0) {
bindGroups();
} else {
unbindGroups();
}
});
});
var bindGroups = function() {
$("input[id='name_2']").val($("input[id='name']").val());
$("input[id='company_2']").val($("input[id='company']").val());
$("input[id='land-line_2']").val($("input[id='land-line']").val());
$("input[id='cell_2']").val($("input[id='cell']").val());
$("input[id='email_2']").val($("input[id='email']").val());
$("input[id='fax_2']").val($("input[id='fax']").val());
$("input[id='address_2']").val($("input[id='address']").val());
$("input[id='address-2_2']").val($("input[id='address-2']").val());
$("input[id='city_2']").val($("input[id='city']").val());
$("input[id='state_2']").val($("input[id='state']").val());
$("input[id='zip_2']").val($("input[id='zip']").val());
$("input:radio[name=country_2]:checked").val($("input:radio[name=country]:checked").val());
$("input[id='name']").keyup(function() {
$("input[id='name_2']").val($(this).val());
});
$("input[id='company']").keyup(function() {
$("input[id='company_2']").val($(this).val());
});
$("input[id='land-line']").keyup(function() {
$("input[id='land-line_2']").val($(this).val());
});
$("input[id='cell']").keyup(function() {
$("input[id='cell_2']").val($(this).val());
});
$("input[id='email']").keyup(function() {
$("input[id='email_2']").val($(this).val());
});
$("input[id='fax']").keyup(function() {
$("input[id='fax_2']").val($(this).val());
});
$("input[id='address']").keyup(function() {
$("input[id='address_2']").val($(this).val());
});
$("input[id='address-2']").keyup(function() {
$("input[id='address-2_2']").val($(this).val());
});
$("input[id='city']").keyup(function() {
$("input[id='city_2']").val($(this).val());
});
$("input[id='state']").keyup(function() {
$("input[id='state_2']").val($(this).val());
});
$("input[id='zip']").keyup(function() {
$("input[id='zip_2']").val($(this).val());
});
};
var unbindGroups = function() {
$("input[id='name']").unbind("keyup");
$("input[id='company']").unbind("keyup");
$("input[id='land-line']").unbind("keyup");
$("input[id='cell']").unbind("keyup");
$("input[id='email']").unbind("keyup");
$("input[id='fax']").unbind("keyup");
$("input[id='address']").unbind("keyup");
$("input[id='address-2']").unbind("keyup");
$("input[id='city']").unbind("keyup");
$("input[id='state']").unbind("keyup");
$("input[id='zip']").unbind("keyup");
};
});

Close your input tags
for example
<input type="radio" name="country" value="Canada">
should be
<input type="radio" name="country" value="Canada"/>
IDs are unique
and exist once, and only once, in a particular document.
for example
<div id="radio-buttons">...</div><div id="radio-buttons">...</div>
should be something like
<div id="radio-buttons-1">...</div><div id="radio-buttons-2">...</div>
or
<div class="radio-buttons">...</div><div class="radio-buttons">...</div>
open your mind
There doesn't seem to be a need to handle each of these on an individual basis, you should think "how can i get those to copy here" not "lets copy this one and this one and this one..."
which would give you jquery that looks more like this:
var ship = $('.form-container').eq(0).find('input'),//first fields
bill = $('.form-container').eq(1).find('input').not('#copyCheck,#PO-Box_2');//second fields
$('#copyCheck').on('change', function () {
if ($(this).prop('checked')) { bindGroups(); }//checked:bind answers
else { unbindGroups(); }//!checked:remove answers
});
function brains(e,i) {//runs on bindgroups and on irt
var tc;
if (e.is('[type=radio]')) {//if radio
tc = e.prop('checked');//get checked
bill.eq(i).prop('checked',tc);//add checked to corresponding element
} else if(e.is('[type=text],[type=email]')) {//if text or email
tc = e.val();//get value
bill.eq(i).val(tc);//add value to corresponding element
}
}
function bindGroups() {//copy
ship.each(function(i){//for each input
brains($(this),i);//run brains
$(this).on('keyup change', function() {//on keyup or change
brains($(this),i);//run brains
});
});
}
function unbindGroups() {//clear the deck
ship.each(function(i){//for each input
if ($(this).is('[type=radio]')) {//if radio
bill.eq(i).prop('checked',false);//reset radio optional
} else if($(this).is('[type=text],[type=email]')) {//if text or email
bill.eq(i).val('');//empty text optional
}
}).unbind();//unbind actions
}
That way your not writing jquery for every element individually.
made a fiddle: http://jsfiddle.net/filever10/bC3mQ/

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>