Создайте оптимальную форму для массового добавления информации в API Challonge

ProgramBox

Создайте оптимальную форму для массового добавления информации в API Challonge

Post author:admin
Запись опубликована:14 января, 2022
Post category:Вопросы по программированию

#php #html #forms #curl #post

Вопрос:

Я использую эту документацию: 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="*"> , но я не мог понять, как синхронизировать это с правильным «именем». Есть какие-нибудь идеи о том, как этого добиться?

1. Ваши кнопки отправки и сброса не относятся ни к какой форме…. это просто опечатка здесь?

2. В желаемом результирующем массиве — различные члены Doe семейства — откуда эти имена — по одному на строку в текстовой области?

Ответ №1:

Чтобы связать поля в форме, вы можете использовать [] синтаксис имен элементов — несколько элементов с одинаковыми именами с квадратными скобками в именах действуют как массивы и имеют индекс. Если другие поля также имеют квадратные скобки, один и тот же индекс можно использовать для связи, скажем, 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' amp;amp; !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>

1. спасибо, что поделились со мной синтаксисом []. Я обыскал много областей за несколько дней и не наткнулся на это.

2. Рад помочь — надеюсь, все вышесказанное имеет смысл и делает то, что вам нужно. Удачи!

Метки: Создайте оптимальную форму для массового добавления информации в API Challonge