We Keep Coding

How to append an inline template element with modified (id) content to another element?

Below in the example, I want that each time when the add button is clicked to take the element inside the template div and append it to the landingzone class element. But at the same time I need the NEWID to change for the new element. Of course this is just an example, the table stuff can be a div or anything else.
the form:
<form method="post">
<input type="text" name="title">
<input type="text" name="number">
<table>
<thead>
<tr> <th>Parts</th> </tr>
</thead>
<tbody class="landingzone">
</tbody>
</table>
<input type="submit" value="Save">
<input type="button" name"add" class="add" value="Save">
</form>
the template:
<div class="template" style="display: hidden">
<tr id="NEWID">
<td>
<input type="text" name="part_NEWID">
</td>
</tr>
</div>
What would be the best way to accomplish this?

Here's an example for your need. The javascript will work without changing any html except in place of name"add" should be name="add"
What i have done here is i'm getting the id of the template tr and setting it with increment and also the input field name.
var $landingzone = $('.landingzone');
var $add = $('.add');
var desiredId = 'id';
$add.on('click', function() {
var $template = $('.template').find('tr');
var id = $template.attr('id');
var idArr = id.split('-');
if (!idArr[1]) {
id = desiredId + '-1';
} else {
id = desiredId + '-' + (parseInt(idArr[1]) + 1);
}
$template.attr('id', id);
$template.find('input').attr('name', 'part_'+id);
console.log('input id--->'+id, 'input name--->'+'part_'+id);
$landingzone.append($template.clone());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">
<input type="text" name="title">
<input type="text" name="number">
<table>
<thead>
<tr>
<th>Parts</th>
</tr>
</thead>
<tbody class="landingzone">
</tbody>
</table>
<input type="submit" value="Save">
<input type="button" name="add" class="add" value="Add">
</form>
<table class="template" style="display: none">
<tr id="NEWID">
<td>
<input type="text" name="part_NEWID">
</td>
</tr>
</table>

Like #Andrea said in her comment, some more details would be appreciated ...
I think what you are after is:
const $template = $('.template').clone()
$template.attr('id', 'someId')
$template.find('input[name="part_NEWID"]').attr('name', 'part_someId')
$('.landingzone').append($template)
And if you need it in a function:
function appendTemplateToLandingZone (newId) {
const $template = $('.template').clone()
$template.attr('id', newId)
$template.find('input[name="part_NEWID"]').attr('name', 'part_' + newId)
$('.landingzone').append($template)
}
I haven't tested this, so it might need a slight adjustment. If you'll provide a basic jsbin I'll make it work there.

How to get value from input text which is ng-repeated by Tr?

I have a table and its tr is been ng-repeated. one can also add a new row to it by clicking a button.
Now suppose tr is been repeated 3 times and we add 2 extra rows to it and enter some data. when we click on submit button how can we get the whole data of the table in the controller.
Well i Got the answer for this But My actual scenario is like this
My HTML page is like this
<div ng-repeat="details in Information" >
<!--
my other stuff
-->
<table>
<thead>
<tr>
<th>name</th>
<th>age</th>
<th>city</th>
<th>add</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="detail in details.personInfo">
<td><input type="text" ng-model="detail.name" /></td>
<td><input type="text" ng-model="detail.age" /></td>
<td><input type="text" ng-model="detail.city" /></td>
<td><input type="text" ng-model="detail.add" /></td>
<td><input type="button" ng-click="addnewRow();" /> </td>
</tr>
<tbody>
</table>
<input type="button" ng-click="SaveDetails();" value="SaveDetais"/>
</div>
My Controller is :
$scope.addnewRow = function(){
var newRow = "<tr>"+
"<td><input type='text' ng-model='detail.name' /></td>"+
"<td><input type='text' ng-model='detail.age' /></td>"+
"<td><input type='text' ng-model='detail.city' /></td>"+
"<td><input type='text' ng-model='detail.add' /></td>"+
"<td><input type='button' ng-click='addnewRow();' /> </td>"+
"</tr>";
$("table tbody").append(newRow);
}
$scope.SaveDetails = function(){
// how i will get all to data from the input fields her
}
Now how can i push the data in it. As when i do
$scope.details.personInfo.push({..})
it gives me an error "personInfo" not define
Then for this scenario how it should be done

You have a design issue here that becomes most obvious when you make the jQuery call. As a very strong rule of thumb you should not manipulate the DOM (particularly by call jQuery) in Angular, especially in your controller.
Your addnewRow() function should look like
$scope.addnewRow = function(){
$scope.details.push({})
}
Then you don't even need a saveDetails function - details is automatically updated!

For starters, you don't want to do dom manipulation in a controller.
If you want $scope.SaveDetails (the convention for non-constructor functions in javascript is camelcase), what I would do is instead of adding markup, I would add a new entry to the details array:
$scope.addnewRow = function(){
$scope.details.push({SOMEDETAILOBJECT})
}
$scope.SaveDetails = function(){
//some sort of ajax update call that sends $scope.details
}

You need to change a bit approach.
Function addnewRow, instead adding element to DOM should add new detail to your details array and angular will update your table.
Data in your table represent $scope.details array so if you want get in in controller just use $scope.details
var app = angular.module('app', []);
app.controller('firstCtrl', function($scope) {
function detail(name, age, city, add) {
this.name = name || "";
this.age = age || "";
this.city = city || "";
this.add = add || "";
return this;
}
$scope.details = [{
name: "ammin",
age: "16",
city: "NY",
add: "true"
}, {
name: "joe",
age: "80",
city: "CH",
add: false
}];
$scope.addnewRow = function() {
var newDetai = new detail()
$scope.details.push(newDetai)
}
$scope.save = function() {
console.log($scope.details);
$scope.saved = true
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
<div ng-controller="firstCtrl">
<table>
<thead>
<tr>
<th>name</th>
<th>age</th>
<th>city</th>
<th>add</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="detail in details">
<td>
<input type="text" ng-model="detail.name" />
</td>
<td>
<input type="text" ng-model="detail.age" />
</td>
<td>
<input type="text" ng-model="detail.city" />
</td>
<td>
<input type="text" ng-model="detail.add" />
</td>
<td>
<input type="button" ng-click="addnewRow();" />
</td>
</tr>
<tbody>
</table>
<pre ng-show="saved">Details:{{details| json}}</pre>
<button ng-click="save()">Save</button>
</div>
</body>

Have you tried to just get back details from scope ?
$scope.SaveDetails = function(){
$scope.details
}

Why the text contained in textarea is not coming in the $_POST array in PHP?

I've following HTML form:
<form name="question_issue_form" id="question_issue_form" class="login_box" method="post" action="{$site_url}question_issue.php">
<input type="hidden" name="form_submitted" id="form_submitted" value="yes"/>
<input type="hidden" name="post_url" id="post_url" value="question_issue.php"/>
<input type="hidden" name="op" id="op" value="question_issue"/>
<input type="hidden" name="question_id" id="question_id" value="{$question_id}"/>
<table class="trnsction_details" width="100%" cellpadding="5">
<tbody>
<tr>
<td></td>
<td>
<input type="checkbox" name = "que_issue[]" value = "Question is wrong" id ="chkQueWrong">Question is wrong</input>
</td>
</tr>
<tr>
<td></td>
<td><input type="checkbox" name = "que_issue[]" value = "Answers are wrong" id ="chkAnsWrong">Answers are wrong</input></td>
</tr>
<tr>
<td></td>
<td><input type="checkbox" name = "que_issue[]" value = "Question direction is incorrect" id ="chkDirIncorrect">Question direction is incorrecct</input></td>
</tr>
<tr>
<td></td>
<td><input type="checkbox" name = "que_issue[]" value = "Other" id ="chkOther">Other</input></td>
</tr>
<tr>
<td></td>
<td class="set_message" style="display:none;"><textarea name="que_issue_comment" id = "que_issue_comment" rows="4" cols="25" maxlength="100"></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="submit" value="Submit" id="report_question_issue" class="c-btn submit_form"/></td>
</tr>
</tbody>
</table>
</form>
I'm submitting the form using AJAX. When I print the $_POST[] array I'm able to get all the values entered by user, values from hidden fields, etc. except the text from the textarea having name que_issue_comment. Can anyone guide me why such thing is happening? For your reference I'm putting below the AJAX code I've written.
<script language="javascript" type="text/javascript">
$(document).on("click","input[id='chkOther']", function (e) {
$('.set_message').toggle(this.checked);
});
$(document).on('click', "input[id='report_question_issue']", function(e) {
e.preventDefault();
//for confirmation that status change
var ans = confirm("Are you sure to report the question issue?");
if (!ans) {
return false;
}
var post_url = $('#post_url').val();
$.ajax({
type: "POST",
url: post_url,
data: $('#question_issue_form').serialize(),
dataType: 'json',
success: function(data) {
var error = data.error_message;
if(error)
alert(error);
else {
alert("Question issue has been reported successfully.");
$.colorbox.close();
}
}
});
});
</script>
The array $_POST[] printed after form submission is as follows:
(
[form_submitted] => yes
[post_url] => http://localhost/abc/pqr/web/question_issue.php
[op] => question_issue
[question_id] => 77104
[que_issue_comment] =>
)
Why the index value [que_issue_comment] is coming blank even after filling up the text area?

How Can I Insert Multiple Rows Into a DB from my HTML Form with Multiple Rows Dynamically?

so here's my situation. I have a form that gives the user the ability to add any number of rows to the form and input more data into those newly created rows (using javascript). I HAVE THIS ALREADY set up in the following code (I am using index.html, js/scripts.js and a php/upload.php files, all are externally linked, including an external CSS):
INDEX.HTML
<html>
<header>
<link rel="stylesheet" href="style.css" type="text/css">
<script type="text/javascript" language="javascript" src="/jquery/js/jquery-1.9.1.js">
</script>
<script src="http://www.mapquestapi.com/sdk/js/v7.0.s/mqa.toolkit.js?
key=Gmjtd%7Cluua2q6bn9%2C8g%3Do5-lzbsh"></script>
<script type="text/javascript" src="js/scripts.js"></script>
<title>Central Office Company Survey</title>
</header>
<body onload="get_company_name();">
<h1>Central Office Company Survey</h1>
<div id='map' style='width:0px; height:0px; position:absolute'></div>
<input type="hidden" id="co_city">
<input type="hidden" id="co_state">
<input type="hidden" id="co_zipcode">
<table>
<th>Company</th>
<th>CO Name</th>
<th>Get Current Location</th>
<th>Lat</th>
<th>Long</th>
<th>Address</th>
<tr>
<td><select id="company_name"></select></td>
<td><input id="co_name" type="text"></td>
<td><input type="submit" value="Get GPS" onclick="gpslookup()"></td>
<td><input id="co_lat" type="text"></td>
<td><input id="co_long" type="text"></td>
<td><input id="co_address" type="text"></td>
</tr>
</table>
<table id="tabledata">
<th>Select</th>
<th>Border Location Name</th>
<th>Cable Location</th>
<th>Direction of Vault Wall</th>
<th>Cable Type</th>
<th>Cable Size (pairs)</th>
<th>Cable Gauge</th>
<th>Vertical(s) appeared on Verticals</th>
<th>Approximate Number of Jumpers</th>
<th>Are Protectors Still In?</th>
<th>Metered Distance</th>
<th class="comments">Central Office Comments</th>
<!--Begin Rows-->
<tr>
<td><input type="checkbox"></td>
<td><input id="border_location" type="text" name="txt[]"></td>
<td><input id="cable_location" type="text" name="txt[]"></td>
<td><input id="vault_direction" type="text" name="txt[]"></td>
<td><input id="cable_type" type="text" name="txt[]"></td>
<td><input id="cable_size" type="text" name="txt[]"></td>
<td><input id="cable_gauge" type="text" name="txt[]"></td>
<td><input id="vertical" type="text" name="txt[]"></td>
<td><input id="jumpers" type="text" name="txt[]"></td>
<td><input id="protectors" type="text" name="txt[]"></td>
<td><input id="metered_dist" type="text" name="txt[]"></td>
<td><input id="comments" type="text" name="txt[]"></td>
</tr>
</table>
<input id="addrow_btn" type="submit" value="Add New Row" onclick="addRow(); return false;" />
<input id="delrow_btn" type="submit" value="Delete Row" onclick="deleteRow(); return false;" />
<input id="submit" type="submit" value="Submit" onclick="uploaddata(); return false;" />
</body>
</html>
As for the backend, I ONLY have the PHP and server side scripts able to submit information for that first row using the below code:
JAVASCRIPT FILE
function addRow() {
var table = document.getElementById("tabledata");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[1].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[1].cells[i].innerHTML;
//alert(newcell.childNodes);
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
}
}
//UPLOAD DATA
//Global variables
var survey = {
'co_name' : "",
'co_lat' : "",
'co_long' : "",
'co_address' : "",
'border_location' : "",
'cable_location' : "",
'vault_direction' : "",
'cable_type' : "",
'cable_size' : "",
'cable_gauge' : "",
'vertical' : "",
'jumpers' : "",
'protectors' : "",
'metered_dist' : "",
'comments' : "",
'company_name' : "",
'co_city' : "",
'co_state' : "",
'co_zipcode' : ""
}
function uploaddata() {
//Read all of the data from the page
for (eID in survey) {
survey[eID] = document.getElementById(eID).value;
}
//Insert data into database
$.ajax({
type: 'POST',
url: './php/upload_survey.php',
data: survey,
async: false,
dataType: 'text',
success: function() {
alert("Thank you. Your survey has been submitted.");
window.location.reload();
},
error: function(jqXHR, textStatus, errorThrown) {
alert("Error... " + textStatus + "\n" + errorThrown);
}
});
}
PHP FILE
//Assign passed parameters
$co_name = $_POST['co_name'];
$co_lat = $_POST['co_lat'];
$co_long = $_POST['co_long'];
$co_address = $_POST['co_address'];
$border_location = $_POST['border_location'];
$cable_location = $_POST['cable_location'];
$vault_direction = $_POST['vault_direction'];
$cable_type = $_POST['cable_type'];
$cable_size = $_POST['cable_size'];
$cable_gauge = $_POST['cable_gauge'];
$vertical = $_POST['vertical'];
$jumpers = $_POST['jumpers'];
$protectors = $_POST['protectors'];
$metered_dist = $_POST['metered_dist'];
$comments = $_POST['comments'];
$txt = $_POST['txt'];
$stringLogInfo = "INFO: Location: $co_address CO Name = $co_name !!!\n\n";
log_audit($logAuditFile, $logModule, $stringLogInfo);
//Parse and store the ini file, this will return an associative array
ini_set("display_errors", "1");
error_reporting(E_ALL);
//Insert Survey Form Information into the database
$fieldlist=$vallist='';
foreach ($_POST as $key => $value) {
$fieldlist.=$key.',';
$vallist.='\''.$value.'\',';
}
$fieldlist=substr($fieldlist, 0, -1);
$vallist=substr($vallist, 0, -1);
$sql='INSERT INTO table_name ('.$fieldlist.') VALUES ('.$vallist.')';
mysql_query($sql) or die ("Unable to Make Query:" . mysql_error());
My objective up to this point, having already everything else sort of ready, is to be able to loop through all the data in the form, according to however many rows they create and submit all those new row values into the SQL Database into SEPARATE rows. Please Advise!

Focusing on the HTML part of this question here is an approach to grow a form dynamically:
First the HTML:
<table id="tabledata">
<thead>
<th>Select</th>
<th>Border Location Name</th>
<th>Cable Location</th>
<th>Direction of Vault Wall</th>
<th>Cable Type</th>
<th>Cable Size (pairs)</th>
<th>Cable Gauge</th>
<th>Vertical(s) appeared on Verticals</th>
<th>Approximate Number of Jumpers</th>
<th>Are Protectors Still In?</th>
<th>Metered Distance</th>
<th class="comments">Central Office Comments</th>
</thead>
<tbody id="input"></tbody>
<tbody id="template">
<tr>
<td><input name="selected" type="checkbox" /></td>
<td><input name="border_location" type="text" /></td>
<td><input name="cable_location" type="text" /></td>
<td><input name="vault_direction" type="text" /></td>
<td><input name="cable_type" type="text" /></td>
<td><input name="cable_size" type="text" /></td>
<td><input name="cable_gauge" type="text" /></td>
<td><input name="vertical" type="text" /></td>
<td><input name="jumpers" type="text" /></td>
<td><input name="protectors" type="text" /></td>
<td><input name="metered_dist" type="text" /></td>
<td><input name="comments" type="text" /></td>
</tr>
</tbody>
</table>
<button id="ActionAddRow">Add Row</button>
<button id="ActionSubmit">Submit</button>
And This JavaScript:
$(function () {
var addInputRow = function () {
$('#input').append($('#template').html());
};
addInputRow();
$('#ActionAddRow').on('click', addInputRow);
$('#ActionSubmit').on('click', function () {
var data = $('#input tr').map(function () {
var values = {};
$('input', $(this)).each(function () {
if (this.type === 'checkbox') {
values[this.name] = this.checked;
} else {
values[this.name] = this.value;
}
});
return values;
}).get();
$.post('/echo/json/', {
json: JSON.stringify(data),
delay: 1
}).done(function (response) {
alert("POST success");
console.log(response);
});
});
});
And then this CSS:
tbody#template {
display: none;
}
Produces this demo
Here is a breakdown of what is happening. First the table element can define mutiple bodies, so I've added the HTML of an empty row of inputs and hidden (with CSS) it in a tbody with the ID of template. Using JavaScript, I then define a simple function that just appends the contents of that row to the tbody with the ID of inputs and I bind that function to the click event of a button. Then because the inputs tbody is starts out as empty I call that function once. Then for submitting the form, I select all rows of the inputs tbody and iterate over the inputs found inside them. Next, I am combining them into one large array of JavaScript objects with each element representing a row, and finally I'm posting this showing a round trip with this data from the client to the server (I'm using JSON2.js to serialize the data). Your PHP page would pick up from here to check them on the server, and (using a prepared statement) insert valid rows into the database.
Your PHP would take the POSTed values like this:
$value = json_decode($_POST['json']);
And treat the submitted data as an associative array. This approach uses an AJAX Form Post, so the response of the PHP page should be a valid JSON with a structure something like this:
{Success: true}

dojo framework - event doesn't work

I have a trouble in my code,
I want to send an ajax request by clicking a button,
but the request is automatically run, even when I don't click the button,
here is my code:
<script type="text/javascript">
function set(mode) {
var nomor_awal = dojo.query("input[name=nomor_awal]");
var nomor_akhir = dojo.query("input[name=nomor_akhir]");
var validGetUrl = "";
validGetUrl += "nomor_awal="+objNomorAwal.attr("value")+"&";
validGetUrl += "nomor_akhir="+objNomorAkhir.attr("value");
dojo.xhrPost({
url:"<?php echo base_url(); ?>register_perkara/pidana_biasa/"+mode+"/",
content:{
filter:validGetUrl
},
load:function(response){
(response!="1")? document.location = window.location: null;
}
});
}
dojo.ready(function(){
dojo.connect(dojo.query("input[name=filter]"), "onclick", set("set_filter"));
}
</script>
<table>
<tr>
<td><label for="nomor_awal">Nomor awal</label></td>
<td><input type="text" name="nomor_awal" size="8" value="" /></td>
</tr>
<tr>
<td><label for="nomor_akhir">Nomor akhir</label></td>
<td><input type="text" name="nomor_akhir" size="8" value="" /></td>
</tr>
<tr>
<td colspan="2"><input type="button" name="filter" /></td>
</tr>
</table>
I don't click the filter button but the function are automatically executed, why?

I don't know dojo, but this line
dojo.connect(dojo.query("input[name=filter]"), "onclick", set("set_filter"));
executes the set function and passes the return value to dojo.connect.
You have to pass the function, not call it. So I'm quite sure you want:
dojo.connect(dojo.query("input[name=filter]"), "onclick", function() {
set("set_filter");
});