[英]How do I output HTML form data using Javascript?
I hit a little bit of a wall. 我碰到了一点墙。 With my current JS how do I output the current form field results in the class="household" when the user hits "add"? 使用我当前的JS,当用户点击“添加”时,如何在class =“ household”中输出当前表单字段的结果?
*I still want to keep the remove functionality. *我仍然想保留删除功能。
I cannot edit HTML only JS. 我不能仅编辑HTML JS。 Any help gladly is appreciated. 如有任何帮助,我们将不胜感激。 Thanks! 谢谢!
HTML HTML
<ol class="household"></ol>
<form>
<div>
<label>Age
<input type="text" name="age">
</label>
</div>
<div>
<label>Relationship
<select name="rel">
<option value="">---</option>
<option value="self">Self</option>
<option value="spouse">Spouse</option>
<option value="child">Child</option>
<option value="parent">Parent</option>
<option value="grandparent">Grandparent</option>
<option value="other">Other</option>
</select>
</label>
</div>
<div>
<label>Smoker?
<input type="checkbox" name="smoker">
</label>
</div>
<div>
<button class="add">add</button>
</div>
<div>
<button type="submit">submit</button>
</div>
</form>
JS JS
function validate(form) {
fail = validateAge(form.age.value)
fail += validateRel(form.rel.value)
if (fail == "") return true
else {
alert(fail);
return false
}
}
function validateAge(field) {
if (isNaN(field)) return "No age was entered. \n"
else if (field < 1 || field > 1000)
return "Age must be greater than 0. \n"
return ""
}
function validateRel(field) {
if (field == "") return "Please select a relationship \n"
return ""
}
document.querySelector("form").onsubmit = function() {
return validate(this)
}
document.querySelector(".add").onclick = function() {
createinput()
};
count = 0;
function createinput() {
field_area = document.querySelector('.household')
var li = document.createElement("li");
var input = document.createElement("input");
input.id = 'field' + count;
input.name = 'field' + count;
input.type = "text"; //Type of field - can be any valid input type like text,file,checkbox etc.
li.appendChild(input);
field_area.appendChild(li);
//create the removal link
var removalLink = document.createElement('a');
removalLink.onclick = function() {
this.parentNode.parentNode.removeChild(this.parentNode)
}
var removalText = document.createTextNode('Remove Field');
removalLink.appendChild(removalText);
li.appendChild(removalLink);
count++
}
The add
button is submitting the form. add
按钮正在提交表单。 You can prevent that by calling event.preventDefault()
in the handler function. 您可以通过在处理函数中调用event.preventDefault()
来防止这种情况。
document.querySelector(".add").onclick = function(event) {
event.preventDefault();
createinput()
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.