我需要做些什么才能让它显示所有的用户输入/选择
What do I need to do to get it to display all of the user input/choices?
我需要在javascript/jquery警报框中显示来自以下表单的用户输入,每条信息之间都有一个换行符。我尝试过实现这个jquery警报,但我的情况并不比以前好。这就是我目前所掌握的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Questions n Shiz</title>
<link rel="stylesheet" href="css/normanlize-signup.css">
<link href='http://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/signup.css">
<link rel="icon" href="favicon.ico">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$('#formid').submit(function (e) {
e.preventDefault();
alert(JSON.stringify($('#formid')));
});
</script>
</head>
<body>
<form>
<h1>Enter Thou'st Information</h1>
<fieldset>
<legend><span class="number">1</span> Your basic info</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="user_name" placeholder="Rob Neale">
<label for="mail">Email:</label>
<input type="email" id="mail" name="email" placeholder="robneale@gmail.com">
<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="robrastamanneale">
<label>Gender/Sex:</label>
<input type="radio" id="male" value="male" name="user_gender"><label for="under_16" class="light">Male</label>
<br>
<input type="radio" id="female" value="female" name="user_gender"><label for="over_16" class="light">Female</label>
</fieldset>
<fieldset>
<legend><span class="number">2</span> Your profile</legend>
<label for="bio">Biography:</label>
<textarea id="bio" name="user_bio" placeholder="Some words go in here ;)"></textarea>
<label for="house">House:</label>
<select id="house" name="user_job">
<optgroup label="House">
<option value="bradman">Bradman</option>
<option value="chisholm">Chisholm</option>
<option value="helpmann">Helpmann</option>
<option value="mawson">Mawson</option>
<option value="mccubbin">McCubbin</option>
<option value="oliphant">Oliphant</option>
<option value="sutherland">Sutherland</option>
<option value="thiele">Thiele</option>
</optgroup>
</optgroup>
</select>
<label>Subjects</label>
<input type="checkbox" id="development" value="interest_maths" name="user_interest">
<label class="light" for="development">Maths C</label>
<br>
<input type="checkbox" id="design" value="interest_physics" name="user_interest">
<label class="light" for="design">Physics</label>
<br>
<input type="checkbox" id="business" value="interest_chemistry" name="user_interest">
<label class="light" for="business">Chemistry</label>
<br>
<input type="checkbox" id="business" value="interest_biology" name="user_interest">
<label class="light" for="business">Biology</label>
<br>
<input type="checkbox" id="business" value="interest_marine" name="user_interest">
<label class="light" for="business">Marine Biology</label>
<br>
<input type="checkbox" id="business" value="interest_graphics" name="user_interest">
<label class="light" for="business">Graphics</label>
<br>
<input type="checkbox" id="business" value="interest_ipt" name="user_interest">
<label class="light" for="business">IPT</label>
<br>
<input type="checkbox" id="business" value="interest_its" name="user_interest">
<label class="light" for="business">ITS</label>
<br>
<input type="checkbox" id="business" value="interest_business" name="user_interest">
<label class="light" for="business">Business</label>
<br>
<input type="checkbox" id="business" value="interest_legal" name="user_interest">
<label class="light" for="business">Legal Studies</label>
<br>
<input type="checkbox" id="business" value="interest_engineering" name="user_interest">
<label class="light" for="business">Engineering</label>
<br>
<input type="checkbox" id="business" value="interest_accoutngin" name="user_interest">
<label class="light" for="business">Accounting</label>
</fieldset>
<legend><span class="number">3</span> Submit!</legend>
<input type="checkbox" id="update" value="interest_update" name="user_update">
<label class="light" for="update">Tick to recieve a free complimentary Elliot</label>
<button type="submit" onclick="displayOutput()">Submit!</button>
</form>
</body>
只需列出所有值,并在它们之间添加''n'
即可添加换行符。
alert($("#name").val() + ''n' + $("#mail").val() + ''n' +
$("#password").val() + $(":radio[name=user_gender]:checked").val() + ''n' +
$("#bio").val() + ''n' +
'Subjects: ' + $(":checkbox[name=user_interest]:checked").map(function() { return $(this).val(); }).join(','));
如果您的表单具有正确的id:,这可能会有所帮助
var res = '';
$.each($('#formid').serializeArray(), function(i, v){
res += i+':'+v+''n';
});
alert(res);
当然,alert
在现实世界中是一种可怕的方式。
要滚动表单的所有元素,可以使用elements
function displayOutput() {
for(var i=0;i<document.forms[0].elements.length;i++)
console.log(document.forms[0].elements[i].id +": "
+ document.forms[0].elements[i].value);
}
这只检查value
,尽管其他需要检查,例如:selected
,但添加起来并没有那么复杂。
如果它太复杂了,正如建议的那样,试着把它作为一个起点:
function displayOutput() {
var id;
var content;
var elem;
for(var i=0;i<document.forms[0].elements.length;i++){
id = document.forms[0].elements[i].id;
if(!id)
continue;
elem = document.getElementById(id);
if(elem.tagName === "INPUT" || elem.tagName === "TEXTAREA"){
if(elem.type === "checkbox")
content = (elem.checked)?"checked":"blank";
else if(elem.type === "radio")
content = (elem.checked)?"checked":"blank";
else
content = elem.value;
} else if(elem.tagName === "SELECT"){
content = elem.options[elem.selectedIndex].value;
}
console.log(id +": " + content);
}
}
我花了几分钟的时间才发现您有多个ID(每个文档只能有一个id
)
相关文章:
- 使用javascript搜索具有用户输入的数组
- React Native通过Navigator将用户输入数据传递到选项卡栏IOS中的组件
- 如何使用JavaScript中的用户输入创建序列/序列
- 如何在用户输入时实例化数组
- 如何从客户端的数组中获取用户输入和返回值
- 如何在用户输入 javascript 时更改值
- 如何从多个不同的html页面获得mongodb文档的用户输入
- PayPal按钮是否有一个简单的选项,其中金额基于一些用户输入
- 从表单中获取用户输入执行计算(操作顺序)并输出回该表单
- 我确实有一个表单,如果用户输入了输入,它应该检查否定或空的输入框,并抛出一条警告消息
- 如果用户输入的长度小于最小长度,则显示错误消息
- 随机生成用户输入
- 如果图像标记是用javascript编写的,并且需要用户输入,那么图像不会随页面加载吗
- Javascript:使用用户输入搜索数组
- 根据用户输入的数字生成文本框
- 如何通过获取用户输入和使用按钮来运行JavaScript函数
- 使用用户输入修改链接
- 如何解决取消抖动的用户输入上的竞争条件
- 从用户输入中制作数组动画,如打字机(javascript)
- 如何在视图中保存用户输入内容,并在离开页面时对控制器进行后期调用