Радио кнопка внутри div - PullRequest
       2

Радио кнопка внутри div

0 голосов
/ 14 декабря 2018

У меня есть форма HTML, который может добавлять форму динамически.У меня проблема с переключателем, он может выбрать только одну опцию (даже если переключатель находится в другом теге).Я ищу решение, одно решение состоит в том, чтобы изменить имя переключателя.Есть ли другой способ сделать это?Поскольку все мои другие входные данные используют одно и то же имя, и при отправке формы все входные данные могут быть собраны в массив.

Если нет другого способа, как я могу изменить имя переключателя для клонированного элемента?

Вот мой код:

app.get('/form', function (req, res) {
var html='';
html += `<head>
<style>
  .formset {
  border-style: solid;
  border-width: 1px;
  }
</style>
<script>
var id=1
function myFunction() {
  id++
  var elmnt = document.getElementById("div1")
  var cln = elmnt.cloneNode(true)
  cln.id = "div"+id
  document.getElementById("divParent").appendChild(cln);
}
</script>
</head>`;
html +="<body>";
html += "<p>Click the button to make a BUTTON element with text.</p>";
html += '<button onclick="myFunction()">Add form</button>';
html += "<form action='/thank'  method='post' name='form1'>";
html += "<div id='divParent'>";
html += "<div id='div1' name='formset' class='formset'>";
html += "<p>Name: <input type= 'text' name='name'></p>";
html += "<p>Sex: Male <input type='radio' name='gender' value='male'>"
html += " Female <input type='radio' name='gender' value='female'></p>"
html += "<p>Email: <input type='text' name='email'></p>";
html += "<p>Address:<input type='text' name='address'></p>";
html += "<p>Mobile number:<input type='text' name='mobilno'></p>";
html += "</div>";
html += "</div>";
html += "<input id='input1' type='submit' value='submit'>";
html += "<INPUT type='reset'  value='reset'>";
html += "</form>";

html += "</body>";
res.send(html);
});

И код для обработки формы:

app.post('/thank', urlencodedParser, function (req, res){
var reply='';
reply += "<br>Array length is : " + req.body.name.length;
reply += "<br>Your name is : " + req.body.name;
reply += "<br>Sex is : " + req.body.gender;
reply += "<br>Your E-mail id is : " + req.body.email; 
reply += "<br>Your address is : " + req.body.address;
reply += "<br>Your mobile number is : " + req.body.mobilno;
res.send(reply);
});

1 Ответ

0 голосов
/ 14 декабря 2018

Я думаю, вам нужно изменить имя радиовхода, добавить класс в радио, чтобы его можно было найти с помощью getElementsByClassName.

html += "<p>Sex: Male <input type='radio' class='gender' name='gender' value='male'>"
html += " Female <input type='radio' class='gender' name='gender' value='female'></p>"

//change the name, add id to the end
function changeName(element, id) {
    var x = element.getElementsByClassName("gender");
    var i;
    for (i = 0; i < x.length; i++) {
        x[i].name += id;
    }
}

function myFunction() {
    id++
    var elmnt = document.getElementById("div1")
    var cln = elmnt.cloneNode(true)
    cln.id = "div"+id

    //change radio id
    changeName(cln, id);

    document.getElementById("divParent").appendChild(cln);
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...