Delete table row using parent.removeChild(child) - javascript

I have a table which starts off blank when a user opens the page and has rows added to it by the user. The user searches a DB and the results are echoed to a "Search results" table with the code below.
while ($dbsearch = mysqli_fetch_assoc($run_query))
{
$dbu = $dbsearch['Username'];
$id = $dbsearch['PlayerID'];
$func = "add(" . $id . ", Brad Henry )";
array_push ($_SESSION['players'],$dbsearch['PlayerID']);
echo "<tr><td>".$id ."</td><td>".$dbu."</td><td><input type=\"submit\" id=\"PlayerAdded".$id."\" value=\"Add\" onclick=\"add('".$id."','".$dbu."');\"></input></td></tr>";
}
This is working very well. When the user clicks add, the following function adds the search result to the "Todays event" table:
function add(id,name){
var t = ("</td><td>");
var str = ("<tr id='Players" + id + "'><td>")
var ctr = ("</td></tr>")
var place = ("<select name='place'><option value='17'>17th</option><option value='16'>16th</option><option value='15'>15th</option><option value='14'>14th</option><option value='13'>13th</option><option value='12'>12th</option><option value='11'>11th</option><option value='10'>10th</option><option value='9'>9th</option><option value='8'>8th</option><option value='7'>7th</option><option value='6'>6th</option><option value='5'>5th</option><option value='4'>4th</option><option value='3'>3rd</option><option value='2'>2nd</option><option value='1'>1st</option></select>")
var points = ("<input name='points' placeholder='50'></input>");
var cash = ("$<input name='cash' placeholder='0'></input>");
var ticket = ("<select name='ticket'><option value='No'>No</option><option value='Yes'>Yes</option>");
var del = ("<input type='submit' value='Delete' onclick='remove(" + id + ")'> </input>")
$('#PlayerAdded').before(str+ id + t + name + t + place + t + points + t + cash + t + ticket + t + del + ctr);
}
My issue is that nothing happens when the Delete button (see var del) is clicked. var del calls the "Remove" function which is pasted below. I'm not sure where the error is and I have been searching online for an answer, but to no avail. I wonder if I am declaring var child incorrectly as it looks for an elementID with both a string and int...
function remove(RowID) {
var parent = document.getElementById("resultTable");
var child = document.getElementById("Players" + RowID);
parent.removeChild(child);
}

Your code produces invalid HTML markup. Remove items marked ** and add items marked ++. I've used the value 10 to be the id within your code.
<table>
<tr id='Players10'>
<td>10</td>
<td></td>
<td><select name='place'>
<option value='17'>17th</option>
<option value='16'>16th</option>
<option value='15'>15th</option>
<option value='14'>14th</option>
<option value='13'>13th</option>
<option value='12'>12th</option>
<option value='11'>11th</option>
<option value='10'>10th</option>
<option value='9'>9th</option>
<option value='8'>8th</option>
<option value='7'>7th</option>
<option value='6'>6th</option>
<option value='5'>5th</option>
<option value='4'>4th</option>
<option value='3'>3rd</option>
<option value='2'>2nd</option>
<option value='1'>1st</option>
</select></td>
<td><input name='points' placeholder='50'>
**</input>**</td>
<td>$
<input name='cash' placeholder='0'>
**</input>**</td>
<td>
<select name='ticket'>
<option value='No'>No</option>
<option value='Yes'>Yes</option>
++</select>++
</td>
<td>
<input type='submit' value='Delete' onclick='remove(10)'>
**</input>**
</td>
</tr>
</table>
Then test your code again.

Related

set selected value for dropdown in table using Jquery

