javascript - 在 javascript 生成的表单中创建输入字段

Question

js Fiddle

我的页面上有一个拖放区域，其中显示照片添加到拖放区域后已成功上传到服务器。每张照片都有一个名为 uploaded 的类，其中包含每张单独的照片。上传图像后，我需要每张照片旁边显示一个输入字段，允许用户为每张照片添加标签。一旦他们在输入字段中输入以逗号分隔的标签，他们就可以单击“提交”。此时函数调用

addTags()

将被调用，标签将根据文件名添加到照片中。我无法找到最专业的方法来做到这一点，

我正在考虑创建一个包含所有隐藏字段的表单，添加字段名称和保存文件名的值。这样用ajax就可以很容易的获取文件名和标签。请告诉我如何专业地完成这样的事情。

这是允许并循环显示上传文件的JS，

 // Initialize the jQuery File Upload plugin
    $('#upload').fileupload({

        // This element will accept file drag/drop uploading
        dropZone: $('#drop'),

        // This function is called when a file is added to the queue;
        // either via the browse button, or via drag/drop:
        add: function (e, data) {

            var tpl = $('<li class="working uploaded"><input type="text" value="0" data-width="48" data-height="48"'+
                ' data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" /><p></p><span></span></li>');

        // Append the file name and file size      
            tpl.find('p').text(data.files[0].name)
                         .append('<i>' + formatFileSize(data.files[0].size) + '</i>');

            // Add the HTML to the UL element
            data.context = tpl.appendTo(ul);

            // Initialize the knob plugin
            tpl.find('input').knob();

            // Listen for clicks on the cancel icon
            tpl.find('span').click(function(){

                if(tpl.hasClass('working')){
                    jqXHR.abort();
                }

                tpl.fadeOut(function(){
                    tpl.remove();
                });

            });

            // Automatically upload the file once it is added to the queue
            var jqXHR = data.submit();
        },

因此，为拖放区中上传的每个文件返回文件名，如下所示，

tpl.find('p').text(data.files[0].name)

现在我如何在此 JS 函数中创建表单，为每个上传的文件添加名称到每个隐藏表单字段，并添加一个允许输入图片标签的文本输入字段。

本质上我正在寻找一种添加这样的表单的方法，

 <form onSubmit="addTags();return false;">
<input type="hidden" name="imgName" value="var imgName" id="imgName">
<input type="text" name="tags" palceholder="add tags seperated by ," id="tags">
<input type="submit" name="login" value="Add Tags" class="submit" id="adTags"/>
                    </form>

addTags() 函数

function addTags(){
    $.ajax({
        type: 'POST',
        url: 'data/add_tags.php',
        data: "&tag_type_id=" + $('#tag_type_id').val() + "&tag_target_name=" + $('#tag_target_name').val() +
            "&tag_target_url=" + $('#tag_target_url').val() + "&tags=" + $('#tags').val(),    
                success: function(response){
            console.log(response);
            if(response === 'error'){
                        $('.messageText').empty()
                    $('.messageImage').empty()
                    $('.messageText').append('Please add tags seperated by commas');
                $(".messageImage").append('<img src="images/error.png" height="50" width="50">');
                $('.message').slideDown(400).delay(10000).fadeOut(400)   
            }
            else {
                    $('.messageText').empty()
                    $('.messageImage').empty()
                    $('.messageText').append('Your tags have been added.');
                    $(".messageImage").append('<img src="images/success.png" height="50" width="50">');
                    $('.message').slideDown(400).delay(10000).fadeOut(400)   
            }   
       }
    });
 };

   AJAX makes call to this php function,

<?php
//Include files                 
require_once('../classes/class_login.php');

$tag_type_id = $_POST['tag_type_id'];
$tag_target_name = $_POST['tag_target_name'];
$tag_target_url = $_POST['tag_target_url'];
$tags = $_POST['tags'];

    /*** begin with some validation ***/
    if(!isset($_POST['tag_type_id'], $_POST['tag_target_name'], $_POST['tag_target_url'], $_POST['tags']))
    {
        /*** if no POST is submited ***/
        $msg = 'Please Submit a tag';
        print('error');
    }
    elseif(filter_var($_POST['tag_type_id'], FILTER_VALIDATE_INT, array("min_range"=>1, "max_range"=>100)) == false)
    {
        /*** if tag is too short ***/
        $msg = 'Invalid Tag Type';
                print('error');
    }
    elseif( strlen($_POST['tag_target_url']) == 0 )
    {
        /*** if tag is too long ***/
        $msg = 'Tag target is required';
                print('error');
    }
    elseif( strlen($_POST['tags']) == 0 )
    {
        $msg = 'Tag Required';
                print('error');
    }
    elseif(  strlen($_POST['tag_target_name']) == 0 )
    {
        $msg = 'Tag Name is too short';
                print('error');
    }
    elseif( strlen($_POST['tag_target_name']) > 30 )
    {
        $msg = 'Tag Name is too long!';
                print('error');
    }
    else
    {
        /*** if we are here, all is well ***/

        $tag_type_id = filter_var($_POST['tag_type_id'], FILTER_SANITIZE_NUMBER_INT);
        $tag_target_url = filter_var($_POST['tag_target_url'], FILTER_SANITIZE_STRING);
        $tag_target_name = filter_var($_POST['tag_target_name'], FILTER_SANITIZE_STRING);
        $tags = filter_var($_POST['tags'], FILTER_SANITIZE_STRING);

            addTags($tag_type_id, $tag_target_name, $tag_target_url, $tags);

            $msg = 'Tag Type Added!';
                    print('success');
        }

?>       

php 函数是在这样的类中定义的，

function addTags($tag_type_id, $tag_target_name, $tag_target_url, $tags){

        /*** explode the tag string ***/
            $tag_array = explode(',', $tags);

            /*** loop of the tags array ***/
            foreach( $tag_array as $tag_name )
            {
                /*** insert tag into tags table ***/
                $tag_name = strtolower(trim($tag_name));

                $databaseQuery = "INSERT IGNORE INTO tags (tag_name ) VALUES ('$tag_name')";
                //Execute database query
                executeDatabase($databaseQuery);

                /*** get the tag ID from the db ***/
                $databaseQuery  = "SELECT tag_id FROM tags WHERE tag_name='$tag_name'";
                $result = executeDatabase($databaseQuery);
                $tag_id = mysqli_num_rows($result);

                /*** now insert the target ***/
                $databaseQuery = "INSERT INTO tag_targets
                    (tag_id, tag_target_name, tag_target_url, tag_type_id)
                    VALUES
                    ('$tag_id', '$tag_target_name', '$tag_target_url', '$tag_type_id')";
                executeDatabase($databaseQuery);
            }
}

Answer 1

在循环中，您可以创建元素、设置其属性并使用 createElement 将它们附加到 DOM , setAttribute ，和 appendChild 。示例:

var myNewElement= document.createElement("input");
myNewElement.setAttribute("id","new_element_id");
myNewElement.setAttribute("class","new_element_class");
myNewElement.setAttribute("name","new_element_name");
document.getElementById("desired_parent").appendChild(myNewElement);

请注意，有一种替代/补充方法。如果您要创建许多相似的复杂元素(例如，您有一个“图像描述符”框，其中包含一些文本元素、输入字段、一些 div 等)，则可以在页面上使用隐藏元素所有这些元素，克隆它，并使用此方法修改其中的一部分并将其放在您想要的位置。