创建最佳表单，向challonge api发布批量添加信息

我正在使用此文档：https://api.challonge.com/v1/documents/participants/bulk_add
我已经知道如何通过使用多行textarea来利用批量添加，但是我不知道除了名称之外还必须添加其他信息。例如，我还想添加其他信息。
这是可行的，但我无法确定如何收集其他信息：

<form action="bulkadd.php" method="post">
 <textarea id='name' name='name' rows='64' cols='25'></textarea>
 </form>
 <input type="submit" value="Submit">
 <input type="reset" value="Reset">

我希望生成的数组为：

{"participants": [
{"name": "John Doe", "misc": null},
{"name": "Jane Doe", "misc": "*"},
{"name": "Jenn Doe", "misc": "*"}]
}

我尝试添加一个复选框来设置“杂项”，如下所示： <input type="checkbox" name="sidepot" id="misc" value="*"> ，但我不知道如何将其同步到正确的“名称”。关于如何实现这一点有什么想法吗？

要关联表单中的字段，可以使用 [] 元素名称上的语法-名称中带有方括号的多个同名元素的行为类似于数组并具有索引。如果其他字段也有方括号，则可以使用相同的索引链接，例如， name[1] 及 misc[1] 等
可以使用一些非常简单的javascript来克隆相关的html，这样当表单实际提交时，每个部分中的字段都可以相互关联。底部的代码片段显示了正在进行的克隆过程。注：我用过 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>

展开查看全部

创建最佳表单，向challonge api发布批量添加信息

1条答案

相关问题

热门标签

最新问答