Javascript(AddInput)问题

时间:2013-08-01 03:54:54

标签: javascript

<html>
<head>
<title></title>
<script language="javascript">
fields = 0;
function addInput() {
if (fields != 3) {
document.getElementById('text').innerHTML += "<input type='text' value='' /><br />";
fields += 1;
} else {
document.getElementById('text').innerHTML += "<br />Only 3 fields allowed.";
document.form.add.disabled=true;
}
}
</script>
</head>
<body>
<form name="form">
<input type="button" onClick="addInput()" name="add" value="Add input field" />
</form>
</body>
</html>

问题是如果提交此代码,我怎么知道已添加的每个输入文本的名称。

感谢您的帮助,我是JS的新手。

3 个答案:

答案 0 :(得分:0)

您可以在JavaScript代码中创建id和名称时为其分配。以下示例在创建时为每个输入提供id和名称“field1”,“field2”和“field3”:

<script language="javascript">
    fields = 0;
    function addInput() {
        if (fields != 3) {
            fields += 1;
            document.getElementById('text').innerHTML += "<input id='field" + fields + "' name='field" + fields + "' type='text' value='' /><br />";
        } else {
            document.getElementById('text').innerHTML += "<br />Only 3 fields allowed.";
            document.form.add.disabled=true;
        }
    }
</script>

然后,您可以通过名称调用它们:

var myFirstField = document.getElementById('field1');

在回发中,如果表单已提交到其他页面,则可以引用其名称。

答案 1 :(得分:0)

您可以将名称字段更改为html数组,例如

<input type="button" onClick="addInput()" name="add[]" value="Add input field" />

然后当您提交代码时,您会得到一个添加数组。

希望这会有所帮助。

答案 2 :(得分:0)

var fields = 0,
    button = document.getElementById( 'button' ),
    text = document.getElementByIs( 'text' ),
    addInput = function() {
        if( fields !== 3 ) {
            fields += 1;
            text.appendChild( '<input type="text" value="" name="fields" /><br />' );
        } else {
            text.appendChild( '<br />Only 3 fields allowed.' );
            document.form.add.disabled = true;
        }
    };
if( window.addEventListener ) {
    button.addEventListener( 'click', addInput, false );
} else if( window.attachEvent ) {
    button.attachEvent ( 'onclick', addInput );
} else {
    button[ 'onclick' ] = addInput; 
}