要关联表单中的字段，您可以在元素名称上使用[] 语法 - 名称中带有方括号的多个同名元素的作用类似于数组并具有索引。如果其他字段也有方括号，则可以使用相同的索引来链接，例如 name[1] 和 misc[1] 等
可以使用一些非常简单的 Javascript 来克隆相关的 HTML，以便在实际提交表单时，每个部分中的字段相互关联。底部的 sn-p 显示了正在运行的克隆过程。注意：我在这里使用username 而不是name 作为输入元素，但这是我的疏忽。
例如：
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>Challonge</title>
<style>
body,body *{box-sizing:border-box;font-family:verdana;}
form{display:block;width:40%;padding:1rem;border:1px solid black;margin:auto;float:left;background:whitesmoke;clear:both;}
section{margin:1rem auto;padding:0.25rem;border:1px dotted gray;background:white;}
label{display:block;margin:0.25rem auto;padding:0.25rem;}
label > input{float:right;padding:0.25rem;}
label:before{content:attr(for);text-transform:capitalize}
[type='submit'],
[type='reset'],
[name='add']{padding:0.5rem;height:3rem}
input[name='add']{font-weight:bold;float:right}
pre{display:block;margin:2rem auto;float:left;clear:both; width:40%;font-size:smaller;}
</style>
</head>
<body>
<form name='challonge' method='post'>
<section>
<label for='username'><input type='text' name='username[]' value='john doe' /></label>
<label for='misc'><input type='text' name='misc[]' value='abc-1' /></label>
</section>
<div>
<input type='submit' />
<input type='reset' />
<input type='button' name='add' value='+' />
</div>
</form>
<script>
document.querySelector('input[name="add"]').addEventListener('click',e=>{
let form=document.forms.challonge;
form.insertBefore( form.querySelector('section').cloneNode( true ), form.querySelector('div') );
});
</script>
<?php
/*
The following PHP emulates what you would put within bulkadd.php
before sending the json data to the challonge api. In effect this
is acting as the form target here for demo.
*/
if( $_SERVER['REQUEST_METHOD']=='POST' && !empty( $_POST['username'] ) ){
// to show raw post data is related by index
printf('<pre>%s</pre>',print_r( $_POST, true ) );
// process the POST data to form desired output
$data=array();
foreach( $_POST['username'] as $index => $name ){
$data[]=array(
'name' => $name,
'misc' => $_POST['misc'][$index]
);
}
$json=json_encode( array( 'participants'=>$data ) );
// to show processed json data
printf('<pre>%s</pre>',print_r( $json, true ) );
}
?>
</body>
</html>
以上产生以下输出：
Array
(
[username] => Array
(
[0] => john doe
[1] => jane doe
[2] => jenn doe
)
[misc] => Array
(
[0] => abc-1
[1] => abc-2
[2] => abc-3
)
)
{
"participants":[
{"name":"john doe","misc":"abc-1"},
{"name":"jane doe","misc":"abc-2"},
{"name":"jenn doe","misc":"abc-3"}
]
}
/*
Clone the portion of the form that contains the fields we wish to
include in the final json data. No element should have an ID assigned
unless other steps are taken to account for and prevent duplicate IDs.
*/
document.querySelector('input[name="add"]').addEventListener('click',e=>{
let form=document.forms.challonge;
form.insertBefore( form.querySelector('section').cloneNode( true ), form.querySelector('div') );
});
body,body *{box-sizing:border-box;font-family:verdana;}
form{display:block;width:80%;padding:1rem;border:1px solid black;margin:auto;float:left;background:whitesmoke;clear:both;}
section{margin:1rem auto;padding:0.25rem;border:1px dotted gray;background:white;}
label{display:block;margin:0.25rem auto;padding:0.25rem;}
label > input{float:right;padding:0.25rem;}
label:before{content:attr(for);text-transform:capitalize}
[type='submit'],
[type='reset'],
[name='add']{padding:0.5rem;height:3rem}
input[name='add']{font-weight:bold;float:right}
pre{display:block;margin:2rem auto;float:left;clear:both; width:80%;font-size:smaller;}
<form name='challonge' method='post'>
<section>
<label for='username'><input type='text' name='username[]' value='john doe' /></label>
<label for='misc'><input type='text' name='misc[]' value='abc-1' /></label>
</section>
<div>
<input type='submit' />
<input type='reset' />
<input type='button' name='add' value='+' />
</div>
</form>