I have a simple university project for an online course site like Udemy.
This form for adding a course contains the course data and a dynamic table with a button that adds a new row.
My problem is POST data, I don't know how to get the table data to store in the Database.
edit:
I know how to use action"test.php".
I have created sign-up and login pages.
i know I can get post data example $email = $_POST['email'];
my problem is how I get a table
php code(I know all of it html):
<form action="" method="POST">
<div>
<label for="titleC">title course</label>
<input type="text" name="titleC" id="titleC" required>
</div>
<div>
<label for="Age">Choose a Rating Age:</label>
<select name="Age" id="Age" required>
<option value="12">12+</option>
<option value="16">16+</option>
<option value="18">18+</option>
</select>
</div>
<div>
<label for="Cprice">Course Price</label>
<input type="number" name="Cprice" id="Cprice" min="0" required>
</div>
<div>
<label for="Categories">Choose a Categories:</label>
<select name="Categories" id="Categories">
<option value="Development">Development</option>
<option value="IT">IT</option>
<option value="Design">Design</option>
<option value="Photography & Video">Photography & Video</option>
</select>
</div>
<div>
<label for="img">Select image:</label>
<input type="file" id="img" name="img" accept="image/*">
</div>
<table id="listVideo">
<thead>
<tr>
<th>Name</th>
<th>Link</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td><input type="text" id="txtName" name="name[]" /></td>
<td><input type="text" id="txtLink" name="link[]" /></td>
<td><input type="button" onclick="Add()" value="Add" /></td>
</tr>
</tfoot>
</table>
<div class="soloButton">
<button type="submit" name="addcourse-submit" value="submit">submit</button>
</div>
</form>
js code:
function Add() {
var txtName = document.getElementById("txtName");
var txtCountry = document.getElementById("txtLink");
AddRow(txtName.value, txtCountry.value);
txtName.value = "";
txtCountry.value = "";
};
function Remove(button) {
//Determine the reference of the Row using the Button.
var row = button.parentNode.parentNode;
var name = row.getElementsByTagName("TD")[0].innerHTML;
if (confirm("Do you want to delete: " + name)) {
//Get the reference of the Table.
var table = document.getElementById("listVideo");
//Delete the Table row using it's Index.
table.deleteRow(row.rowIndex);
}
};
function AddRow(name, txtLink) {
//Get the reference of the Table's TBODY element.
var tBody = document.getElementById("listVideo").getElementsByTagName("TBODY")[0];
//Add Row.
row = tBody.insertRow(-1);
//Add Name cell.
var cell = row.insertCell(-1);
cell.innerHTML = name;
//Add txtLink cell.
cell = row.insertCell(-1);
cell.innerHTML = txtLink;
//Add Button cell.
cell = row.insertCell(-1);
var btnRemove = document.createElement("INPUT");
btnRemove.type = "button";
btnRemove.value = "Remove";
btnRemove.setAttribute("onclick", "Remove(this);");
cell.appendChild(btnRemove);
}
The dynamic table was taken from one of the tutorials.
Thank you
[English is not my native language sorry]
Related
I'm looking to add multiple products to a table from a dynamically generated list, where each item has a button to add it to the table. It's not working now because when I click a product, it adds it to the table and then if I click another item in the list, it just replaces the first item in the list. This list is dynamically generated because it's coming from a database.
html:
<form action="insert.php" method= "POST" name = "productsForm">
<table>
<tr>
<th><label>Customer Name:</label></th>
<th><label>Phone:</label></th>
<th><label>Email:</label></th>
<th><label>RO | PO:</label></th>
<th><label>Address:</label></th>
</tr>
<tr>
<td><input type="text" name="txtCustomerName" id = "txtCustomerName"></td>
<td><input type="text" name="txtPhone" id = "txtPhone"></td>
<td><input type="text" name="txtEmail" id= "txtEmail"></td>
<td><input type="text" name="txtRopo" id= "txtRopo"></td>
<td><input type="text" name="txtAddress" id= "txtAddress"></td>
</tr>
<tr>
<th><label>SKU:</label></th>
<th><label>Product Name:</label></th>
<th><label>Quantity:</label></th>
<th><label>Retail Price:</label></th>
<th><label>List Price:</label></th>
</tr>
<tr>
<td><input type="text" name="txtSKU" id = "txtSKU"></td>
<td><input type="text" name="txtProductName" id= "txtProductName"></td>
<td><input type="text" name="txtQuantity" id= "txtQuantity"></td>
<td><input type="text" name="txtRetailPrice" id= "txtRetailPrice"></td>
<td><input type="text" name="txtListPrice" id= "txtListPrice"></td>
</tr>
<tr>
<td><input type="text" name="txtSKU1" id = "txtSKU1"></td>
<td><input type="text" name="txtProductName1" id= "txtProductName1"></td>
<td><input type="text" name="txtQuantity1" id= "txtQuantity1"></td>
<td><input type="text" name="txtRetailPrice1" id= "txtRetailPrice1"></td>
<td><input type="text" name="txtListPrice1" id= "txtListPrice1"></td>
</tr>
<tfoot>
<th><label id = "lblTotal">Total:</label><input type="text" name="txtTotal" id = "txtTotal"><input type="button" value= "Add" id = "addTotals"></button> </th>
</tfoot>
</table>
<button type="submit" name="submitOrder">Submit</button>
</form>
JavaScript - this function makes the list:
function populateProductList(jsonArr){
var html = "";
html += `<ol id="myULProducts">`;
for(var x = 0; x < jsonArr.length; x++){
html += `
<li SKU = "${jsonArr[x].SKU}">
<a href="#" class="products">
<strong>Product SKU:</strong> ${jsonArr[x].SKU}
<br><strong>Product Name:</strong> ${jsonArr[x].product_name}
<br><strong>Retail Price:</strong> ${jsonArr[x].retail_price}
<br><strong>List Price:</strong> ${jsonArr[x].list_price}
<br><br></a>
<button type="button" class="btnAddProductToOrder">Add to Order</button>
</li>
</div>`
}
html += `</ol>`;
var ul = document.createElement("ul");
ul.innerHTML = html;
var tableContainer = document.getElementById("product-list-container");
tableContainer.innerHTML = "";
tableContainer.appendChild(ul);
tableContainer.addEventListener("click", function(evt){
//populateCardGroupList();
var target = evt.target;
//if statement to see if the classList has a button edit
if(target.classList.contains("btnAddProductToOrder")){
//get the id of the card group clicked
var selectedId = target.closest("li").getAttribute("SKU");
//get the card group attached to that id and pass it the rest of the json Array of objects
var selectedProduct = getProductId(selectedId, jsonArr);
populateOrderFormProducts(selectedProduct);
}
});
}
JavaScript - this function adds the clicked item in the list to the product table below
function populateOrderFormProducts(jsonArr){
document.getElementById("txtSKU").value = jsonArr.SKU;
document.getElementById("txtProductName").value = jsonArr.product_name;
document.getElementById("txtQuantity").value = 1;
document.getElementById("txtRetailPrice").value = jsonArr.retail_price;
document.getElementById("txtListPrice").value = parseFloat(jsonArr.list_price);
}
For an application I am working on, I want to autocomplete a field using the input of the other field. My form will contain several pairs of inputs, which causes the problem for me to only change one specific input field.
$(function () {
$(".master").change(function () {
word = $(this).val();
$(this).parents('tr').find(".slave").val(word);
});
});
To add extra fields to the form, the script below is used.
$(document).ready(function() {
var max_fields = 1000; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<tr><td><div class="form-group"><input type="text" class="master" name="or['+x+']"></div></td><td> </td><td><div class="form-group"><input type="text" class="slave" name="tr['+x+']"></div></td></tr>'); //add input box
}
});
});
This is the form I'm using. This is one of the 100 rows in this form.
<form method="POST">
<table width="100%" class="input_fields_wrap">
<tr>
<td width="48%">
<div class="form-group">
<select id="original" name="original" class="form-control">
<option value="nederlands">Nederlands</option>
</select>
</div>
</td>
<td width="4%"></td>
<td width="48%">
<div class="form-group">
<select id="translated" name="translated" class="form-control">
<option value="frans">Frans</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-group"><input type="text" class="master" name="or[0]"></div>
</td>
<td> </td>
<td>
<div class="form-group"><input type="text" class="slave" name="tr[0]"></div>
</td>
</tr>
</table>
<button type="submit" id="save" class="btn btn-success pull-right">Opslaan</button>
</form>
So just to be clear, I want to change the value of the "translation" input according to the value of the input in the same row. As my form contains so many rows, I don't know how to change that specific input according to the input in the same table row. Thanks in advance!
Here you go, I had to take out the ajax call but if you need help adding it back in just let me know.
I changed your html a bit by using classes instead of id's and this is the relevant js.
$(function () {
$("table").on('change', '.master', function () {
word = $(this).val();
$(this).parents('tr').find(".slave").val(word);
});
});
https://jsfiddle.net/6LaLm33t/4/
What you can do is get the parent, and then find the #translation of that parent. original and translation should probably be classes.
var word = '';
$(function () {
$(".original").change(function () {
word = $(this).val();
var arr;
$.ajax({ type: "POST", async: false, url: 'wordsuggestion' + word, success: function(data) {
arr = data;
$(this).parents('tr').find(".translation").val(arr);
}});
});
});
If you don't want (or can't, for some reason) to change HTML (you will have to do it, anyway, if there are multiple id's!), this is one of the ways to get desired result:
$('table tr td:first-child input').on("keyup", function() {
$(this).closest('tr').find('td:last-child input').val($(this).val());
});
So, if you have 3 cells (td's) in row, first selector will 'grab' first input, second one will find last/second input in the same row.
$('table tr td:first-child input').on("keyup", function() { //or desired event...change...input..
$(this).closest('tr').find('td:last-child input').val($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr><td>
<div class="form-group"><div class="ui-widget"><input type="text" id="original" class="form-control" name="or[0]"></div></div>
</td>
<td> </td>
<td>
<div class="form-group"><input type="text" id="translation" class="form-control tags" name="tr[0]"></div>
</td>
</tr>
<tr><td>
<div class="form-group"><div class="ui-widget"><input type="text" id="original" class="form-control" name="or[0]"></div></div>
</td>
<td> </td>
<td>
<div class="form-group"><input type="text" id="translation1" class="form-control tags" name="tr[0]"></div>
</td>
</tr>
<tr><td>
<div class="form-group"><div class="ui-widget"><input type="text" id="original1" class="form-control" name="or[0]"></div></div>
</td>
<td> </td>
<td>
<div class="form-group"><input type="text" id="translation2" class="form-control tags" name="tr[0]"></div>
</td>
</tr>
</table>
I did an example about replacing the input value when the row is deleted but is not working (this is not a static example).
<script src="./edit_files/prototype.js" type="text/javascript"></script>
<script src="./edit_files/application.js" type="text/javascript"></script>
<div class="contact">
<table border="0">
<tr>
<td><select class="position_id" id="obj_client_contact_attributes__position_id" name="obj_client[contact_attributes][][position_id]"><option value="1" selected="selected">INTELIGENT</option><option value="2">OTHER</option></select></td>
<td><input class="should_change_value" id="obj_client_contact_attributes__phone_mail" name="obj_client[contact_attributes][][phone_mail]" type="text" value="cristianoronaldo#realmadrid.com"/></td>
<td>
DELETE
<input id="obj_client_contact_attributes__id" name="obj_client[contact_attributes][][id]" type="hidden" value="16594"/>
<input class="should_destroy" id="obj_client_contact_attributes__should_destroy" name="obj_client[contact_attributes][][should_destroy]" type="hidden"/>
</td>
</tr>
</table>
</div>
<div class="contact">
<table border="0">
<tr>
<td><select class="position_id" id="obj_client_contact_attributes__position_id" name="obj_client[contact_attributes][][position_id]"><option value="1" selected="selected">INTELIGENT</option><option value="2">OTHER</option></select></td>
<td><input class="should_change_value" id="obj_client_contact_attributes__phone_mail" name="obj_client[contact_attributes][][phone_mail]" type="text" value="ONLY THE INPUT WILL BE test#hotmail.com IF I CLICK ON DELETE"/></td>
<td>
DELETE
<input id="obj_client_contact_attributes__id" name="obj_client[contact_attributes][][id]" type="hidden" value="16594"/>
<input class="should_destroy" id="obj_client_contact_attributes__should_destroy" name="obj_client[contact_attributes][][should_destroy]" type="hidden"/>
</td>
</tr>
</table>
</div>
Here is the application.js file:
function mark_for_destroy_contact(element,should_destroy,should_change_value) {
var element_text = $(element).up('.contact').down('.position_id',0);
element_text.className = 'position_id';
element_text.value = '';
if (should_destroy) {
$(element).next('.should_destroy').value = 1;
}
$(element).up('.contact').hide();
}
I tried this code but only works if I remove the first row.
function mark_for_destroy_contact(element,should_destroy,should_change_value) {
var element_text = $(element).up('.contact').down('.position_id',0);
element_text.className = 'position_id';
element_text.value = '';
$('should_change_value').update("test#hotmail.com");
if (should_destroy) {
$(element).next('.should_destroy').value = 1;
}
$(element).up('.contact').hide();
}
Here is the live example in jsfiddle
Here is the example download on Github but is not replacing the input value correctly
Ok I got it, you want to change the input value when the row is deleted, so do this:
function mark_for_destroy_contact(element,should_destroy,should_change_value) {
var element_text = $(element).up('.contact').down('.position_id',0);
element_text.className = 'position_id';
element_text.value = '';
var element_text2 = $(element).up('.contact').down('.should_change_value',0);
element_text2.className = 'should_change_value';
element_text2.value = 'test#hotmail.com';
if (should_destroy) { $(element).next('.should_destroy').value = 1;}
$(element).up('.contact').hide();
}
input fields are created via jquery depend on user input
If user type Quantity : 5 then i m created 5 input fields
for example if user give Quantity = 3 then this is how the html created dynamically using Jquery
<tr id = "tr_1">
<td><input type="text" name="cont_no1" id="cont_no1" /><td>
<td><input type="text" name="cont_size1" id="cont_size1" /><td>
<td><input type="text" name="cont_type1" id="cont_type1" /><td>
</tr>
<tr id = "tr_2">
<td><input type="text" name="cont_no2" id="cont_no1" /><td>
<td><input type="text" name="cont_size2" id="cont_size2" /><td>
<td><input type="text" name="cont_type2" id="cont_type2" /><td>
</tr>
<tr id = "tr_3">
<td><input type="text" name="cont_no3" id="cont_no3" /><td>
<td><input type="text" name="cont_size3" id="cont_size3" /><td>
<td><input type="text" name="cont_type3" id="cont_type3" /><td>
</tr>
now i need to store all this input fields values in json.
var jsonObj= jsonObj || [];
for(var i=1; i<cont_qty; i++)
{
item = {};
item ["cont_no"] = $('#cont_no'+i).val();
item ["cont_size"] = $('#cont_size'+i).val();
item ["cont_type"] = $('#cont_type'+i).val();
jsonObj.push(item);
}
i tried like this but its not working the please someone help me. ThankYou
for your refrence here is full code, var auto_tr value is aligned here(with enter) for your purpose .
$(document).ready(function(){
$( "#cont_qty" ).change(function()
{
var itemCount = 0;
$("#munna").empty();
var cont_qty = this.value;
for(var i=0 ; cont_qty>i; i++)
{
itemCount++;
// dynamically create rows in the table
var auto_tr = '<tr id="tr'+itemCount+'">
<td>
<input class="input-medium" type="text" id="cont_no'+itemCount+'" name="cont_no'+itemCount+'" value="">
</td>
<td>
<select class="input-mini" name="cont_size'+itemCount+'" id="cont_size'+itemCount+'">
<option>20</option>
<option>40</option>
<option>45</option>
</select>
</td>
<td>
<select class="input-mini" name="cont_type'+itemCount+'" id="cont_type'+itemCount+'">
<option>DV</option>
<option>HD</option>
<option>HC</option>
<option>OT</option>
<option>FR</option>
<option>HT</option>
<option>RF</option>
</select>
</td>
<td>
<select class="input-medium" name="cont_tonnage'+itemCount+'" id="cont_tonnage'+itemCount+'">
<option>24000 Kgs</option>
<option>27000 Kgs</option>
<option>30480 Kgs</option>
<option>Super Heavy Duty</option>
</select>
</td>
<td>
<input class="input-medium" type="text" id="cont_tare'+itemCount+'" name="cont_tare'+itemCount+'" value="">
</td>
<td>
<input class="input-medium" name="cont_netweight'+itemCount+'" id="cont_netweight'+itemCount+'" type="text" value="">
</td>
<td>
<input class="input-mini" name="yom'+itemCount+'" id="yom'+itemCount+'" type="text" value=""></td>
<td>
<select class="input-medium" name="cont_condition'+itemCount+'" id="cont_condition'+itemCount+'">
<option>IICL</option>
<option>ASIS</option>
<option>CARGO WORTHY</option>
</select>
</td>
</tr>';
$("#munna").append(auto_tr);
}
});
$("#getButtonValue").click(function ()
{
var jsonObj= jsonObj || [];
for(var i=1; i<cont_qty.value; i++)
{
item = {};
item ["cont_no"] = $('#cont_no'+i).val();
item ["cont_size"] = $('#cont_size'+i).val();
item ["cont_type"] = $('#cont_type'+i).val();
jsonObj.push(item);
}
alert(jsonObj[0].cont_no[1]);
});
});
did small loop mistake :)
for(var i=1; i<=cont_qty.value; i++)
{
alert(cont_qty.value);
item = {};
item ["cont_no"] = $('#cont_no'+i).val();
item ["cont_size"] = $('#cont_size'+i).val();
item ["cont_type"] = $('#cont_type'+i).val();
jsonObj.push(item);
}
in previous one i<cont_qty.value this one used now just changed as i<=cont_qty.value
so the loop ran 3 times when qty is 4. now just added <=
ThankYou for your answers friends
Make sure you call your function after you created the html via jquery.
createHtml(); // function to create the html
storeValuesToArray(); // Your function to store data to array
Also make sure you properly close your tags <tr></tr>. And put <tr> inside a <table> tag.
And make sure your cont_qty is set to a value
After you created the html and added all the fields necessary, you can catch all elements by using a selector like:
var jsonObj= jsonObj || [];
$('[name^="cont_no"]').each(function(){
var i = this.name.split('cont_no')[1];
var item = {};
item['cont_no'] = $(this).val();
item['cont_size'] = $('[name="cont_size'+i+'"]').val();
item['cont_type'] = $('[name="cont_type'+i+'"]').val();
jsonObj.push(item);
});
So I want to change the select option using javascript but without reloading the page.
I am able to change other element data using document.getElementById.value
but not the select element
This is what I am trying to do: there is a form and a table inside my webpage , the table data is fetched dynamically using php. The form will edit the data. so when the edit button is pressed the row data against it will be automatically filled into the form.
All other elements of the form could fetch the data with my code. except the select option input element.
below is the the code I have used for each element of the form
jsfiddle here:http://jsfiddle.net/ZE6BX/11/
document.getElementById("l_type").value = data[1];
data array contains the values of the row against which edit is pressed!
u can check whether using index value or option value.
var opt = ocument.getElementById('l_type').options;
for(var i=1;i<opt.length;i++){
if(opt[i].value == 'Ve'){
**opt[i].selected = true;** }
}
this will help u.
This works http://jsfiddle.net/ZE6BX/12/
YOu had a difference in case in between VE in the table and Ve as the value in the select.
Here's the code
HTML:
<div id="l-form">
<form method="post" class="DA_custom_form" id="l-form" action="php/add.php">
<h3>Add</h3>
<label>Name</label>
<input type="text" class="field" id="l_name" name="l_name" />
<label>City</label>
<input type="text" class="field" id="l_city" name="l_city" />
<label>Phone</label>
<input type="text" class="field" id="l_phone" name="l_phone" />
<label>OP</label>
<div class="cl"> </div>
<input type="text" class="field" id="l_op" name="l_op" />
<label>Type</label>
<select class="select_field" id="l_type" name="l_type">
<option value=" ">Select type</option>
<option value="cu">Cu</option>
<option value="Ve">Ve</option>
<option value="Ex">Ex</option>
</select>
<div class="cl"> </div>
<div class="btnp">
<input type="submit" value="Save" name="submit" id="submit" />
</div>
</div>
</form>
</br>
</br>
<table id="existing" border=1>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>View/Edit</th>
</tr>
</thead>
<tbody>
<tr style:padding-left:10px;>
<td>sweet_name</td>
<td>Ve</td>
<td style="display:none">dream_city</td>
<td style="display:none">123456</td>
<td style="display:none">SWAG</td>
<td>
<button class="edit_button" value="Edit" name="button">Edit</button>
</td>
</tr>
</tbody>
</table>
JS:
$(document).ready(function () {
var data;
$("#existing").on("click", ".edit_button", function () {
data = $(this).closest("td").siblings().map(function () {
return $(this).text();
}).toArray();
console.log(data[0]); // name
console.log(data[1]); //type
console.log(data[2]); //city
console.log(data[3]); //phone
console.log(data[4]); //op
document.getElementById("l_name").value = data[0];
$("#l_type").value = data[1];
document.getElementById("l_city").value = data[2];
document.getElementById("l_phone").value = data[3];
document.getElementById("l_op").value = data[4];
});
});