I'm adding a table row using jquery wit dropdownlist in it as follows -
$.each(data, function (i, item) {
$('#tableRM > tbody:last-child').append('<tr sn=' + item.SN + '>
<td>
<select name="RMLotName" class="form-control lotColumns">
<option value="">Select</option>
<option value="Lot1">Lot1</option>
<option value="Lot2">Lot2</option>
<option value="Lot3">Lot3</option>
</select>
</td>
<td><input name="RMLotQty" type="text" disabled class="form-control lotColumns" value="' + item.LotQty + '" /></td>
</tr>)
}
Now I want to select the default value for dropdownlist with Name = #RMLotName
I tried :-
$('#RMLotName').val("'" + item.LotName+"'");
and
$("#RMLotName option[value='" + item.LotName+"']").attr('selected', 'selected');
but it's not working. I've searched for a while and found some links like This This and others but none of them are working.
Consider creating a jQuery object out of the row html before appending that object.
It allows you to use jQuery methods on that specific row. Then you need a better selector for the <select>
$.each(data, function (i, item) {
let rowHtml = `<tr sn="${item.SN}"><td>
<select name="RMLotName" class="form-control lotColumns">
<option value="">Select</option>
<option value="Lot1">Lot1</option>
<option value="Lot2">Lot2</option>
<option value="Lot3">Lot3</option>
</select>
</td>
<td><input name="RMLotQty" type="text" disabled class="form-control lotColumns" value="${item.LotQty}" /></td>
</tr>`;
// create object from html string
let $row = $(rowHtml)
// set value of the select within this row instance
$row.find('select.lotColumns').val(item.LotName);
// append updated object to DOM
$('#tableRM > tbody:last-child').append($row);
});

PHP post with dynamic entries created in JS

I have a button that allows the user to add another row to add different types of returned equipment. I am posting this data to another page to print out. If I try and retrieve the data from the post array, I can only get the last in the entry
I've tried setting the name to name="device[]" then adding a value of "key" but since I'm using a drop down select, I can't do that.
<select name="device-type[]">
<option value="" disabled selected hidden>Select Equipment Type</option>
<option value="dvr">DVR</option>
<option value="modem">Modem</option>
<option value="router">Router</option>
<option value="other">Other</option>
</select>
I have a button that calls a JS function to just add another select element identical to that.
JS code:
function addBox(){
$("#devices").append('<select name="device-type" class="focus:outline-none plain-field">\n' +
' <option>Select Equipment Type</option>\n' +
' <option value="dvr">DVR</option>\n' +
' <option value="modem">Modem</option>\n' +
' <option value="router">Router</option>\n' +
' <option value="other">Other</option>\n' +
' </select>\n' +
' <input class="focus:outline-none plain-field" name="device-number" type="text" placeholder="CMAC/SN">\n' +
' <input type="checkbox" name="power-cord" class="">Power Cord?\n' +
' <input type="checkbox" name="remote" class="">Remote?\n' +
' <br>');
return false;
PHP to retrieve the information from that:
<p><?php echo $_POST['device-type']?></p>
<p><?php echo $_POST['device-number']?></p>
My question is, how can I retrieve the device type and number in the post array?
Simply make your HTML select tag accept multiple values. E.g:
<select name="device_type[]" class="focus:outline-none plain-field" multiple>
....
</select>
You can get the selected values on the PHP end using $_POST['device_type']
Refer to store multiple select option into a PHP array for more information
It looks like you need to add [] brackets to your field names to make them a multi array for $_POST to handle processing. Also, if you want to identify each row by an index, on clicking the ADD button, you can count the amount of select boxes generated to create a count and use that as the key index for each array. If you run the following below in a PHP file, click the ADD button to add some select boxes, and then click SUBMIT, you will see your data echo'd out as a multi-dimensional array. I also gave your initial select box an index of 0 for the multi array.
<?php
if(isset($_POST) && !empty($_POST)) {
echo "<pre>";
print_r($_POST);
foreach($_POST['device-type'] as $key => $type) {
echo "<b>Type:</b> " . $type . " ";
echo (isset($_POST['device-number']) && isset($_POST['device-number'][$key]) && !empty($_POST['device-number'][$key])) ? "<b>Number:</b> " .$_POST['device-number'][$key] . " " : "";
echo (isset($_POST['power-cord']) && isset($_POST['power-cord'][$key]) && !empty($_POST['power-cord'][$key])) ? "<b>Power Cord:</b> " .$_POST['power-cord'][$key] . " " : "";
echo (isset($_POST['remote']) && isset($_POST['remote'][$key]) && !empty($_POST['remote'][$key])) ? "<b>Remote:</b> " .$_POST['remote'][$key] . " " : "";
echo "<br/>";
}
echo "</pre>";
}
?>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
function addBox() {
//console.log($('select.plain-field').length + 1);
var rowCount = $('select.plain-field').length + 1;
$("#devices").append('<br/><select name="device-type[' + rowCount + ']" class="focus:outline-none plain-field">\n' +
' <option value="">Select Equipment Type</option>\n' +
' <option value="dvr">DVR</option>\n' +
' <option value="modem">Modem</option>\n' +
' <option value="router">Router</option>\n' +
' <option value="other">Other</option>\n' +
' </select>\n' +
' <input class="focus:outline-none plain-field" name="device-number[' + rowCount + ']" type="text" placeholder="CMAC/SN">\n' +
' <input type="checkbox" name="power-cord[' + rowCount + ']" class="">Power Cord?\n' +
' <input type="checkbox" name="remote[' + rowCount + ']" class="">Remote?\n' +
' ');
return false;
}
</script>
<form action="" method="post">
<div id="devices">
<select name="device-type[0]">
<option value="">Select Equipment Type</option>
<option value="dvr">DVR</option>
<option value="modem">Modem</option>
<option value="router">Router</option>
<option value="other">Other</option>
</select>
</div>
<input type="button" onclick="addBox();" value="Add [+]" />
<br/>
<br/>
<input type="submit" value="Submit" />
</form>

Making text input invisible but tangible

I am working on a country dropdown filter for a search. This will allow users to search within the selected region.
Select 'Thailand' from the dropdown, 'Thailand + ' will be pushed to the search box which allows user to enter another keyword (e.g. Food) which forms into
'Thailand + Food'.
Due to technical constraints this is my only workaround creating a search filter. I am wondering can i make the selected region text invisible (Thailand +) yet when i press enter.. 'Thailand +' is part of the search results.
What i want to achieve:
User selects 'Thailand'
Thailand +' is pushed to textbox (Not visible to user)**
User types 'Food' in the search box
Both 'Thailand + Food' is in the search result
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="testfloat">
<select id="quantity">
<option selected>Select Libraries</option>
<option value="Albanian + ">Albanian</option>
<option value="Singapore + ">Singapore</option>
<option value="Malaysia + ">Malaysia</option>
<option value="Germany + ">Germany</option>
<option value="France + ">France</option>
<option value="Thailand + ">Thailand</option>
</select>
<script type="text/javascript">
$('#quantity').change(function(){
var qty = $('#quantity').val();
var total = qty;
$("#ms-helperText").val(total);
});
</script>
<input type="text" id="ms-helperText">
Instead of putting the selected country in the input, store it in a variable and change it accordingly.
This is how should be your code:
var searchedCountry = "";
$('#quantity').change(function() {
searchedCountry = $('#quantity').val();
$("#preview").html(searchedCountry + " " + $('#ms-helperText').val());
});
$('#ms-helperText').keyup(function() {
$("#preview").html(searchedCountry + " " + $(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="testfloat">
<select id="quantity">
<option selected>Select Libraries</option>
<option value="Albanian + ">Albanian</option>
<option value="Singapore + ">Singapore</option>
<option value="Malaysia + ">Malaysia</option>
<option value="Germany + ">Germany</option>
<option value="France + ">France</option>
<option value="Thailand + ">Thailand</option>
</select>
<input type="text" id="ms-helperText">
<br/>
<div id="preview">
</div>
you could try to attach that value into a hidden input in html
<input type="hidden" id="somehiddenvalue"></input>
Concat both values into a hidden form element:
// Get all needed input elements
const $country = document.querySelector( '#country' );
const $quantity = document.querySelector( '#quantity' );
const $msHelperText = document.querySelector( '#ms-helperText' );
// Event handler
function inputChange() {
const collection = [];
$country.value && collection.push( $country.value );
$quantity.value && collection.push( $quantity.value );
// Only add + if both inputs have a value.
$msHelperText.value = collection.join( ' + ' );
console.log( 'Hidden element value: ', $msHelperText.value );
}
$country.addEventListener( 'input', inputChange );
$quantity.addEventListener( 'input', inputChange );
<select id="country">
<option value="" selected>Select Libraries</option>
<option value="Albanian">Albanian</option>
<option value="Singapore">Singapore</option>
<option value="Malaysia">Malaysia</option>
<option value="Germany">Germany</option>
<option value="France">France</option>
<option value="Thailand">Thailand</option>
</select>
<input type="text" id="quantity">
<!-- the new hidden form element, that will hold both values -->
<input type="hidden" id="ms-helperText">

Returning multiple json objects with one php function

I am trying to populate two dropdown menu whose value is dependent with other one. In total I have 3 dropdowns. one for selecting a class and other two for selecting the subjects and exams of selected class.
I can populate one drop down menu (say for eg: select subject). but how can i populate both of them. My code is as follows:
<table>
<tr>
<td> select class</td>
</tr>
<tr>
<td> select subject</td>
</tr>
<tr>
<td> select exam</td>
</tr>
<tr>
<td><select class="form-control m-bot15" name="class_id" value='' onchange="myFunction(this)" style="float:left;" id="carId">
<option value="">select a class</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select></td>
</tr>
<tr>
<td><select class="form-control m-bot15" name="subject_id" value='' style="float:left;" id="emptyDropdown">
<option value="">select a subject</option>
</select></td>
<tr>
</tr>
<td><select class="form-control m-bot15" name="exam_id" value='' style="float:left;" id="emptyDropdown2">
<option value="">select a subject</option>
</select></td>
</tr>
</table>
This is my view function My script for populating subject name is :
<script>
function myFunction(obj)
{
$('#emptyDropdown').empty()
var dropDown = document.getElementById("carId");
var carId = dropDown.options[dropDown.selectedIndex].value;
$.ajax({
type: "POST",
dataType: 'json',
url: "<?php echo base_url();?>mark/newdrp",
data: { 'carId': carId },
success: function(data){
$.each(data, function () {
$('#emptyDropdown').append('<option value='+this.subject_id+'>' + this.name + '</option>');
});
}
});
}
</script>
My controller function newdrp is
public function newdrp(){
$classId = $this->input->post('carId');
$subjects = $this->subject_model->Subjectbyclassid($classId);
echo json_encode($exams);
}
This works fine. Iam getting the subjects list in my dropdown. But i want to pass one more json object like this
public function newdrp(){
$classId = $this->input->post('carId');
$subjects = $this->subject_model->Subjectbyclassid($classId);
$exams = $this->exam_model->Exambyclassid($classId);
echo json_encode(array($subjects,$exams));
}
This is my console preview
[[{"subject_id":"1","name":"Physics","class_id":"1","teacher_id":null},{"subject_id":"2","name":"Chemistry","class_id":"1","teacher_id":null},{"subject_id":"3","name":"Mathematics","class_id":"1","teacher_id":null}],[{"exam_id":"22","name":"BW9","date":"03\/10\/16","class_id":"1","comment":""},{"exam_id":"26","name":"BW10","date":"17\/10\/16","class_id":"1","comment":""},{"exam_id":"30","name":"BW11","date":"31\/10\/16","class_id":"1","comment":""},{"exam_id":"34","name":"BW12","date":"14\/11\/16","class_id":"1","comment":""},{"exam_id":"40","name":"BW13","date":"28\/11\/16","class_id":"1","comment":""},{"exam_id":"45","name":"BW14","date":"11\/12\/16","class_id":"1","comment":""},{"exam_id":"46","name":"Revision Exam 1","date":"02\/01\/17","class_id":"1","comment":""},{"exam_id":"49","name":"Revision Exam 2","date":"8\/01\/2017","class_id":"1","comment":""},{"exam_id":"51","name":"Revision Exam 3","date":"15\/01\/17","class_id":"1","comment":""},{"exam_id":"55","name":"Revision Exam 4","date":"22\/01\/17","class_id":"1","comment":""},{"exam_id":"57","name":"Revision exam 5","date":"26\/01\/2017","class_id":"1","comment":""},{"exam_id":"59","name":"Revision Exam 6","date":"29\/01\/17","class_id":"1","comment":""}]]
How can i loop through this an display the exam name in corresponding dropdown. Please help
You'll have to loop through the second array as well, data being the parent array
success: function(data){
var examArr = data[1];
$.each(examArr, function () {
$('#emptyDropdown2').append("<option value='" + $(this).exam_id + "'>" + $(this).name + "</option>");
});
}

Skip last Html row text box value and select on print

I am trying to create a query which inserts the data in to Mobile sqlite data base say for now i have three rows in a html table on button press a query is generated where it selects the value of the text box and the select selected value but the problem is on print it should skip the last rows value as in my case that is a auto increment table where a last row is left blank to fill in the data for the user.
Now
INSERT INTO demo (xxxx, xxxxx, xxxx,xxxx,xxxx) VALUES ("Mickey1","Mouse1","No Match"),("Mickey2","Mouse2","No Match"),("skip row","skip row","No Match");
Expected
INSERT INTO demo (xxxx, xxxxx, xxxx,xxxx,xxxx) VALUES ("Mickey1","Mouse1","No Match"),("Mickey2","Mouse2","No Match");
Demo Jsfiddle
JS
function Get() {
var html = '';
var arr = [];
$('tr').each(function() {
var inputs = $('input', this);
var selects = $('select :selected', this);
arr.push('("' + inputs[0].value + '","' + inputs[1].value + '","' + selects[0].text + '")');
});
html = 'INSERT INTO demo (xxxx, xxxxx, xxxx,xxxx,xxxx) VALUES ' + arr.join(',') + ';';
$('#data').html(html);
}
HTML
<form id="Form" onsubmit="return false;">
<table>
<tr>
<td>First name:
<input type="text" name="FirstName" value="Mickey1">
</td>
<td>Last name:
<input type="text" name="Lastname" value="Mouse1">
</td>
<td>Last name:
<select name="select2">
<option>No Match</option>
<option value="1">Test</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
</select>
</td>
</tr>
<tr>
<td>First name:
<input type="text" name="FirstName" value="Mickey2">
</td>
<td>Last name:
<input type="text" name="Lastname" value="Mouse2">
</td>
</td>
<td>Last name:
<select name="select2">
<option>No Match</option>
<option value="1">Test</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
</select>
</td>
</tr>
<tr>
<td>skip row
<input type="text" name="FirstName" value="skip row">
</td>
<td>skip row
<input type="text" name="Lastname" value="skip row">
</td>
</td>
<td>skip row
<select name="select2">
<option>No Match</option>
<option value="1">Test</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
</select>
</td>
</tr>
</table>
</form>
<input type="submit" name="Submit" onclick="Get();" />
<div id="data"></div>
If you add the index parameter to the each function you can edit your code to only display specific lines.
$('tr').each(function(index, me) {
if(index < $('tr').length - 1) {
var inputs = $('input', me);
var selects = $('select :selected', me);
arr.push('("' + inputs[0].value + '","' + inputs[1].value + '","' + selects[0].text + '")');
}
});
Also in each functions I believe this is not recommended. Adding the second argument to the function should act like this for the individual row (as I've have used me).
Here is a forked version of your Fiddle - https://jsfiddle.net/szkp0Lwq/1/
Edit
As per your comment below -
If you first want to validate your inputs you can do something like -
var valid = true;
$('tr').each(function(index, me) {
if(index < $('tr').length - 1 && valid) {
var inputs = $('input', me);
inputs.each(function(index, me) {
if($(me).val().length == 0)
valid = false;
});
var selects = $('select', me);
selects.each(function(index, me) {
if($(me)[0].selectedIndex == 0)
valid = false;
});
if(valid)
arr.push('("' + inputs[0].value + '","' + inputs[1].value + '","' + $(selects[0]).val() + '")');
}
});
if(valid)
..... submit query
else
alert("Form isn't valid!");
Fiddle - https://jsfiddle.net/o4b1rLns/2/
You could skip the row when you build the array, or only add the ones that doesnt have the "skip row" value, as below:
$('tr').each(function() {
var inputs = $('input', this);
var selects = $('select :selected', this);
if (inputs[0].value != "skip row") {
arr.push('("' + inputs[0].value + '","' + inputs[1].value + '","' + selects[0].text + '")');
}
});

Categories