Question

我有一个文本框，用户可以输入他们的名字和2个单选按钮，一个用于Mr.，一个用于Mrs.

当用户点击提交按钮时，我希望运行一个函数，检查用户选中的单选按钮并将其添加到名称中，然后将其存储在列表中。

例如，假设他们输入他们的名字为John并单击Mr.框。我希望它将先生添加到约翰，然后将其存储在列表中。所以它会存储Mr.John是一个列表。

我不知道如何做到这一点，到目前为止我已经得到了什么：

var UserNames = []

var NameAdd = function() {
    var name = document.getElementById("nametextbox").value;
    UserNames.push("name");
}

如果该代码是正确的，它应该从文本框中获取输入并将其存储在列表中。

下面是单选按钮的css：

#CheckBox1,#CheckBox2 { 
    float:left;
     margin: 600px 20px 20px 60px; 
     color: #b2aba4;

}

继续html：

<div id="CheckBox1"><input type="radio" Name="Mr."/>Mr.</div>
<div id="CheckBox2"><input type="radio" Name="Mrs."/>Mrs.</div>

任何帮助我都会感激不尽。 Ik它应该是一个if / else语句，但过去那个无能为力。

Answer 1

我会将你的标记更改为：

<div id="CheckBox1"><input type="radio" name="salutation" value="Mr." />Mr.</div>
<div id="CheckBox2"><input type="radio" name="salutation" value="Mrs." />Mrs.</div>

然后您可以使用此JavaScript获取值：

var salutation = document.querySelector('input[name = "salutation"]:checked').value;

Answer 2

如果您想在客户端进行此操作，这可能会对您有所帮助：

WORKING:DEMO

<强> JS

$("button").click(function()
{
    var curSex = $("input[type=radio]").val();
    var curName = $("input[type=text]").val();
    document.getElementById("print").innerHTML = "Hello" + " " + curSex + curName;
});

<强> HTML

<div id="CheckBox1"><input type="radio" Name="Mr." value="Mr." />Mr.</div>
<div id="CheckBox2"><input type="radio" Name="Mrs." value="Mrs." />Mrs.</div>

Enter Name : <input type="text" name="name" />

<button>Submit</button>

<p id="print"></p>

Answer 3

<form name="send" method="POST">
<input type="text" name="name" id ="userName" />
<div id="CheckBox1"><input  type="radio" id ="mr" value="Mr." Name="title"/>Mr.</div>
<div id="CheckBox2"><input type="radio" id ="mrs" value="Mrs." Name="title"/>Mrs.</div>
<input type="button" name="button" value="Submit"   onClick="getInfo(this.form);" />
</form>
<p id="info"></p>

java脚本代码

function getInfo(form) {
var userName = document.getElementById("userName");
var mr = document.getElementById('mr');
var mrs = document.getElementById('mrs');
var data = [];
if (userName.value !== "") {
    if (mr.checked) {
        data.title = mr.value;
        mrs.checked = false;
    } else if (mrs.checked) {
        data.title = mrs.value;
        mr.checked = false;
    }
    data.name = userName.value;
    document.getElementById("info").innerHTML = "Hello:" + data.title + " " + data.name;
}
//console.log(data);

}

demo

将单选按钮输入添加到文本框输入并将其存储在列表中？

3 个答案: