单击按钮如何创建表单加载项?

时间:2019-04-25 08:58:08

标签: javascript php wordpress custom-fields

目前在我的实习期结束时为客户创建一个网站。 我希望创建一个按钮,以允许添加表单的现有部分。

由于Java语言中的功能,我尝试添加它,但是当我单击按钮时什么也没有发生,但是当我在控制台中打个console.log('test')

function dog_func ($atts) {
    $list=array(

    'Affenpinscher' => 'Affenpinscher',
    'Airedale Terrier' => 'Airedale Terrier',
    'Ariégeois' => 'Ariégeois',
    'Barbet' => 'Barbet',
    'Barbu Tchèque' => 'Barbu Tchèque' ,
    'Berger de Russie' => 'Berger de Russie',  
    'Berger des Pyrénées' => 'Berger des Pyrénées',
    'Berger des Shetland' => 'Berger des Shetland',
    'Berger du Caucase' => 'Berger du Caucase',
    'Berger du massif du Karst' => 'Berger du massif du Karst',
    'Berger finnois de Laponie' => 'Berger finnois de Laponie',
    'Berger Hollandais' => 'Berger Hollandais',
    'Berger Islandais' => 'Berger Islandais',
    'Bouvier de l\'Entlebuch' => 'Bouvier de l\'Entlebuch',
    'Bouvier des Ardennes' => 'Bouvier des Ardennes',
    'Bouvier des Flandres' => 'Bouvier des Flandres',
    'Boxer' => 'Boxer',
    'Autre' => 'Autre');

    echo '<div id="divFields">';    
    echo '<label for="chien" class="breed">Race du chien: 
    </label>';
    echo '<input id="chien" type="text" list="chiendata">';
    echo '<datalist id="chiendata" name="chiendata" >';
    echo '<label for="adresse">ou sélectionner dans la 
    liste</label>';
    echo '<select name="adresse" class="selected" id="adresse" 
    onChange="AjoutOptionAuSelect(this)"  style="width: -webkit- 
    fill-available;" size="1">';
    foreach($list as $p => $row){
    echo "<option  value='".$p."'>" . $row ."</option>" ; 
    }
    echo '</select>';
    echo '</datalist>';
    echo '<div>';
    echo '<label for="name" class="breed">Si autre préciser : 
    </label>';
    echo '</div>';
    echo '<div>';
    echo '<input type="text" name="dog">';
    echo '</div>';
    echo '</div>';

  }

    add_shortcode ('dog_api', 'dog_func');



    function dog_shortcode(){
        echo '<input type="button" class="add" value="Ajouter un chien" id="test" onClick="addField();">';

}
add_shortcode( 'dog_breed' , 'dog_shortcode');





function addField() {
     var field = "<input type='text' name='' value=''/>";
     document.getElementById('divFields').innerHtml += field;
     console.log('test');
}

我解释说我必须创建一个表格来添加比赛用的狗,所以我尝试根据需要添加一个按钮来添加我选择的数量,以添加2种狗(无论是3种还是5种), 我的选择是一个短代码,可以将其插入客户想要的Elementor中

1 个答案:

答案 0 :(得分:2)

为了在div内附加html。

function addField() {
     var field = "<input type='text' name='' value=''/>";
     // WITH JQuery
     $("#divFields").append(field);          
     // WITH JS
     document.getElementById('divFields').appendChild(field ); 
}

使用jQuery,生活变得容易得多,您可以使用JQuery