HTML Javascript input field is generated on validate / click button
I am new to programming and this is my first time with JavaScript. I am trying to achieve:
1) Clicking on the first radio button will bring up a text input field -837 SOLVED
2) When the second radio button is pressed, the text of the input field-263 appears and replaces the previous SOLVED field
3) or vice versa. (The first time you click on one of the radio button input fields, selecting another radio button will overwrite the previous field) SOLVED
4) Only one field can be present. SOLVED
4.1) When I click on the already checked radio button, nothing should appear - this is my problem. He creates another field. The DECISION of Roisch and God is good.
5) The entered fields must be required. You also need to select a radio button. - I don’t know how to achieve this. They are part of the form that is submitted by email. The person filling out the form must check one of the radio buttons and fill in the field that is created. SOLVED
5.1) ADDED. The first text of the REGNR-837 field must have a maximum of 6 characters, a minimum of 4. The second VIN-text-263 field must have a maximum and minimum of 17 characters.
6) The generated Javascript DIVs must have a specific ID - Not sure how. Currently there are new fields with REGNR undefined or VIN undefined, they must have a valid ID so that I can edit them in CSS. SOLVED by Roysh.
I got the first 3 points to the right, but the problem starts from the fourth 4).
I got most of the code from a previous stackowerflow post, but checkoxes were used, so I changed the code as much as I knew and now I am stuck. Searching the internet for hours, but nothing. At the end of the day, it should be part of a form that works well. I just need this part.
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();
}
}
Thanks for the help.
source to share
Ok, here's a more elegant way that solves everything but 5.
Remember, there is no such thing as "div.id" or "rb.name.id".
<script type="text/javascript">
checked1=false;
checked2=false;
function dynInput(rb) {
if (document.getElementById('raadio').checked && !checked1 || document.getElementById('raadio').checked && checked2) {
var input = document.createElement("input");
input.type = "text";
input.value = "field1";
input.name = "text-837";
input.required = "true";
var div = document.createElement("div");
div.setAttribute("id","regnr");
div.innerHTML = "REGNR ";
div.appendChild(input);
document.getElementById("insertinputs").appendChild(div);
checked1=true;
checked2=false;
document.getElementById('vin').remove();
}
if (document.getElementById('raadio2').checked && !checked2 || document.getElementById('raadio2').checked && checked1) {
var input = document.createElement("input");
input.type = "text";
input.value = "field2";
input.name = "text-263";
var div = document.createElement("div");
div.setAttribute("id","vin");
div.innerHTML = "VIN ";
div.appendChild(input);
document.getElementById("insertinputs").appendChild(div);
checked2=true;
checked1=false;
document.getElementById('regnr').remove();
}
}
Regarding 5 - What kind of verification is needed? Typically, validations are done on the server side using web forms. With javaScript, you can determine for yourself which input is invalid for an error warning.
source to share
4.1) When you click on an already set switch, nothing should appear - this is my problem. He creates another field.
The solution to your problem of creating multiple inputs is very simple. Just use a function onchange()
instead onclick()
. The HTML should 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 subscript variables in the script. I'm assuming you just haven't posted the code that creates these variables.
source to share