- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在编写一个生成器来提高我的 PHP 编程和处理知识,因为我很弱,而且我已经知道我想问我如何才能做到这一点。在 javascript 中生成输入数据,我想在 PHP 中动态捕获它们的值。我不知道有多少,因为它们是点击按钮后生成的,因此出现了问题。
同时我成功使用这个名称在 JS 中注册:name_0、name_1 等等。
可行吗?下面我就不说了
var tytul = document.getElementById("k-title");
var opis = document.getElementById("k-description");
var popup = document.getElementById("info_box");
var overlay = document.getElementById("overlay");
var podsumowanie = document.getElementById("summary");
$("#add").on("click", function () {
var id = $(".wiersz").length;
$('#tabela').append('<tr class="wiersz"><td class="komorka-lewa"> <input class="cecha" name="cecha_'+ id + '" type="text" placeholder="Cecha produktu"> </td><td class="komorka-prawa"><input class="cecha-opis" name="cecha-opis_'+ id + '" type="text" placeholder="Opis cechy produktu"></td></tr>');
document.getElementById("default-table").style = "display: none";
});
$("#add_square").on("click", function() {
var szerokosc = prompt("Podaj szerokość obrazka");
var wysokosc = prompt("Podaj wysokość obrazka");
var sciezka = prompt("Podaj link do zdjęcia");
$("#other-photos").append('<div class="other-img" style="width: '+szerokosc+'px;"><img class="img-present" style="height: '+ wysokosc +'px;" src="'+sciezka+'" /></div>');
if (szerokosc < 1050) {
$(".other-img").css("float", "left");
}
});
$("#add_photo").on("click", function () {
var sciezka = prompt("Podaj link do zdjęcia");
var opis = prompt("Podaj opis zdjęcia dla wyszukiwarek");
$("#gallery").append('<div class="photo-container"><button class="del">Usuń zdjęcie</button><img src="' + sciezka + '" class="photo" alt="' + opis + '"/></div>');
if ($(".photo").length > 0) {
document.getElementById("default-gallery").style = "display: none";
}
$(".del").on("click", function () {
$(this).parent().css("display", "none");
document.getElementById("default-gallery").style = "display: block";
});
});
$("#gen").on("click", function () {
if (opis.value.length < 1 || tytul.value.length < 1) {
popup.style = "display: block";
overlay.style = "display: block";
document.getElementById("infobox-content").innerHTML = "Uzupełnij wszystkie potrzebne dane, zanim wygenerujesz kartę produktu.";
} else {
popup.style = "display: block";
overlay.style = "display: block";
document.getElementById("infobox-content").innerHTML = "Karta została wygenerowana, plik z kodem znajduje się w katalogu generate.";
podsumowanie.innerHTML = "Tytuł: " + tytul.value + "<br>" + "Opis produktu: " + opis.value + "<br>" + "Cecha produktu: " + cecha + "<br>" + "Opis cechy produktu: " + cechaopis;
}
});
$("#close").on("click", function() {
popup.style = "display: none";
overlay.style = "display: none";
});
$("#add_section").on("click", function() {
var szerokosc = prompt("Określ szerokość sekcji");
var wysokosc = prompt("Określ wysokosć sekcji");
var tlo = prompt("Określ kolor tła sekcji (paleta RGB - np. FFFFFF)");
var kolor = prompt("Określ kolor tekstu w sekcji (paleta RGB - np. FFFFFF)");
$("#new_section").append('<div class="sekcja" style="width: '+ szerokosc +'px; height: '+ wysokosc +'px; background: #'+ tlo +'; color: #'+ kolor +';"><button type="button" class="check_btn">Checklista</button><button type="button" class="txt_btn">Sekcja tekstowa</button></div>');
if ($(".sekcja").length > 0) {
$("#default-section").css("display","none");
}
if(szerokosc < 1050) {
$(".sekcja").css("float","left");
}
});
body {
margin: 0;
font-family: 'open sans',sans-serif;
font-size: 15px;
}
.wiersz {
background-color: #eee;
margin: 0;
}
.komorka-lewa {
padding: 3px 10px;
text-align: right;
border-right: 1px solid #dbdbdb;
}
.komorka-prawa {
padding: 3px 10px;
text-align: left;
}
#tabela {
font-size: 14px;
border: none;
border-top: 1px solid #dbdbdb;
border-bottom: 1px solid #dbdbdb;
width: 100%;
}
.cecha, .cecha-opis {
border: 0;
margin: 0;
background: 0;
}
#gen {
display: block;
width: 100%;
margin-top: 10px;
}
#add, #gen, #add_photo, #add_section {
border: 0;
padding: 10px;
background: #222;
color: #fff;
border-radius: 3px;
font-family: 'open sans',sans-serif;
font-size: 15px;
}
#add:hover, #gen:hover, #add_photo:hover, #add_section:hover, .check_btn:hover, .txt_btn:hover {
background: green;
cursor: pointer;
transition-duration: 1s;
}
#add_section {
margin-top: 25px;
margin-bottom: 25px;
}
#container {
max-width: 1050px;
margin-left: auto;
margin-right: auto;
}
#overlay {
width: 100%;
height: 100%;
background: rgba(0,0,0,0.6);
z-index: 2;
position: absolute;
}
#info_box {
background: #fff;
position: absolute;
z-index: 3;
width: 500px;
top: 50%;
transform: translateY(-50%);
padding: 10px;
padding-top: 0;
left: 50%;
margin-left: -250px;
}
#info_box p:first-child {
font-size: 20px;
border-bottom: 1px solid #eaeaea;
padding-bottom: 10px;
}
#info_box, #overlay {
display: none;
}
#info_box > p span {
cursor: pointer;
color: red;
}
.photo {
display: block;
width: 100%;
}
.photo:first-child {
margin-top: 25px;
}
.photo:last-child {
margin-bottom: 25px;
}
#default-gallery, #default-section {
font-size: 14px;
border-bottom: 1px solid #dbdbdb;
padding: 5px;
}
.photo-container {
position: relative;
overflow: hidden;
margin-bottom: 25px;
}
.photo-container:first-child {
margin-top: 25px;
}
.photo-container:last-child {
margin-bottom: 25px;
}
.del {
position: absolute;
bottom: 50px;
right: 25px;
background: transparent;
border: 3px solid #fff;
padding: 10px;
font-family: 'open sans',sans-serif;
font-size: 15px;
color: #fff;
border-radius: 3px;
}
.del:hover {
background: #fff;
cursor: pointer;
transition-duration: 0.5s;
color: #222;
}
#add_square {
width: 150px;
height: 150px;
background: #eaeaea;
margin-bottom: 25px;
padding: 20px;
border: 1px solid #c0c0c0;
}
#add_square:hover {
background: #222;
cursor: pointer;
transition-duration: 0.5s;
color: #fff;
}
.img-present {
max-width: 100%;
}
.other-img:last-child {
margin-bottom: 25px;
}
.sekcja {
position: relative;
}
.check_btn, .txt_btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
padding-top: 10px;
padding-bottom: 10px;
border: 0;
background: #000;
font-size: 15px;
font-family: 'open sans',sans-serif;
color: #fff;
}
.check_btn {
left: 0;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.txt_btn {
right: 0;
b
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="info_box">
<p>Informacja <span id="close" style="float: right;">x</span></p>
<p id="infobox-content"></p>
</div>
<div id="overlay"></div>
<div id="container">
<form method="post" action="">
<div style="padding-top: 50px; padding-bottom: 50px;">
<input type="text" value="" id="k-title" name="k-title" placeholder="Tytuł karty" style="display: block; width: 100%; font-size: 30px; border: 0; background: 0; margin-bottom: 25px; text-align: center;">
<input type="text" value="" id="k-description" name="k-desc" placeholder="Krótki opis" style="display: block; width: 100%; border: 0; background: 0; text-align: justify; padding: 10px;">
</div>
<div style="width: 100%; text-align: center; background-color: #eee; font-weight: 200; line-height: 0.92em; padding: 23px 0; font-size: 30px;">Specyfikacja techniczna</div>
<table id="tabela" border="0" cellspacing="0" cellpadding="5px">
<tbody>
<tr>
<td colspan="2" id="default-table">Brak dodanej specyfikacji</td>
<tr>
</tbody>
</table>
<button style="margin-top: 25px; margin-bottom: 25px;" id="add" type="button">Dodaj wiersz</button>
<div id="other-photos">
<div id="add_square" style="position: relative;">
<p style="text-align: center; position: absolute; width: 150px; top: 40px; font-size: 60px; margin: 0;">+</p>
<p style="text-align: center; position: absolute; width: 150px; bottom: 40px; margin: 0;">Dodaj obrazek prezentacji</p>
</div>
</div>
<div style="clear: both;"></div>
<div style="width: 100%; text-align: center; background-color: #eee; font-weight: 200; line-height: 0.92em; padding: 23px 0; font-size: 30px;">Dodaj nową sekcję</div>
<div id="new_section">
<div id="default-section">Brak dodanych sekcji</div>
</div>
<div style="clear: both;"></div>
<button type="button" id="add_section">Dodaj sekcję</button>
<div style="width: 100%; text-align: center; background-color: #eee; font-weight: 200; line-height: 0.92em; padding: 23px 0; font-size: 30px;">Galeria zdjęć</div>
<div id="default-gallery">Brak dodanych zdjęć</div>
<div id="gallery">
</div>
<button style="margin-top: 25px; margin-bottom: 25px;" id="add_photo" type="button">Dodaj zdjęcia</button>
<input id="gen" type="submit" value="Generuj kartę" />
</div>
<div id="summary">
</div>
</form>
最佳答案
最简单的解决方案:
将生成的输入字段命名为:
<input ... name="field[]"> // see the []-Brackets
<input ... name="field[]">
<input ... name="field[]">
括号会导致提交表单时发送一个名为“field”的数组。当然你也可以给他们一个像 field[0]、field[1] 之类的 Key。
提交表单后,您可以像处理任何其他 PHP 数组一样处理它。
例如:
foreach($_POST['field'] as $fieldno => $fieldvar){
echo 'field '.$fieldno.': '.$fieldvar.'<br>';
}
提示:对同一部分使用相同的键对于处理数据非常有帮助:
<input name="givenname[0]"><input name="lastname[0]"><input name="age[0]">
<input name="givenname[1]"><input name="lastname[1]"><input name="age[1]">
<input name="givenname[2]"><input name="lastname[2]"><input name="age[2]">
您可以通过以下方式提交后获取这些数据:
foreach($_POST['givenname'] as $id => $givenname){
echo 'person #'.$id.': '.$_POST['lastname'][$id].', '.$givenname.', '.$_POST['age'][$id].'<br>';
}
关于javascript - 从 javascript 生成的动态输入中获取值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45304796/
我正在尝试使用以下 keytool 命令为我的应用程序生成 keystore : keytool -genkey -alias tomcat -keystore tomcat.keystore -ke
编辑:在西里尔正确解决问题后,我注意到只需将生成轴的函数放在用于生成标签的函数下面就可以解决问题。 我几乎读完了 O'Reilly 书中关于 D3.js 的教程,并在倒数第二页上制作了散点图,但是当添
虽然使用 GraphiQL 效果很好,但我的老板要求我实现一个用户界面,用户可以在其中通过 UI 元素(例如复选框、映射关系)检查呈现给他们的元素并获取数据,这样做将为该人生成 graphql 输入,
我尝试在 Netbean 6.8 中使用 ws-import 生成 Java 类。我想重新生成 jax-ws,因为在 ebay.api.paypalapi 包中发现了一个错误(我认为该错误是由于 Pa
我有一个 perl 脚本,它获取系统日期并将该日期写入文件名。 系统日期被分配给 TRH1 变量,然后它被设置为一个文件名。 $TRH1 =`date + %Y%m%d%H%M`; print "TR
我是 Haskell 的新手,需要帮助。我正在尝试构建一种必须具有某种唯一性的新数据类型,因此我决定使用 UUID 作为唯一标识符: data MyType = MyType { uuid ::
我制作了一个脚本,它可以根据 Mysql 数据库中的一些表生成 XML。 该脚本在 PHP 中运行。 public function getRawMaterials($apiKey, $format
所以这是我的项目中的一个问题。 In this task, we will use OpenSSL to generate digital signatures. Please prepare a f
我在 SAS LIFEREG 中有一个加速故障时间模型,我想绘制它。因为 SAS 在绘图方面非常糟糕,我想实际重新生成 R 中曲线的数据并将它们绘制在那里。 SAS 提出了一个尺度(在指数分布固定为
我正在为 Django 后端制作一个样板,并且我需要能够使它到达下一个下载它的人显然无法访问我的 secret key 的地方,或者拥有不同的 key 。我一直在研究一些选项,并在这个过程中进行了实验
我正在创建一个生成采购订单的应用程序。我可以根据用户输入的详细信息创建文本文件。我想生成一个看起来比普通文本文件好得多的 Excel。有没有可以在我的应用程序中使用的开源库? 最佳答案 目前还没有任何
我正在尝试使用 ScalaCheck 为 BST 创建一个 Gen,但是当我调用 .sample 方法时,它给了我 java.lang.NullPointerException。我哪里错了? seal
已关闭。此问题需要 debugging details 。目前不接受答案。 编辑问题以包含 desired behavior, a specific problem or error, and the
我尝试编写一些代码,例如(在verilog中): parameter N = 128; if (encoder_in[0] == 1) begin 23 binary_out = 1;
我正忙于在 Grails 项目中进行从 MySQL 到 Postgres 的相当复杂的数据迁移。 我正在使用 GORM 在 PostGres 中生成模式,然后执行 MySQL -> mysqldump
如何使用纯 XSLT 生成 UUID?基本上是寻找一种使用 XSLT 创建独特序列的方法。该序列可以是任意长度。 我正在使用 XSLT 2.0。 最佳答案 这是一个good example 。基本上,
我尝试安装.app文件,但是当我安装并单击“同步”(在iTunes中)时,我开始在设备上开始安装,然后停止,这是一个问题,我不知道在哪里,但我看到了我无法解决的奇怪的事情: 最佳答案 似乎您没有在Xc
自从我生成 JavaDocs 以来已经有一段时间了,我确信这些选项在过去 10 年左右的时间里已经得到了改进。 我能否得到一些有关生成器的建议,该生成器将输出类似于 .Net 文档结构的 JavaDo
我想学习如何生成 PDF,我不想使用任何第三方工具,我想自己用代码创建它。到目前为止,我所看到的唯一示例是我通过在第 3 方 dll 上打开反射器查看的代码,以查看发生了什么。不幸的是,到目前为止我看
我正在从 Epplus 库生成 excel 条形图。 这是我成功生成的。 我的 table 是这样的 Mumbai Delhi Financial D
我是一名优秀的程序员,十分优秀!