创建最佳形式以 POST 向 Challonge 批量添加信息 API

Question

我正在使用此文档：https://api.challonge.com/v1/documents/participants/bulk_add

我已经弄清楚如何通过使用多行文本区域来利用批量添加，但是我不知道除了名称之外还必须添加其他信息。例如，我也想添加杂项信息。

这有效，但我无法确定如何同时收集附加信息：

<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="*">，但我不知道如何将其同步到正确的“名称”。关于如何实现这一点有什么想法吗？

Answer 1

要关联表单中的字段，您可以在元素名称上使用 [] 语法 - 名称中带有方括号的多个同名元素的作用类似于数组并具有索引。如果其他字段也有方括号，则可以使用相同的索引 link，例如 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>

创建最佳形式以 POST 向 Challonge 批量添加信息 API

Create optimal form to POST bulk add information to Challonge API

html

php

forms

post

curl