使用PHP在mySQL中将HTML Form数组插入多行(Insert HTML Form array into multiple rows in mySQL with PHP)
在编码时我是一个相对新手,但现在已经在一个侧面项目上工作了一段时间。 我的目的是使用HTML表单创建一个报表工具,通过PHP将信息输入MySQL。 对于单场输入,该过程没有问题。 我遇到问题的地方是当我尝试获取一个Form输入表(带有3个字段)并通过在html表单中添加另一行字段来创建数组时(如果有必要),然后将数组插入到多个MySQL中行。 我知道这个主题已经在StackOverflow中出现了几次,我已经阅读了大多数(如果不是全部)这些主题,但由于某些原因,所提供的答案对我不起作用。
这是我正在使用的代码示例。 这是表格部分:
<form name="weekly" action="process_form.php" method="post">
...
售后 - 票证和错误数据
<div class="form-group"> <table id="tac" class="form-group" border="1"> <tbody> <tr> <p> <td class="ticket"> <label>Customer</label><input type="text" name="customerTac[]" ng-model="customerTac[]" id="customerTac[]" /> </td> <td class="ticket"> <label>Ticket ID</label> <input type="text" name="tacTicket[]" ng-model="tacTicket[]" id="tacTicket[]"> </td> <td class="comment"> <label for="tacComments">Ticket Comments</label> <input type="text" name="tacComments[]" ng-model="tacComments[]" id="tacComments[]" cols="100"> </td> </p> </tr> </tbody> </table> <p><input type="button" value="Add MOS Ticket" onclick="addRow('tac')" /> </p>
将此信息插入MySQL的process_form.php的PHP文件如下所示:
$sql .= "INSERT INTO tac (date, userid, ticket, customer, comments) "; foreach (array('tacTicket', 'customerTac', 'tacComments') as $tac) { foreach ($_POST[$tac] as $tacTix => $rowTac) { $_POST[$tac][$tacTix] = mysqli_real_escape_string($mysqli, $rowTac); } } $tacTicket = ($_POST['tacTicket']); $customerTac = ($_POST['customerTac']); $tacComments = ($_POST['tacComments']); $itemsTac = array(); $sizeTac = count($tacTicket); for($iTac = 0 ; $iTac < $sizeTac ; $iTac++) { // Check for ticket if (empty($tacTicket[$iTac]) || empty($customerTac[$iTac]) || empty($tacComments[$iTac])) { continue; } $itemsTac[] = array( "tacTicket" => $tacTicket[$iTac], "customerTac" => $customerTac[$iTac], "tacComments" => $tacComments[$iTac] ); } if (!empty($itemsTac)) { $valuesTac = array(); foreach($itemsTac as $itemTac){ $valuesTac[] = "('{$itemTac['tacTicket']}', '{$itemTac['customerTac']}', '{$itemTac['tacComments']}')"; } $valuesTac = implode(", ", $valuesTac); $sql .= "VALUES (now(), '".$username."', ".$valuesTac.");"; }
我遇到的是当我将字段发布到表单中时:
我得到的MySQL命令如下:
INSERT INTO tac (date, userid, ticket, customer, comments) VALUES (now(), 'Test', ('1206982096', 'test1', 'first test'), ('292526022', 'test2', 'second test'), ('3026909620', 'test3', 'third test'));
我尝试了多种不同的方式,有时我得到第一组值,有时我会得到所有值。 我最近将INSERT INTO部分移到foreach命令之上,这可能不是一个好主意,但在一天结束时,我希望看到以下情况发生:
INSERT INTO tac (date, userid, ticket, customer, comments) VALUES (now(), 'Test', '1206982096', 'test1', 'first test');INSERT INTO tac (date, userid, ticket, customer, comments) VALUES (now(), 'Test', '292526022', 'test2', 'second test');INSERT INTO tac (date, userid, ticket, customer, comments) VALUES (now(), 'Test', '3026909620', 'test3', 'third test');如果有人对如何实现这一点有任何想法,我将不胜感激。
I am a relative novice when it comes to coding, but have been working on a side project for a little while now. My intent is to create a reporting tool using HTML forms that input the information into MySQL via PHP. For single field inputs, the process has been no problem. Where I am running into issues is when I attempt to take a Form input table (with 3 fields) and create an array by adding another row of fields in the html form, if they are necessary, and then inserting the array into MySQL in multiple rows. I know this topic has come up a few times in StackOverflow and I have read through most if not all of these topics, but for some reason the answers provided are not working for me.
Here is an example of the code that I am using. This is the form portion:
<form name="weekly" action="process_form.php" method="post">
...
Post Sales - Ticket and Bug Data
<div class="form-group"> <table id="tac" class="form-group" border="1"> <tbody> <tr> <p> <td class="ticket"> <label>Customer</label><input type="text" name="customerTac[]" ng-model="customerTac[]" id="customerTac[]" /> </td> <td class="ticket"> <label>Ticket ID</label> <input type="text" name="tacTicket[]" ng-model="tacTicket[]" id="tacTicket[]"> </td> <td class="comment"> <label for="tacComments">Ticket Comments</label> <input type="text" name="tacComments[]" ng-model="tacComments[]" id="tacComments[]" cols="100"> </td> </p> </tr> </tbody> </table> <p><input type="button" value="Add MOS Ticket" onclick="addRow('tac')" /> </p>
The PHP file of process_form.php to insert this info into MySQL looks like this:
$sql .= "INSERT INTO tac (date, userid, ticket, customer, comments) "; foreach (array('tacTicket', 'customerTac', 'tacComments') as $tac) { foreach ($_POST[$tac] as $tacTix => $rowTac) { $_POST[$tac][$tacTix] = mysqli_real_escape_string($mysqli, $rowTac); } } $tacTicket = ($_POST['tacTicket']); $customerTac = ($_POST['customerTac']); $tacComments = ($_POST['tacComments']); $itemsTac = array(); $sizeTac = count($tacTicket); for($iTac = 0 ; $iTac < $sizeTac ; $iTac++) { // Check for ticket if (empty($tacTicket[$iTac]) || empty($customerTac[$iTac]) || empty($tacComments[$iTac])) { continue; } $itemsTac[] = array( "tacTicket" => $tacTicket[$iTac], "customerTac" => $customerTac[$iTac], "tacComments" => $tacComments[$iTac] ); } if (!empty($itemsTac)) { $valuesTac = array(); foreach($itemsTac as $itemTac){ $valuesTac[] = "('{$itemTac['tacTicket']}', '{$itemTac['customerTac']}', '{$itemTac['tacComments']}')"; } $valuesTac = implode(", ", $valuesTac); $sql .= "VALUES (now(), '".$username."', ".$valuesTac.");"; }
What I am running into is when I post the fields into the form:
The MySQL command I get from this is as follows:
INSERT INTO tac (date, userid, ticket, customer, comments) VALUES (now(), 'Test', ('1206982096', 'test1', 'first test'), ('292526022', 'test2', 'second test'), ('3026909620', 'test3', 'third test'));
I have tried multiple different ways and some times I get the first set of values and other times I will get all values. I recently moved the INSERT INTO portion up above the foreach commands which probably is not a good idea, but at the end of the day, I would like to see the following happen:
INSERT INTO tac (date, userid, ticket, customer, comments) VALUES (now(), 'Test', '1206982096', 'test1', 'first test');INSERT INTO tac (date, userid, ticket, customer, comments) VALUES (now(), 'Test', '292526022', 'test2', 'second test');INSERT INTO tac (date, userid, ticket, customer, comments) VALUES (now(), 'Test', '3026909620', 'test3', 'third test');If anyone has any thoughts on how I can accomplish this, I would greatly appreciate it.
原文:https://stackoverflow.com/questions/35633637
最满意答案
对模拟/深层/ CSS选择器(阴影穿孔后代组合器>>>)的支持已被弃用,以与浏览器实现和Chrome的删除意图相匹配。 :: ng-deep已被添加,为当前使用此功能的开发人员提供临时解决方法。
从这里: http : //angularjs.blogspot.com/2017/07/angular-43-now-available.html
I've done some digging and it is possible to overwrite the ng-bootstrap styles if you turn off the view encapsulation for a component, like so:
@Component({ selector: 'app-example', templateUrl: './example.component.html', styleUrls: ['./example.component.scss'], encapsulation: ViewEncapsulation.None }) export class ExampleComponent { constructor(public activeModal: NgbActiveModal) { } }
For example, here I am customizing the styles for a modal dialog, because I assumed that my example component should be shown as a modal dialog and I want its width to be at maximum 70% of the view port in small screen sizes:
.modal-dialog { @include media-breakpoint-down(xs) { max-width: 70vw; margin: 10px auto; } }
Please note that turning off the view encapsulation means that the styles for this particular component will be available throughout the application, therefore other components will have access to them and will eventually use them if you are not careful.
相关问答
更多-
如何使用Angular 2修改ng-bootstrap轮播的CSS(How modify CSS of ng-bootstrap carousel using Angular 2)[2023-06-21]
这个问题更多地与样式封装在Angular中的工作方式有关,而不是与ng-bootstrap特定的内容有关,但简短的答案是在默认样式封装中(来自https://angular.io/docs/ts/latest/guide) /component-styles.html ): 组件样式通常仅适用于组件自己的模板中的HTML 由于ngb-carousel 不是组件HTML的一部分(它完全是一个不同的组件),因此必须强制样式向下传播组件结构: 使用/ deep / selector将样式向下强制通过子组件树到所有 ... -
对模拟/深层/ CSS选择器(阴影穿孔后代组合器>>>)的支持已被弃用,以与浏览器实现和Chrome的删除意图相匹配。 :: ng-deep已被添加,为当前使用此功能的开发人员提供临时解决方法。 从这里: http : //angularjs.blogspot.com/2017/07/angular-43-now-available.html I've done some digging and it is possible to overwrite the ng-bootstrap styles if y ...
-
将由ng-bootstrap datepicker填充的输入初始化为空白(Initialize input populated by ng-bootstrap datepicker to blank)[2023-09-20]
在getDate函数中更改第二行以let timestamp = this[workingDateName] != null ? new Date(this[workingDateName].year, this[workingDateName].month - 1, this[workingDateName].day).getTime() : null; let timestamp = this[workingDateName] != null ? new Date(this[workingDateNam ... -
这个问题更多地与样式封装在Angular中的工作方式有关,而不是与ng-bootstrap特定的内容有关,但简短的答案是在默认样式封装中(来自https://angular.io/docs/ts/latest/guide) /component-styles.html ): 组件样式通常仅适用于组件自己的模板中的HTML 由于ngb-progressbar 不是组件HTML的一部分(它完全是一个不同的组件),因此必须强制样式向下传播组件结构: 使用/ deep / selector将样式向下强制通过子组件树 ...
-
我在用 @ng-bootstrap/ng-bootstrap 1.0.0-alpha.26 这与角度2.4.0不兼容 尝试使用1.0.0-alpha.24作为@yurzui建议并且它现在正在运行。 I was using @ng-bootstrap/ng-bootstrap 1.0.0-alpha.26 which is not compatible with angular 2.4.0 tried using 1.0.0-alpha.24 as @yurzui suggested and it i ...
-
不,你不能使用它。 为了使用它,我们从角度4升级到5,除了例外之外,它并不痛苦。 我们遇到的唯一问题是更新一些将更新中的界面从4更改为5的外部组件。 No, you cant use it. To use it we upgraded from angular 4 to 5, it wasnt painful as excepted. The only problem we had was updating some external component who changed their interfac ...
-
两者都很好,你可以翻转一个硬币并使用任何一个。 我是我的项目ng-bootstrap ,到目前为止没有问题。 但是选择一个框架可能会很棘手,你应该考虑很多事实。 首先都支持Angular 4和Bootstrap 4 ,但ngx-bootstrap支持Bootstrap 3 。 在github ngx-bootstrap wins中检查已解决的问题时,请检查这些链接ng-bootstrap , ngx-bootstrap 。 ngx-bootstrap团队在这里还有更多模块,比如ng2-file-upload ...
-
如果这有助于任何人,我发现这些可以导入: import {MediaMatcher} from '@angular/cdk/layout'; import {ChangeDetectorRef, Component} from '@angular/core'; 然后在组件中做到这一点: mobileQuery: MediaQueryList; private _mobileQueryListener: () => void; constructor(private changeDetectorRef: ...
-
在角度4中使用bootstrap 4或ng-bootstrap组件(Usage of bootstrap 4 or ng-bootstrap components in angular 4)[2023-07-11]
ng-bootstrap包含一组基于Bootstrap标记和CSS的原生Angular指令。 因此,它不依赖于jQuery or Bootstrap's JavaScript 注意 ng-bootstrap要求将Bootstrap的4 css添加到你的项目中,并且你需要明确地安装它 bootstrap 4依赖于jQuery和Bootstrap's JavaScript 。 我建议你去使用ng-bootstrap因为它会极大地影响最终包的大小 ng-bootstrap contains a set of na ... -
ng-bootstrap:ngb-progressbar自定义背景颜色(ng-bootstrap: ngb-progressbar custom background color)[2024-05-27]
只需重写类.progress-bar并对css放置!important .progress-bar{ background-color:black !important; } 现场演示 Just by overriding the class .progress-bar and placing an !important against the css .progress-bar{ background-color:black !important; } LIVE DEMO