JavaScript - How To Delete A Table Record In Js?
Greetings:
On the click of a button, how would I delete a certain record in a database table, w/o refreshing the page? I am new to JS and don't even know where to start. Thanks in advance. Similar Tutorials-Please delete- will make another thread with simpler explanation. Hello all i have to implement simple LIFO algorithm ( if i can call it like this .. ) say i have html table and and i fetching data i like thet the last data that fetched to be the first record in the table for example : im fetching the string "111" so it will be the first record next im fetching the string "222" now the string "111" will be the second and the string "222" will be the first .. and so on I have a table that has a series of dropdowns. Each dropdown is build with JavaScript based on the values of the prior dropdowns. The data for each of these dropdowns comes from a series of XML files which are loaded into a series of arrays on loading. This is all working. What I need (but can't figure out) is how to dynamically build a sub-table within a specific cell of the parent table based on the values of the prior dropdowns and if the prior dropdowns are changed, how do delete (not just hide) the dynamic table and rebuild it based on the values of the new dropdowns. Hi All, I am working on a script that creates a table, taking the data from a number of text fields and populating the table cells with it. Originally I had to start with an existing table containing one blank row but I was able to get the script to create the table dynamically. Unfortunately I seem to have broken my delete row function (this was working fine when the script started with an existing table). The error I am getting is: TypeError: 'cells.0.childNodes' is null or not an object I googled this but could not find anything to help. I don't have alot of javascript experience and need help from the experts. Thanks in advance for all your help guys! Kind regards, Ken Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script> </style> <link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" /> </head> <SCRIPT language="javascript"> function addRow(tableID) { if (!document.getElementById(tableID)) { //alert("the table does not exist"); var body = document.getElementsByTagName("body")[0]; // creates a <table> element and a <tbody> element var tbl = document.createElement("table"); var tblBody = document.createElement("tbody"); var newRow = document.createElement("tr"); // add the row to the end of the table body tblBody.appendChild(newRow); // put the <tbody> in the <table> tbl.appendChild(tblBody); // appends <table> into <body> body.appendChild(tbl); // sets the id of "dataTable" and border attribute of tbl to 0; tbl.setAttribute("id", "dataTable"); tbl.setAttribute("border", "0"); } var StartTime = document.getElementById('StartTime'); var EndTime = document.getElementById('EndTime'); var MaterialID = document.getElementById('MaterialID'); var Title = document.getElementById('Title'); var table = document.getElementById(tableID); var rowCount = table.rows.length; var row = table.insertRow(rowCount); var cell1 = row.insertCell(0); var element1 = document.createElement("input"); element1.type = "checkbox"; cell1.appendChild(element1); var cell2 = row.insertCell(1); var element2 = document.createElement("input"); element2.type = "text"; element2.setAttribute("name","StartTime[]"); element2.value = StartTime.value; cell2.appendChild(element2); StartTime.value=""; var cell3 = row.insertCell(2); var element3 = document.createElement("input"); element3.type = "text"; element3.setAttribute("name","EndTime[]"); element3.value = EndTime.value; cell3.appendChild(element3); EndTime.value=""; var cell4 = row.insertCell(3); var element4 = document.createElement("input"); element4.type = "text"; element4.setAttribute("name","MaterialID[]"); element4.value = MaterialID.value; cell4.appendChild(element4); MaterialID.value=""; var cell5 = row.insertCell(4); var element5 = document.createElement("input"); element5.type = "text"; element5.setAttribute("name","Title[]"); element5.value = Title.value; cell5.appendChild(element5); Title.value=""; } function deleteRow(tableID) { if (document.getElementById(tableID)) { //alert("the table exists"); try { var table = document.getElementById(tableID); var rowCount = table.rows.length; for(var i=0; i<rowCount; i++) { var row = table.rows[i]; var chkbox = row.cells[0].childNodes[0]; if(null != chkbox && true == chkbox.checked) { table.deleteRow(i); rowCount--; i--; } } }catch(e) { alert(e); } } } </SCRIPT> <body> <span id="spryStartTime"> <label for="StartTime">Start Time:</label><br /> <input name="StartTime" type="text" id="StartTime" tabindex="1" size="10" maxlength="8" /> <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span><br /> <label for="EndTime">End Time:</label><br /> <span id="spryEndTime"> <input name="EndTime" type="text" id="EndTime" tabindex="2" size="10" maxlength="8" /> <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span><br /> <label for="MaterialID">Material ID:</label><br /> <span id="spryMaterialID"> <input name="MaterialID" type="text" id="MaterialID" tabindex="3" size="10" maxlength="10" /> <span class="textfieldRequiredMsg">A value is required.</span></span><br /> <label for="Title">Title:</label><br /> <span id="spryTitle"> <input name="Title" type="text" id="Title" tabindex="4" size="50" maxlength="50" /> <span class="textfieldRequiredMsg">A value is required.</span></span><br /> <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" /> <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" /> <script type="text/javascript" /> var sprytextfield3 = new Spry.Widget.ValidationTextField("spryStartTime", "time", {validateOn:["blur"], format:"HH:mm:ss", useCharacterMasking:true}); var sprytextfield4 = new Spry.Widget.ValidationTextField("spryEndTime", "time", {format:"HH:mm:ss", useCharacterMasking:true, validateOn:["blur"]}); var sprytextfield5 = new Spry.Widget.ValidationTextField("spryMaterialID", "none", {validateOn:["blur"]}); var sprytextfield6 = new Spry.Widget.ValidationTextField("spryTitle", "none", {validateOn:["blur"]}); </script> </body> </html> I'm new to Javascript and having some issues, so I'll aplogize right off for what I know is likely a very simple problem. I have a script where I'm 1) reading in a text file 2)remove multiple spaces between values in the file, 3) load these values into an array 4) format a table from this array. The script returns the following error which I can't seem to resolve: (12, 8) Microsoft JScript runtime error: Object doesn't support this property or method Code: var ForReading = 1 strHostname="XX.XX.XX.XX"; objFSO = new ActiveXObject("Scripting.FileSystemObject") objTextFile = objFSO.OpenTextFile ("E:\Integrity.txt", ForReading) strDelTab = "<table border='1'><tr><td style='background-color:#c5d1db; text-align:center'>Server</td><td style='background-color:#c5d1db; text-align:center'>User</td><td style='background-color:#c5d1db; text-align:center'>Group</td><td style='background-color:#c5d1db; text-align:center'>User</td></tr>"; while (!objTextFile.eof) { strDeletes = objTextFile.readln(); strDeletes = Replace(strDeletes, " "/g, " "); arrDeletes = Split(strDeletes, " "); strDelTab += "<tr><td>" + arrDeletes[0] + "</td>" ; strDelTab += "<td>" + arrDeletes[1] + "</td>"; strDelTab += "<td>" + arrDeletes[2] + "</td></tr>"; } strDelTab += "</table>"; objTextFile.close(); Wscript.Echo (strDelTab); Any assistance would be appreciated. Thanks So I have been stuck for a couple days now on this problem. I am trying to create a form to edit existing data in my database. I have 2 drop down boxes( category then item) they do not work correctly. I am using php to populate the drop down boxes but there is nothing dynamic about doing this. I think I need to totally rewrite the page using java script or Ajax but I don't know what parts. So I want the user to select a category from a drop down list populated by database then have it populate the item list(so I think both of these need to be java script in case they change the category it will re populate the item list). Then I just want the selection of the item to pull the information to my form so they can update it and save the update(which I am pretty sure I can save the update as a php function but need to populate the item editable information in java script). I am really looking for help on how to setup the page with java script to make database queries and use the results to update parts of the page. In case you confused here is my flow: page loads -User selects catagory query database for item list (on change event it think) -User selects item Item information is pulled and displayed from database(cost, serial number, quantity) (another on change event) -User is able to edit information and save updated results(run an update.php...) Here is a quick rundown of my code: ----I want this query to select the item based on the selected category (itemcat) <? $result = mysql_query("SELECT itemnum, itemname FROM item where itemcat = 'Item1' ", $con); //yes this is hard coded right now mysql_close($con); ?> ----end of head start of body---- ---This category list is hard coded since the categories will almost never change--- <td>Select Item</td> <td width="142"><select name="itemcatsearch" size="1"> <option value="1" selected="selected">Item1</option> <option value="2">Item2</option> <option value="3">Item3</option> <option value="4" >Item4</option> <option value="5">Item5</option> <option value="6">Item6</option> <option value="6">Item7</option> </select></td> <td width="268"> <!-- Dynamic item list -- this is just the result of the query run at the top and placed into a second drop down box> <select name="itemcat" size="1"> <? while($row = mysql_fetch_array($result)){ ?> <option value="<? echo $row['itemnum']?>" > <? echo $row['itemname']?> </option> <? } ?> I know its ugly sorry I am a noob. Any help or direction would be greatly appreciated. Hi guys, so far any values recorded in my database are shown on the map: http://www.vfrflight.co.uk/new2/phpsqlajax_map_v3.html Code: <!DOCTYPE html > <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>PHP/MySQL & Google Maps Example</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> //<![CDATA[ var customIcons = { restaurant: { icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png', shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' }, bar: { icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png', shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' } }; function load() { var map = new google.maps.Map(document.getElementById("map"), { center: new google.maps.LatLng(47.6145, -122.3418), zoom: 13, mapTypeId: 'roadmap' }); var infoWindow = new google.maps.InfoWindow; // Change this depending on the name of your PHP file downloadUrl("phpsqlajax_genxml.php", function(data) { var xml = data.responseXML; var markers = xml.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var name = markers[i].getAttribute("name"); var address = markers[i].getAttribute("address"); var type = markers[i].getAttribute("type"); var point = new google.maps.LatLng( parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng"))); var html = "<b>" + name + "</b> <br/>" + address; var icon = customIcons[type] || {}; var marker = new google.maps.Marker({ map: map, position: point, icon: icon.icon, shadow: icon.shadow }); bindInfoWindow(marker, map, infoWindow, html); } }); } function bindInfoWindow(marker, map, infoWindow, html) { google.maps.event.addListener(marker, 'click', function() { infoWindow.setContent(html); infoWindow.open(map, marker); }); } function downloadUrl(url, callback) { var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest; request.onreadystatechange = function() { if (request.readyState == 4) { request.onreadystatechange = doNothing; callback(request, request.status); } }; request.open('GET', url, true); request.send(null); } function doNothing() {} //]]> </script> </head> <body onload="load()"> <div id="map" style="width: 500px; height: 300px"></div> </body> </html> However, how do i let people place markers when a button is pressed. I believe this is the code to place markers when left click occurs: Code: <!DOCTYPE html > <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>Google Maps JavaScript API v3 Example: Map Simple</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var marker; var infowindow; function initialize() { var latlng = new google.maps.LatLng(37.4419, -122.1419); var options = { zoom: 13, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("map_canvas"), options); var html = "<table>" + "<tr><td>Name:</td> <td><input type='text' id='name'/> </td> </tr>" + "<tr><td>Address:</td> <td><input type='text' id='address'/></td> </tr>" + "<tr><td>Type:</td> <td><select id='type'>" + "<option value='bar' SELECTED>bar</option>" + "<option value='restaurant'>restaurant</option>" + "</select> </td></tr>" + "<tr><td></td><td><input type='button' value='Save & Close' onclick='saveData()'/></td></tr>"; infowindow = new google.maps.InfoWindow({ content: html }); google.maps.event.addListener(map, "click", function(event) { marker = new google.maps.Marker({ position: event.latLng, map: map }); google.maps.event.addListener(marker, "click", function() { infowindow.open(map, marker); }); }); } function saveData() { var name = escape(document.getElementById("name").value); var address = escape(document.getElementById("address").value); var type = document.getElementById("type").value; var latlng = marker.getPosition(); var url = "phpsqlinfo_addrow.php?name=" + name + "&address=" + address + "&type=" + type + "&lat=" + latlng.lat() + "&lng=" + latlng.lng(); downloadUrl(url, function(data, responseCode) { if (responseCode == 200 && data.length <= 1) { infowindow.close(); document.getElementById("message").innerHTML = "Location added."; } }); } function downloadUrl(url, callback) { var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest; request.onreadystatechange = function() { if (request.readyState == 4) { request.onreadystatechange = doNothing; callback(request.responseText, request.status); } }; request.open('GET', url, true); request.send(null); } function doNothing() {} </script> </head> <body style="margin:0px; padding:0px;" onload="initialize()"> <div id="map_canvas" style="width: 500px; height: 300px"></div> <div id="message"></div> </body> </html> Help would be appreicated very much! I cannot combine the codes to save my life... Hi, here's the code Code: <div class="artworkdelete"> <a href="javascript:void(0);" id="del_<?=$artworkDetails['artwork_id'] ?>_<?=$temp_cat_id; ?>" onclick="deleteThisArtWork(this.id)">Delete</a> </div> that's actually a "Delete" link , when I click it, there's a some sort of loading animation like stuff , similar to the thing that appears when one clicks the edit button of a thread here in this forum..then and it deletes the data and doesn't need to refresh the page, i guess it is ajax.....it's not my code.. now I was asked to alter it and use a pop up box to ask the clicker "Yes" or "No" before deleting the data , what or how to change that code snippet i pasted above ? Delete this post. Thank you
The js line... delete new Obj(); brings my script to a halt in IE7. the error in the MS-VWD debugger is... "Cannot delete 'new rect()". The same line seems to work fine in FF. If I change the code to... var o = new Obj(); delete o; - all works fine in IE. Can someone explain why this occurs? btw... the actual code is something like... delete new rect().getElem(elem).hcenterInRect(parRect).setElem(elem); so there's a bunch of processing between the new and deleting of the object ("rect"). this is obviously not a big problem but i was just curious as to how IE was interpretting this line. thanks to any of you javascript wizards that may have a clue. Hi all! I created a form where users are allowed to delete a specific row of data by clicking the "cancel" button from the drop down menu. However, I have a problem deleting my data using the javascript. Apparently, I only able to delete the first row of the data but not for the rest! The following is the code i have: PHP Code: <html> <body style="background-color:#E0FFFF;"> <script language="javascript" > <!-- hide function submitRequest(val) { document.forms[0].submit(); } // end hide --> </script> <?php $con = mysql_connect("localhost","root",""); if (!$con) { die('Could not connect: ' . mysql_error()); } mysql_select_db("my_course", $con); $result = mysql_query("SELECT * FROM Courses ORDER BY Year, Sem, CourseCode"); $result1 = mysql_query("SELECT * FROM Courses ORDER BY Year, Sem, CourseCode"); echo "<table border='1' cellpadding='2' cellspacing='0'> <tr> <th>CourseCode</th> <th>CourseName</th> <th>Year</th> <th>Sem</th> <th>Grade</th> <th>Option</th> </tr>"; ?> <?php while($row = mysql_fetch_array($result)) { echo "<tr>"; echo "<td>" . $row['CourseCode'] . "</td>"; echo "<td>" . $row['CourseName'] . "</td>"; echo "<td>" . $row['Year'] . "</td>"; echo "<td>" . $row['Sem'] . "</td>"; echo "<td>" . $row['Grade'] . "</td>"; echo "<td>"; ?> <?php ?> <form name="form1" action="submitDelete.php" method="post"> <select name="cancel" onchange="submitRequest(this.value);"> <option value=> </option> <option value="<?php echo $row['CourseName'];?>">Cancel</option> </select> </form> <?php echo "</td>"; echo "</tr>"; } echo "</table>"; mysql_close($con); ?> <br/> <br/> </body> </html> Thanks in advance! I am trying to delete or hide better to say advertisment on Forumotion forum. http://testforum-lolz.serbianforum.info/ When you use firebug to inspect you can find this: Code: html body .w74704f, html body .w74704f iframe, html body iframe[name="google_ads_frame"], html body .w74704f iframe[name="google_ads_frame"], html body #wrap #page-body div.w74704f, html body #page-body .w74704f { bottom: inherit !important; display: block !important; float: none !important; left: inherit !important; margin: 0 auto !important; opacity: 1 !important; padding: inherit !important; position: inherit !important; right: inherit !important; text-align: center !important; top: inherit !important; visibility: visible !important; z-index: 9999 !important; } html body .w74704f, html body .w74704f iframe[name="google_ads_frame"] { height: 90px !important; min-height: 90px !important; width: 728px !important; } html body .w74704f iframe { border: 0 none !important; } html body iframe[name="google_ads_frame"] { height: inherit !important; min-height: inherit !important; width: 100% !important; } When i type display:none; in every single code so I can hide it it doesent work. I dont know can there be any javascript for it. Maybe this can help: Hello, I have something like this: Code: function asd() { var timeout = setInterval('alert(\'asd\')', 3000); } function asd2() { // with this function I want to remove the interval of 3 seconds for variable timeout. } I have variable timeout and with the second function asd2() I want to remove this variable. IS THIS THE CORRECT CODE ??????????? <?php $host="localhost"; // Host name $username=""; // Mysql username $password=""; // Mysql password $db_name="test"; // Database name $tbl_name="test_mysql"; // Table name // Connect to server and select databse. mysql_connect("$host", "$username", "$password")or die("cannot connect"); mysql_select_db("$db_name")or die("cannot select DB"); $sql="SELECT * FROM $tbl_name"; $result=mysql_query($sql); $count=mysql_num_rows($result); ?> <table width="400" border="0" cellspacing="1" cellpadding="0"> <tr> <td><form name="form1" method="post" action=""> <table width="400" border="0" cellpadding="3" cellspacing="1" bgcolor="#CCCCCC"> <tr> <td bgcolor="#FFFFFF"> </td> <td colspan="4" bgcolor="#FFFFFF"><strong>Delete multiple rows in mysql</strong> </td> </tr> <tr> <td align="center" bgcolor="#FFFFFF">#</td> <td align="center" bgcolor="#FFFFFF"><strong>Id</strong></td> <td align="center" bgcolor="#FFFFFF"><strong>Name</strong></td> <td align="center" bgcolor="#FFFFFF"><strong>Lastname</strong></td> <td align="center" bgcolor="#FFFFFF"><strong>Email</strong></td> </tr> <?php while($rows=mysql_fetch_array($result)){ ?> <tr> <td align="center" bgcolor="#FFFFFF"><input name="checkbox[]" type="checkbox" id="checkbox[]" value="<? echo $rows['id']; ?>"></td> <td bgcolor="#FFFFFF"><? echo $rows['id']; ?></td> <td bgcolor="#FFFFFF"><? echo $rows['name']; ?></td> <td bgcolor="#FFFFFF"><? echo $rows['lastname']; ?></td> <td bgcolor="#FFFFFF"><? echo $rows['email']; ?></td> </tr> <?php } ?> <tr> <td colspan="5" align="center" bgcolor="#FFFFFF"><input name="delete" type="submit" id="delete" value="Delete"></td> </tr> <? // Check if delete button active, start this if($delete){ for($i=0;$i<$count;$i++){ $del_id = $checkbox[$i]; $sql = "DELETE FROM $tbl_name WHERE id='$del_id'"; $result = mysql_query($sql); } // if successful redirect to delete_multiple.php if($result){ echo "<meta http-equiv=\"refresh\" content=\"0;URL=delete_multiple.php\">"; } } mysql_close(); ?> </table> </form> </td> </tr> </table> This function is part of a page that will delete a product that a customer has selected. The question I have is what is the line line that actually removes the item from the list of products chosen? From my understanding, in order to establish an array, new array = elements[i] has to be added but Im thinking that elements[i] is the array that holds the product. Does the "0" in this line actually delete the item? document.template.elements[i].value = 0 ; Code: function del_item(X,msg) { // var msg = "Are you sure you want to delete this line item?" resp = confirm("Are you sure you want to " + msg + "?") ; if (resp) { var len = document.template.elements.length //loop to put into arrays for (var i = 0; i < len; i++) { var lname = document.template.elements[i].name ; if(lname == X) { document.template.elements[i].value = 0 ; process_order(0) ; document.template.loginpath.value = "CO" ; document.template.submit() ; } } } else { return ; } } hi I do not know why the cookies can't be deleted Code: function deleteCookies() { var splitC=document.cookie.split(";"); var i; for(i=0;i<splitC.length;i++) { var getName=splitC[i].split("="); var cookieDelete = getName[0].replace(/^\s+|\s+$/g, ''); document.cookie=cookieDelete+"=0;expires=Thu, 01-Jan-70 00:00:01 GMT"; } } Hi I am working on a .net basket where I save the info for the products in the basket etc in a cookie. Now I have an html button on the basket page where I want to be able to delete the product (Cookie). I am using Code: <script type="text/javascript"> function delete_cookie ( cookie_name ) { expires = Now(); document.cookie = cookie_Name+"= ;expires="+expires.toGMTString(); } </script>But I get an error that says the cookie is not delcared? But it does exist because I retrive the name of the cookie when looping through the cookie list. What am I doing wrong here? i hava e java script fr confrmation of record deletion on server side in asp.net function deleteCheck() { if (document.getElementById('H_ctrl').value!="") { alert(document.getElementById('H_ctrl').value) var delconfirm = confirm('Are you sure ? You want to delete ' + document.getElementById('H_ctrl').value +' Details ?') if (delconfirm==true) { var delconfirmAgain = confirm('The Record ' + document.getElementById('H_ctrl').value +' will be deleted permanently. Are you sure? ') if(delconfirmAgain==true) { return true } else { return false } } else { return false } } } BTNDELETE.Attributes("onclick") = "javascript:return deleteCheck();" in the button event i have a query for redord deletion i need to delete the records if u use the return keyword the record doesnot get deleted but if i remove the return keyowrd the record gets deleted even if CANCEL is clicked I have been searching the internet for thhe past hour trying to find this and searched this forum, I am trying to Delete my cookie with a button. On my websitr I have a cookie to remember the name of the user, I want them to be able to change their name with a button. so delete cookie. How can this be done? The cookie names its seld "UserName" if this helps. Hi I really really really need your help since I have no idea about this. How can I insert the Javascript Confirmation Alert into the del.php file? I have this del.php file PHP Code: <?php require ("include/config.php"); $id=$_REQUEST['id']; $strSQL = "DELETE FROM change WHERE id = '".$id."' "; $objQuery = odbc_exec($conn,$strSQL); if($objQuery) { echo "<script language='Javascript'>alert('Deleted.'); window.location=\""."index.php?action=syif\"</script>"; } else { echo "Error Delete [".$strSQL."]"; } odbc_close($conn); ?> This is the confirmation javascript Code: <html> <head> <script type="text/javascript"> function show_confirm() { var r=confirm("Delete?"); if (r==true) { alert("Deleted!"); } else { alert("Cancelled!"); } } </script> </head> <body> <input type="button" onclick="show_confirm()" value="Show confirm box" /> </body> </html> |