HTML Javascript input field is created on radio button check/click

Question

I am new to programming and this is my first time with JavaScript. I am trying to achieve:

1) Clicking first radio button a input field text-837 appears SOLVED

2) Clicking second radio button a input field text-263 appears and replaces the previous field SOLVED

3) or vice versa. (On the first click to one of the radio buttons input field appears, choosing the other radio button will replace the previous field) SOLVED

4) There can only be one field present. SOLVED

4.1) On clicking already checked radio button nothing should appear - This is my problem. It creates another field. SOLVED by Roysh and God is good.

5) Input fields should be required fields also the radio button selection should be required. - Don't know how to achieve that. They are a part of a form which is sent by email. Person who fills out the form needs to check one of the radio buttons and needs to fill out the created field. SOLVED

5.1) ADDED. first REGNR field text-837 should have maximum of 6 characters, minimum of 4. Second field VIN text-263 should have maximum and minimum of 17 characters.

6) Javascript created DIVs should have a defined ID - Don't know how. Right now new fields appear with REGNR undefined or VIN undefined they should have a valid ID so I could edit them in CSS. SOLVED by Roysh.

I got the first 3 points right, but the problem starts from the fourth 4).

I got most of the code from a previous stackowerflow post, but there were used checkoxes so I altered the code as much as I knew how to and now I am stuck. Searched the web for hours but nothing. Eventually this should be a part of a form which works nicely I just need this part to function.

My almost working code:

function dynInput(rb) {
if (document.getElementById('raadio').checked == true) {
    var input = document.createElement("input");
    input.type = "text";
    input.value = "field1";
    input.name = "text-837";
    input.required="required";
    var div = document.createElement("div");
    div.id = rb.name.id;
    div.innerHTML = "REGNR " + rb.name.id;
    div.appendChild(input);
    document.getElementById("insertinputs").appendChild(div);
}
if (document.getElementById('raadio2').checked == true) {
    var input = document.createElement("input");
    input.type = "text";
    input.value = "field2";
    input.name = "text-263";
    input.required="required";
    var div = document.createElement("div");
    div.id = rb.name;
    div.innerHTML = "VIN " + rb.name.id;
    div.appendChild(input);
    document.getElementById("insertinputs").appendChild(div);
}
if (document.getElementById('raadio').checked == false) {
    document.getElementById(rb.name.id).remove();
}
if (document.getElementById('raadio2').checked == false) {
    document.getElementById(rb.name).remove();
}
}

Thank you for the help.

Answer 1

4.1) On clicking already checked radio button nothing should appear - This is my problem. It creates another field.

The solution to your problem about multiple inputs being created is very simple. Simply call your function onchange() instead of onclick(). The HTML should instead look like this:

<input type="radio" name="rb" id="raadio" onchange="dynInput(this);"> Eestis<br>

<input type="radio" name="rb" id="raadio2" onchange="dynInput(this);">Mujal

function dynInput(rb) {
    if (document.getElementById('raadio').checked == true) {
        var input = document.createElement("input");
        input.type = "text";
        input.value = "field1";
        input.name = "text-837";
        input.required = "true";
        var div = document.createElement("div");
        div.id = rb.name.id;
        div.innerHTML = "REGNR " + rb.name.id;
        div.appendChild(input);
        document.getElementById("insertinputs").appendChild(div);
    }
    if (document.getElementById('raadio2').checked == true) {
        var input = document.createElement("input");
        input.type = "text";
        input.value = "field2";
        input.name = "text-263";
        var div = document.createElement("div");
        div.id = rb.name;
        div.innerHTML = "VIN " + rb.name.id;
        div.appendChild(input);
        document.getElementById("insertinputs").appendChild(div);
    }
    if (document.getElementById('raadio').checked == false) {
        document.getElementById(rb.name.id).remove();
    }
    if (document.getElementById('raadio2').checked == false) {
        document.getElementById(rb.name).remove();
    }
}

<div class="radio">
    <label for="Radios">
        <input type="radio" name="rb" id="raadio" onchange="dynInput(this);" />Eestis
        <br/>
        <input type="radio" name="rb" id="raadio2" onchange="dynInput(this);" />Mujal</label>
</div>
<p id="insertinputs"></p>

Remember that REGNR and VIN are underined variables in your script. I'm assuming that you just didn't post the code that creates those variables.