Question

我有一个自举模式。模态将显示有关一种产品的信息。在模态中，我有3个标签细节，图像和规格。产品将有图像，细节和规格。

当用户单击编辑时，默认情况下会显示模式并显示详细信息选项卡。

所有信息都是使用HTML表单显示的，因为我希望信息可以编辑。因此用户可以编辑细节，图像和规格。

我在模态底部有保存按钮，单击保存按钮应使用ajax提交详细信息，图像和规格信息。

我的问题： 我之前使用ajax完成了简单的数据提交。但这对我来说很复杂。如何使用JQuery从所有3个选项卡发送所有数据。当用户按下保存按钮我应该使用哪种脚本？

当用户按下保存按钮时，我希望保存所有日期。

有人可以帮助我。

非常感谢。

以下是模态的图像。

Modal tab 1 - details

modal tab 2 - image

modal tab 3 - specification

Answer 1

这里要解决的主要问题和问题是如何处理＆＃34;随着形象的情况。在会话中保存图像数据并从＆＃34; tab＆＃34;到＆＃34; tab＆＃34;很困难我会在这里做一些技巧：

1）每次用户使用＆＃34;选择文件＆＃34;您应该将数据发送到服务器并将其另存为临时图像文件。例如，在保存图像的数据库或文件夹中，为临时图像创建另一个文件夹，每次使用＆＃34;更改＆＃34; （使用onchange JavaScript侦听器）模态中的图像数据，将其发送到服务器。

2）对于其他类型的数据，您需要使用JavaScript的localStorage功能。

在modalBody中，您有三个不同的选项卡，当您单击每个选项卡时，您将更新其内容。所以你需要有这样的功能。

function onTabChange()
{
    var formElements = document.querySelectorAll(".form-control");
    for(var i = 0; i < formElements.length; i++)
    {
        if(formElements[i].value !== "") //if input value is empty it means user hasn't modified or added anything and we don't need to save "empty" data
        {
            localStorage.setItem(formElements[i].name, formElements[i].value);
        }
    }
}

因此，使用此功能，我们可以从＆＃34; tab＆＃34;传递数据值。到＆＃34; tab＆＃34;并将它们保存在浏览器的本地存储中。至于图像，我们在临时文件夹中有它，每当用户在表格中更改图像数据时更新。

用户点击＆＃34;提交＆＃34;按钮

function onSubmit()
{
    var formData = new FormData(); //create formData object, 
        formData.append("Description", localStorage.getItem("Description"); 
        //using JQuery or pure JavaScript you add data to formData object from localStorage. 
        var xmlHttp = new XMLHttpRequest(); 
            xmlHttp.onreadyStatechange = function()
            {
                if(xmlHttp.readyState === 4 && xmlHttp.status === 200)
                {
                    var responseText = xmlHttp.responseText; 
                    alert(responseText);
                }
            }
            xmlHttp.open("POST", "../Server.php");
            xmlHttp.send(formData);
}

使用jquery在不同选项卡上提交多个不同字段的表单。

1 个答案: