JS + sweetalert - insert values from checkbox to input field - javascript

I must select from a window (done with sweetalert2) a row.
And insert them according to the column in each input of the following image
This is the code of the pop up...
function detalleTransf( detalle_transferencia_id, matricula, bancoorigenTransf, cbu_cta_origen, titular_cta_origen, ultimos_digitos_cta_origen) {
var datosTransferencia = {{ datosTransferencia|json_encode|raw }} ;
let html = "<html><body>"
html += "<div class='table-responsive'><table class='table table-hover table-condensed no-border'>" +
"<tr class='encabezado-tabla'> <td class='text-center'>Seleccionar </td><td class='text-center'> Matricula</td><td class='text-center'> Banco de Origen</td><td class='text-center'>CBU Cuenta Origen</td><td class='text-center'>Titular Cuenta Origen</td><td class='text-center'>Últimos 5 Dígitos Cuenta Origen</td> </tr>";
for (let row of datosTransferencia) {
html += "<tr id='algo'><td class='text-center'><div class='radio'><input type='checkbox' name='check' value='value' id='regular' onclick='unCheck(this)' ><label style='display: none'>" + row.detalle_transferencia_id + "</div></label></td>";
html += "<td class='text-center'>" + matricula + "</td>";
html += "<td class='text-center'>" + row.transf_banco + "</td>";
html += "<td class='text-center'>" + row.transf_cbu + "</td>";
html += "<td class='text-center'>" + row.transf_titular + "</td>";
html += "<td class='text-center'>" + row.transf_ctaorigen + "</td></tr>";
}
html += "</table></div>";
html += "</body></html>";
return html;
};
Example:
In the sweetalert window, I select a row with the check, the value of the "banco de origen" column... must go in the second image in the input field "banco de origen"
what i need is a function to insert the data from the window to de input field

Related

How to set Javascript's variable value inside <input value=''">

I do not know how to formulate this question but it is near close to my issue. I am trying to make a Point of sale system so when client clicks in each product it adds in the table. There are no issues in my code but I do not know how to set the product's price using a textbox when using .append.
This is my code:
$(".agregarListaF").click(function (e) {
e.preventDefault();
var padre = $(this);
var hijos = padre.children().children("span");
var i = 0;
var datos = new Array();
hijos.each(function () {
switch (i) {
case 0:
datos[0] = $(this).text();
break;
case 1:
padre;
datos[1] = $(this).text();
break;
case 2:
padre;
datos[2] = $(this).text();
break;
}
i++;
});
console.log(datos[0]);
console.log(datos[1]);
$(".detallefactura").append(
"<tr>" +
"<td>" +
datos[0] +
"</td>" +
"<td>" +
datos[1] +
"</td>" +
"<td>" +
"<input type='text' class='form-control text-center' value='1'>" +
"</td>" +
"<td>" +
"<input type='text' class='form-control text-center' value=''>" +
"</td>" +
"<td class='tota-sub-fila'>" +
parseFloat(Math.floor(datos[2]) * parseFloat(1)).toFixed(2) +
"</td>"
);
});
My issue is in the line:
+ "<td>" + "<input type='text' class='form-control text-center' value=''>" + "</td>"
I want to add javascript value variable inside * input value=''* but I know It wont work but I tried it:
+ "<td>" + "<input type='text' class='form-control text-center' value='datos[2]'>" + "</td>"
This is my point of sale view:
In the column precio is where I want to set the price inside that textbox.
How do I solve this?
Please try this code,To How to set Javascript's variable value inside
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript| Set the value of an input field.
</title>
</head>
<body style="text-align:center;" id="body">
<input type='text' id='id1' />
<br>
<br>
<button onclick="gfg_Run()">
click to set
</button>
<p id="GFG_DOWN" style="color:green; font-size: 20px;font-weight: bold;"></p>
<script>
var el_down = document.getElementById("GFG_DOWN");
var inputF = document.getElementById("id1");
function gfg_Run() {
inputF.setAttribute('value', 'defaultValue');
el_down.innerHTML = "Value = " + "'" + inputF.value + "'";
}
</script>
</body>
</html>
I hope this information will be useful.
Thank you.
Follow this using template literals
const html = `<tr>
<td>${datos[0]}</td>
<td>${datos[1]}</td>
<td><input type="text" class="form-control text-center" value="${datos[3]}"></td>
<td><input type="text" class="form-control text-center" value="${datos[4]}"</td>
<td class="tota-sub-fila">${parseFloat((Math.floor(datos[2])) * parseFloat(1)).toFixed(2)}</td>
</tr>`;
$(.detallefactura").append(html);
You can do:
var variable="x";
"<input type='text' class='form-control text-center' value='"+ variable +"'>";
Or,
`<input type='text' class='form-control text-center' value='${variable}'>`
you can use Template literals like this instead of having this concatenation:
$(.detallefactura").append(`<tr>
<td> ${datos[0]} </td>
<td> ${datos[1]} </td>
<td> <input type='text' class='form-control text-center' value='1'> </td>
<td> <input type='text' class='form-control text-center' value='${datos[2]}'> </td>
<td class='tota-sub-fila'> ${parseFloat((Math.floor(datos[2])) * parseFloat(1)).toFixed(2)} </td>
`);

Append JavaScript variable to option element

I have a table with combo box in my jsp :
<form:form modelAttribute="mainCommodity" id="mainCommodityForm">
<table id="customPostTable" >
<td>
<form:select path="postId">
<form:option value="0" id="PleaseSelect2"/>
<form:options items="${posts}" itemValue="id" itemLabel="name"/>
</form:select>
<form:errors path="postId"/>
</td>
<td style="padding: 2px ;vertical-align:middle;border: 1px solid" id="addMoreElem">
<img id="addMoreImage" src="/images/Plus.png" onclick='addMore("${postsString}")' alt="<fmt:message key="button.addRow"></fmt:message>">
</td>
</table>
</form:form>
Now I want to append another rows to this table by clicking button in JavaScript. allPosts is an array which contains my combo box items in java script.
My jsp code for append to table is as follows:
function addMore(attr) {
var data = "";
data = "<tr>" +
"<td style='padding: 2px;vertical-align:middle;border: 1px solid'>" +
"<select name='postId'>" +
"</select>" +
"</td>"+
"<td style='padding: 20px' class='noBorder-fa' >" +
"<img id='addMoreImage' src='/images/Plus.png' onclick='addMore("+attr+")' alt='<fmt:message key="button.addRow"></fmt:message>' > " +
"</td>" ;
$("#customPostTable").append(data);
}
How can I append options to the select element with value of allPosts in JavaScript?
Does this works for you:
function addMore(attr) {
allPosts = ["One", "Two", "Three"];
var data = "";
all_Posts_Options = "";
for(var i=0; i<allPosts.length; i++) {
all_Posts_Options = all_Posts_Options + "<option>" + allPosts[i] + "</options>";
}
data = "<tr>" +
"<td style='padding: 2px;vertical-align:middle;border: 1px solid'>" +
"<select name='postId'>" +
all_Posts_Options +
"</select>" +
"</td>"+
"<td style='padding: 20px' class='noBorder-fa' >" +
"<img id='addMoreImage' src='/images/Plus.png' onclick='addMore()' alt='<fmt:message key=\"button.addRow\"></fmt:message>' > " +
"</td>" ;
$("#customPostTable").append(data);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="customPostTable">
</table>
<button onclick="addMore(null)">Add more</button>
Please note that inserting new elements via HTML is not recommended.
DOM manipulation tools shall be used instead. See MDN

creating table into the Javascript

Actually i am creating a Modal and in the modal some dynamic data is to shown but my problem is while i insert the Modal body through the .html tag, I am unable to iterate my object Array into the .html tag,
Here is my Script:
echo "<script>
function myFunction(order){
$('.modal-body').html('<table>'
+'<tr>'
+'<th>'+'<b>S.No</b>'+'</th>'
+'<th>'+'<b>Name</b>'+'</th>'
+'<th>'+'<b>Quantity</b>'+'</th>'
+'<th>'+'<b>Personalization</b>'+'</th>'
+'</tr>'
+'<tr>'
var myOrder = order; //Here is my problem i want to iterate my Order object here and populate the rows through this
var arrayLength = myOrder.length;
+'<td>'+'Bill Gates'+'</td>'
+'<td>'+'555 77 854'+'</td>'
+'<td>'+'Bill Gates'+'</td>'
+'<td>'+'555 77 854'+'</td>'
+'</tr>'
+'</table>');
$('#myModal').modal({backdrop: false});
}
</script>";
Here is My Modal:
//<!-- Modal -->
echo"<div class='modal fade' id='myModal' role='dialog'>";
echo"<div class='modal-dialog'>";
// <!-- Modal content-->
echo"<div class='modal-content'>";
echo"<div class='modal-header'>";
echo"<button type='button' class='close' data-dismiss='modal'>×
</button>";
echo"<h4 class='modal-title'><center>Order Details</center></h4>";
echo"</div>";
echo"<div class='modal-body'>";
// echo "Order Number : " . "<script> ('.modal-body').html(order.order_id) </script>" ."<br>";
echo"</div>";
echo"<div class='modal-footer'>";
echo"<button type='button' class='btn btn-default' data-dismiss='modal'>Close</button>";
echo"<button type='button' class='btn btn-default' >Update</button>";
echo"</div>";
echo"</div>";
echo"</div>";
echo"</div>";
I guess you want something like
function myFunction(order) {
var result = '<table>' // + '<tr>'... etc
order.items.forEach(function(entry) {
result += '<tr>'
+ '<td>' + order.order_id + '</td>' // Or whatever field is "S. no"
+ '<td>' + entry.title + '</td>'
+ '<td>' + entry.quantity + '</td>'
+ '<td>' + (entry.personalization || '') + '</td>'
+ '</tr>';
})
result += '</table>';
$('.modal-body').html(result);
}
In the line where you have var myOrder = order. On the other hand, the order object only has one order_id so it will be the same for everything.
Also this file doesn't need to change so you don't need to echo scape it but serve as javascript or inside <script> tag.
Use like this. if you use plus and single quotes script will not work.
echo "<script>
function myFunction(order){
$('.modal-body').html(<table>\
<tr>\
<th><b>S.No</b></th>\
<th><b>Name</b></th>\
<th><b>Quantity</b></th>\
<th><b>Personalization</b></th>\
</tr>\
<tr>\
<td>Bill Gates</td>\
<td>555 77 854</td>\
<td>Bill Gates</td>\
<td>555 77 854</td>\
</tr>\
</table>);
$(#myModal).modal({backdrop: false});
}
</script>";
Update php variable inside like this..
echo "<script>
function myFunction(order){
$('.modal-body').html(<table>\
<tr>\
<th><b>S.No</b></th>\
<th><b>Name</b></th>\
<th><b>Quantity</b></th>\
<th><b>Personalization</b></th>\
</tr>\
<tr>\
<td>".$user."</td>\
<td>".$phone."</td>\
<td>".$name."</td>\
<td>".$mobile."</td>\
</tr>\
</table>);
$(#myModal).modal({backdrop: false});
}
</script>";
Loop inside
$loop="";
for($i=1;$i<=5;$i++){
$loop.="<tr><td>".$user."</td><td>".$phone."</td><td>".$name."</td><td>".$mobile."</td></tr>";
}
echo "<script>
function myFunction(order){
$('.modal-body').html(<table>\
<tr>\
<th><b>S.No</b></th>\
<th><b>Name</b></th>\
<th><b>Quantity</b></th>\
<th><b>Personalization</b></th>\
</tr>".$loop."</table>);
$(#myModal).modal({backdrop: false});
}
</script>";

how to create a table with thead inside the getJSON

<html>
<head>
<style>
header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:400px;
float:left;
padding:10px;
}
section {
width:600px;
float:right;
padding:10px;
}
</style>
</head>
<body>
<header>
<h1>Generate your own query</h1>
</header>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
<script type="text/javascript" language="javascript">
var i=0;
$(document).ready(function() {
$("#driver").click(function(event){
$.getJSON('result.json', function(jd) {
$('#stage').empty();
$('#stage').append('<p class="selected first"> Queries: ' + jd.queries_status+ '</p>');
var $tthead=$("#usertable thead");
//$tthead.html ="";
/* var theaddata="";
theaddata += "<tr>";
theaddata += "<th>" + query_id + "</th>";
theaddata += "<th>" + query_status + "</th>";
theaddata += "<th>" + query_result_number + "</th>";
theaddata += "<th>" + query_results + "</th>";
theaddata += "<th>" +action + "</th>";
theaddata += "</tr>";
$tthead.append(theaddata);*/
var $tbody = $("#usertable tbody");
$tbody.html("");
var tabledata = "";
for(i = 0; i < jd.list_of_queries.length; i++ ){
tabledata = "";
tabledata += "<tr>";
tabledata += "<td>" + jd.list_of_queries[i].query_id + "</td>";
tabledata += "<td>" + jd.list_of_queries[i].query_status + "</td>";
tabledata += "<td>" +jd.list_of_queries[i].query_results_number + "</td>";
tabledata += "<td>" +jd.list_of_queries[i].query_results + "</td>";
tabledata += "<td>" + '<input type="button" value="details" onclick= "display(this)" name=" '+jd.list_of_queries[i].query_id+' " />' + "</td>";
tabledata += "</tr>";
$tbody.append(tabledata);
}
});
});
});
function display(value) {
$.getJSON('result.json', function(jd) {
var $tdetail = $("#detail tbody");
$tdetail.html("");
var tabledetail = "";
for(i = 0; i < jd.list_of_queries[value.name-1].list_of_tasks.length; i++ ){
tabledetail = "";
tabledetail += "<tr>";
tabledetail += "<td>" + jd.list_of_queries[value.name-1].list_of_tasks[i].task_id + "</td>";
tabledetail += "<td>" + jd.list_of_queries[value.name-1].list_of_tasks[i].task_status + "</td>";
tabledetail+= "<td>" + jd.list_of_queries[value.name-1].list_of_tasks[i].task_operation + "</td>";
tabledetail += "<td>" + jd.list_of_queries[value.name-1].list_of_tasks[i].number_of_hits + "</td>";
tabledetail += "<td>" + jd.list_of_queries[value.name-1].list_of_tasks[i].finished_hits + "</td>";
tabledetail += "<td>" + jd.list_of_queries[value.name-1].list_of_tasks[i].task_result_number + "</td>";
tabledetail +="</tr>";
$tdetail.append(tabledetail);
}
});
}
</script>
</head>
<section>
<div id="stage1" >
Please enter your query <input type="text" name="query" size="50">
</div>
<div id="stage">
</div>
<br />
<input type="button" id="driver" value="submit query" formaction="http://localhost/queryexample.html"/>
<br />
<br />
<table id="usertable" border="1" cellpadding="5" cellspacing=0>
<thead>
<tr>
<th>query id</th>
<th>query status</th>
<th>query result_number</th>
<th>query results</th>
<th>action</th>
</tr>
</thead>
<tbody> </tbody>
</table>
<br />
<form>
<input type="submit" id="submit" value="go back"formaction="http://localhost/queryexample.html" >
</form>
</section>
<nav>
<table id="detail" border="1" cellpadding="5" cellspacing=0>
<tbody> </tbody>
</table>
<br />
</nav>
currently, I create the table at the initial page, with the thead of the table. Is it possible to make the thead and the tbody of the table inside the getJSON function? thanks in advance.The comment code is what I tried before, but it does not work, hope somebody could revise.

interact with newly created html via javascript

I would like to add a new div from javascript to my existing html page. Normally I do this with the instruction document.createElement("div") and I fill this div with the methode div.innerHTML = "" (for example). This works fine in most cases, but now I would like to add a selectionlist to my div and fill this lists with some data. This method doesn't work:
function initEdit(){
addPanel = document.createElement("div");
addPanel.innerHTML = "<form id='addProperty' method='get'> <table>" +
"<tr> <td> <select size='4' style='width:140px; height:200px' id='object_property_selection' onClick='unSelect(\"data_property_selection\")'> </td>" +
"<td> <select size='4' style='width:140px; height:200px' id='object_selection'>" +
"<textarea style='width:140px; height:200px; display:none' id='data_selection' /> </td> </tr>" +
"<tr> <td> <select size='4' style='width:140px; height:100px' id='data_property_selection' onClick='unSelect(\"object_property_selection\")'> </td>" +
"<td> </td> </tr>" +
"<tr> <td colspan=2> <input type='button' name='Submit' style='width:100%' onClick='submitProperty()' /> </td> </tr>" +
"</table> </form>";
$('body').jAlert(contents, 'info', offset);
list1.forEach(function(element, id){
var option = document.createElement("OPTION");
option.text = option.value = property;
form.data_property_selection.options.add(element);
})
}
Does anybody know how to solve this? (BTW: I can't set this html code in the page at the beginning, because this is the contents of a jAlert div)
update: solution
properties1.concat(properties2).forEach(function(property, id){
if (id < object_properties.length) propertyList1 += "<option value='" + property + "'>" + property + "</option>";
else propertyList2 += "<option value='" + property + "'>" + property + "</option>";
})
objects.forEach(function(feature, id) {
objectList += "<option value='" + feature._id + "'>" + feature.name + "</option>";
})
propertyList = "<form id='addProperty' method='get'> <table>" +
"<tr> <td> <select size='4' style='width:140px; height:200px' id='object_property_selection' onClick='unSelect(\"data_property_selection\")'>" +
propertyList1 + "</select> </td>" +
"<td> <select size='4' style='width:140px; height:200px' id='object_selection'>" +
objectList + "</select> </td>" +
"<textarea style='width:140px; height:200px; display:none' id='data_selection' /> </td> </tr>" +
"<tr> <td> <select size='4' style='width:140px; height:100px' id='data_property_selection' onClick='unSelect(\"object_property_selection\")'>" +
propertyList2 + "</select> </td>" +
"<td> </td> </tr>" +
"<tr> <td colspan=2> <input type='button' name='Submit' style='width:100%' onClick='submitProperty()' /> </td> </tr>" +
"</table> </form>";
As far as I know, achieving what you want with this method is impossible. Instead of using innerHTML, you should do the long way, creating all the inner tags with createElement as well, and appending them as children. Using jQuery can make this job a lot easier.
Here is an example of how to do it with jQuery: link, and the official API.
Alternatively, if you can first create the inner list, then just create it and concatenate it as a string as a part of innerHTML (first make the list, only then edit innerHTML).

Categories