I have a webpage that can update a table live with AJAX. I have some problems with the onlick function.
Whenever I click the update button it shows on console
Cannot read property 'value' of null(…)bb # manageaccounts.php:184 onclick # manageaccounts.php:229
I checked it in my update.php file but the code is just fine. I tried to change the onclick function from onclick="(this.id)" to onclick="(this.firstname)" but none worked.
manageaccounts.php
<body>
<div class="wrapper">
<div id="data" class="table"></div>
</div>
<script type="text/javascript">
data();
function data() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "update.php?status=disp", false);
xmlhttp.send(null);
document.getElementById("data").innerHTML = xmlhttp.responseText;
}
function aa(a) {
firstid = "firstname" + a;
txtfirstid = "txtfirst" + a;
var firstname = document.getElementById(firstid).innerHTML;
document.getElementById(firstid).innerHTML = "<input type='text' value='" + firstname + "' id='" + txtfirstid + "'>";
midid = "middlename" + a;
txtmidid = "txtmid" + a;
var middlename = document.getElementById(midid).innerHTML;
document.getElementById(midid).innerHTML = "<input type='text' value='" + middlename + "' id='" + txtmidid + "'>";
lastid = "lastname" + a;
txtlastid = "txtlast" + a;
var lastname = document.getElementById(lastid).innerHTML;
document.getElementById(lastid).innerHTML = "<input type='text' value='" + lastname + "' id='" + txtlastid + "'>";
addid = "address" + a;
txtaddid = "txtadd" + a;
var address = document.getElementById(addid).innerHTML;
document.getElementById(addid).innerHTML = "<input type='text' value='" + address + "' id='" + txtaddid + "'>";
gendid = "gender" + a;
txtgendid = "txtgend" + a;
var gender = document.getElementById(gendid).innerHTML;
document.getElementById(gendid).innerHTML = "<input type='text' value='" + gender + "' id='" + txtgendid + "'>";
contid = "contact" + a;
txtcontid = "txtcont" + a;
var contact = document.getElementById(contid).innerHTML;
document.getElementById(contid).innerHTML = "<input type='text' value='" + contact + "' id='" + txtcontid + "'>";
updateid = "update" + a;
document.getElementById(a).style.visibility = "hidden";
document.getElementById(updateid).style.visibility = "visible";
}
function bb(b) {
var firstid = "txtfirst" + b;
var firstname = document.getElementById(firstid).value;
var midid = "txtmid" + b;
var middlename = document.getElementById(midid).value;
var lastid = "txtlast" + b;
var lastname = document.getElementById(lastid).value;
var addid = "txtadd" + b;
var address = document.getElementById(addid).value;
var gendid = "txtgend" + b;
var gender = document.getElementById(gendid).value;
var contid = "txtcont" + b;
var contact = document.getElementById(contid).value;
update_value(b, firstname, middlename, lastname, address, gender, contact);
document.getElementById(b).style.visibility = "visible";
document.getElementById("update" + b).style.visibility = "hidden";
document.getElementById("firstname" + b).innerHTML = firstname;
document.getElementById("middlename" + b).innerHTML = middlename;
document.getElementById("lastname" + b).innerHTML = lastname;
document.getElementById("address" + b).innerHTML = address;
document.getElementById("gender" + b).innerHTML = gender;
document.getElementById("contact" + b).innerHTML = contact;
}
function update_value(id, firstname, middlename, lastname, address, gender, contact) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "update.php?id=" + id + " & firstname=" + firstname + " & middlename=" + middlename + " & lastname=" + lastname + " &address=" + address + " & gender=" + gender + " &contact=" + contact + " & status=update", false);
xmlhttp.send(null);
}
function delete1(id) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "update.php?id=" + id + " & status=delete", false);
xmlhttp.send(null);
data();
}
</script>
</body>
update.php has the null value onclick <input type="button" id="update<?php echo $row["id"]; ?>" name="<?php echo $row["id"]; ?>" value="UPDATE" style="visibility: hidden;" onclick="bb(this.firstname)">
<?php
$conn = mysqli_connect('localhost', 'root','root', 'realestate');
if (!$conn) {
die("Sorry we're having some problems with the database. :(".mysqli_connect_error());
}
$status = $_GET["status"];
if ($status == "disp") {
$sql1 = "SELECT * FROM agents"; // check the change ere
$result=mysqli_query($conn, $sql1);
echo "<table>";
echo "<tr>
<th>Agent ID</th>
<th>Firstname</th>
<th>Middlename</th>
<th>Lastname</th>
<th>Address</th>
<th>Gender</th>
<th>Contact</th>
<th>Action</th>
</tr>";
while($row=mysqli_fetch_assoc($result)) {
echo "<tr class='da'>";
echo "<td>"; echo $row["id"]; echo "</td>";
echo "<td>"; ?><div id="firstname<?php echo $row["id"]; ?>"><?php echo $row["firstname"]; ?></div><?php echo "</td>";
echo "<td>"; ?><div id="middlename<?php echo $row["id"]; ?>"><?php echo $row["middlename"]; ?></div><?php echo "</td>";
echo "<td>"; ?><div id="lastname<?php echo $row["id"]; ?>"><?php echo $row["lastname"]; ?></div><?php echo "</td>";
echo "<td>"; ?><div id="address<?php echo $row["id"]; ?>"><?php echo $row["address"]; ?></div><?php echo "</td>";
echo "<td>"; ?><div id="gender<?php echo $row["id"]; ?>"><?php echo $row["gender"]; ?></div><?php echo "</td>";
echo "<td>"; ?><div id="contact<?php echo $row["id"]; ?>"><?php echo $row["contact"]; ?></div><?php echo "</td>";
echo "<td>"; ?><button id="<?php echo $row["id"]; ?>" name="<?php echo $row["id"]; ?>" onclick="delete1(this.id)">DELETE</button><?php echo "</td>";
echo "<td>"; ?>
<input type="button" id="<?php echo $row["id"]; ?>" name="<?php echo $row["id"]; ?>" value="EDIT" onclick="aa(this.id)">
<input type="button" id="update<?php echo $row["id"]; ?>" name="<?php echo $row["id"]; ?>" value="UPDATE" style="visibility: hidden;" onclick="bb(this.firstname)">
<?php echo "</td>";
echo "</tr>";
}
echo "</table>";
}
if ($status == "update") {
$id = $_GET["id"];
$first = $_GET["firstname"];
$mid = $_GET["middlename"];
$last = $_GET["lastname"];
$add = $_GET["address"];
$gend = $_GET["gender"];
$cont = $_GET["contact"];
$first = trim($first);
$mid = trim($mid);
$last = trim($last);
$add = trim($add);
$gend = trim($gend);
$cont = trim($cont);
$sql2 = "UPDATE agents SET firstname='$first', middlename='$mid', lastname='$last', address='$add', gender='$gend', contact='$cont' WHERE id=$id";
$result = mysqli_query($conn, $sql2);
}
if ($status == "delete") {
$id = $_GET["id"];
$sql3 = "DELETE FROM agents WHERE id=$id";
$result = mysqli_query($conn, $sql3);
}
?>
In your function bb, you are doing:
var firstid="txtfirst"+b;
var firstname = document.getElementById(firstid).value;
You are calling the function like:
onclick="bb(this.firstname)"
Now, this.firstname would be undefined as this is pointing to your button and the button does not have a property called firstname.
Also, when you do like
onclick="(this.id)"
Then inside your function, firstid would become "txtfirstupdate1" as the id of your button will be update + id and not just id. So, document.getElementById(firstid) would be actually null and that's the reason why you are getting this error.
Related
I have a form that i'm working on that will dynamically hide any selections in an optgroup, everything works fine except that the onchange() only fires the initial time when initial selection is made. I'm trying to make it so that the onchange() even fires every time that a user selects a new option. The unhiding of the div and initial selection work like I said.
Help please!
<script>
function toggleandhide() {
var cont = document.getElementById('cont');
if (cont.style.display == 'inline-block') {
cont.style.display = 'none';
}
else {
cont.style.display = 'inline-block';
}
var e = document.getElementById("vendor_id");
var str = e.options[e.selectedIndex].text;
var groups = document.getElementsByTagName('optgroup');
for (var i = 0; i < groups.length; i++) {
if (groups[i].label != str) {
var options = groups[i].childNodes;
for (var j = 0; j < options.length; j++)
options[j].style.display = 'none';
}
}
}
</script>
echo "<div class=\"table\">";
echo "<div class=\"table-row\">";
echo "<div class=\"table-cell\">";
echo "Cruise Line:";
echo "</div>";
echo "<div class=\"table-cell\">";
echo "<div class=\"selectWrapper\">";
echo "<select class=\"selectBox\" name=\"vendor_id\" id=\"vendor_id\" onchange=\"toggleandhide()\">";
echo "<option value=\"\"></option>";
foreach($vendors as $key2 => $val2 ){
echo "<option value=\"".$key2."\">".$val2."</option>";
}
echo "</select>";
echo "</div>";
echo "</div>";
echo "</div>";
echo "</div>";
echo "<div class=\"table\">";
echo "<div id=\"cont\" style=\"display: none;\" class=\"table-row\">";
echo "<div class=\"table-cell\">";
echo "Cruise Ship :";
echo "</div>";
echo "<div class=\"table-cell\" style=\"padding-left: 114px\">";
echo "<div class=\"selectWrapper\">";
echo "<select class=\"selectBox\" name=\"ship_id\">";
echo "<option value=\"\"></option>";
foreach($vendors as $r3 => $d3){
foreach( $true_list as $k => $r ){
if($d3==$vendor_name[$k]){
if(!empty($vendor_name[$k])){
echo "<optgroup label=\"".$vendor_name[$k]."\">";
asort($r);
foreach($r as $r2 => $d2){
echo "<option value=\"".$r2."\">".$d2."</option>";
}
echo "</optgroup>";
}
}
}
}
echo "</select>";
echo "</div>";
echo "</div>";
echo "</div>";
echo "</div>";
so here's a very simple question but I'm having difficulties on solving it
see i have an iframe and i want to change it's src depending on the link that was clicked
here's the javascript code
function showOverlay(id)
{
var str1 = 'abstract.php?id=';
var link = str1.concat(id);
document.getElementById(id).style['display'] = "block";
document.getElementById(id).style['opacity'] = "1";
document.getElementById('abstract_frame').src = link;
}
function hideOverlay(el, evt)
{
if (el && evt)
{
el.style.display = evt.target == el ? 'none' : '';
}
document.getElementById('abstract_frame').src = '';
}
so I used document.getElementById('abstract_frame').src = link; to set the src then on the hideOverlay function I used
document.getElementById('abstract_frame').src = ''; to set the src back to a blank link.
so the problem is when I call on the showOverlay again to set another src link to the iframe with a different value i get a blank screen
here's the html/php
echo '<div class="SearchResults">';
echo " <span class='top'>";
echo " <a>";
echo " <h3>". strtoupper($title) ."</h3>";
echo " </a>";
echo " <br />";
echo " <h5 class='sub'>";
echo "Authors :";
$tags = explode('|',$run['author']);
foreach($tags as $i =>$key) {
echo '<a class="authors">Dr.'.$key.'</a>';
}
echo "<br><br>";
echo " </h5>";
echo " </span>";
echo " <span class='bottom'>";
echo " <span class='bottomLeft'>";
echo ($run['abstract'] != "" ? " <a class='options' data-articlenum='" . $run['reference_number'] . "' onclick='showOverlay(this.dataset.articlenum)'>Abstract</a><span style='margin:0px 5px;'>|</span>" : "" );
echo " <a target='_blank' href='view.php?filename=".strtolower($run['title'])."' class='options'>";
echo " Full Article";
echo " </a>";
echo " </span>";
echo " <div class='overlay' id='". $run['reference_number'] ."' onclick='hideOverlay(this, event)'> ";
echo " <iframe class='abstract' id='abstract_frame' style='padding:0px;' scrolling='no'>";
echo " </iframe>";
echo " </div>";
echo " <span class='bottomRight'>";
echo " <p class='label'>".$run['journal'].", ". $run['volume'] .", ". date("F, Y",strtotime($run['publication_date'])) ."# Pg.". $run['pages'] ."</p>";
echo " </span>";
echo " </span>";
echo " <br style='clear:both;'/>";
echo "</div>";
here's some visuals
I was unable to retrieve the dynamic generated textfields and radio buttons that I created using javascript but was able to retrieve the those that I manually added into the form using html.
Previously, I use styling to hide and show all my textfields instead of dynamically created textfields, so I have no problem getting all the textfields and can safely assume my PHP processing doesn't have any problem.
My HTML/Interface coding
<?php
for ($x = 1; $x <= 5; $x++)
{
$inputAreaID = "inputArea".$x;// Creating all dynamic options and etc in this div using javascript
$typeID = "type".$x; //for select type id
$opt2ID = "ans".$x;
$optID = "opt".$x;
$comID = "com".$x;
$qnName = "qn".$x // for qn textfield name?>
<table>
<tr>
<td>Question <?php echo $x ?></td>
<td><input type="text" name='<?php echo $qnName ?>' required></td>
</tr>
<tr>
<td>Question Type</td>
<td>
<select id="<?php echo $typeID ?>" name="<?php echo $typeID ?>" onclick="showQuestionSelect('<?php echo $x ?>', '<?php echo $typeID ?>', '<?php echo $inputAreaID ?>')">
<option value="">Please select one option </option>
<option value="Yes,No">Yes/No </option>
<option value="True,False">True/False</option>
<option value="3">A. B. C. D.</option>
</select>
</td>
</tr>
</table>
<div id='<?php echo $inputAreaID ?>' style="margin-bottom: 1px;margin-top:1px;"></div>
JavaScript coding
function showQuestionSelect(questionNo, typeID, inputArea)
{
var s = String(typeID);
var i = String(inputArea);
var e = document.getElementById(s);
var selectedOpt = e.options[e.selectedIndex].value;
ansID = questionNo + "_ans";
comID = questionNo + "_com";
optA = questionNo + "_optA";
optB = questionNo + "_optB";
optC = questionNo + "_optC";
optD = questionNo + "_optD";
var msg = "";
if (selectedOpt == "True,False")
{
msg ="<div style='margin-bottom: 10px;margin-top:10px;'><input type='radio' name='"+ ansID + "' value='True'> Submit True as Answer<input type='radio' name='" +ansID +"' value='False'> Submit False as Answer</div>";
msg +="<div style='margin-bottom: 10px;margin-top:10px;'>Reason for the answer: <input type='text' name='" + comID + "' value='' /></div>"
}
else if (selectedOpt == 3)
{
msg = "<div style='margin-bottom: 10px;margin-top:10px;'>";
msg += "Option A: <input type='text' name='" + optA + "' value='' /> <input type='radio' name='" + ansID + "' value='" + optA + "'> Submit as Answer <br><br>";
msg += "Option B: <input type='text' name='" + optB + "' value='' /> <input type='radio' name='" + ansID + "' value='" + optB + "'> Submit as Answer <br><br>";
msg += "Option C: <input type='text' name='" + optC + "' value='' /> <input type='radio' name='" + ansID + "' value='" + optC + "'> Submit as Answer <br><br>";
msg += "Option D: <input type='text' name='" + optD + "' value='' /> <input type='radio' name='" + ansID + "' value='" + optD + "'> Submit as Answer </div>";
msg +="<div style='margin-bottom: 10px;'>Reason for the answer: <input type='text' name='" + comID + "' value='' /></div>";
}
document.getElementById(i).innerHTML = msg;
}
PHP Processing Coding
for ($x = 1; $x <= 5; $x++)
{
$qn = $_POST["qn".$x]; // for qn textfield name
$type = $_POST["type".$x]; //for select type id
$ans = $_POST[$x."_ans"]; //for answer div id
$reason = $_POST[$x."_com"]; //for answer div id
$optionType = "";//to put into database
if ($type == "Yes,No")
{
$ans = "";
$reason = "";
}
if ($type == "3")
{
$optA = $_POST[$x."_optA"];
$optB = $_POST[$x."_optB"];
$optC = $_POST[$x."_optC"];
$optD = $_POST[$x."_optD"];
$optionType = $optA.",".$optB.",".$optC.",".$optD;
if ($ans == $x."_optA")
$ans = $optA;
else if ($ans == $x."_optB")
$ans = $optB;
else if ($ans == $x."_optC")
$ans = $optC;
else
$ans = $optD;
}
else
$optionType = $type;
Can anyone assist?
First of all you should to check server has got the values of those generated textfields. Try to display all members of $_POST[].
I guess that you are stuck in the names of the parameters
i am making the html table with an inline edit using http://www.iwebux.com/inline-edit-using-ajax-in-jquery/ i try to pass the edited value to database but its not passing,i want to pass the id and the edited value to database below is my code.Please anyone guide me i am new to programming thanks.
ajax
$(document).ready(function () {
$('td.edit').click(function () {
$('.ajax').html($('.ajax input').val());
$('.ajax').removeClass('ajax');
$(this).addClass('ajax');
$(this).html('<input id="editbox" size="' + $(this).text().length + '" type="text" value="' + $(this).text() + '">');
$('#editbox').focus();
}
);
$('td.edit').keydown(function (event) {
arr = $(this).attr('class').split(" ");
if (event.which == 13) {
$.ajax({
type: "POST",
url: "config.php",
data: "value=" + $('.ajax input').val() + "&rowid=" + arr[1] + "®ion=" + arr[2],
success: function (data) {
$('.ajax').html($('.ajax input').val());
$('.ajax').removeClass('ajax');
}
});
}
}
);
$('#editbox').live('blur', function () {
$('.ajax').html($('.ajax input').val());
$('.ajax').removeClass('ajax');
});
});
Html
<body>
<table cellpadding="15">
<tr class="heading" bgcolor="#ccc">
<th>region</th>
<th>country</th>
<th style="width:285px;">networkname</th>
<th>mcc</th>
<th>mnc</th>
<th>mnp</th>
</tr>
<?php
$dbHost = 'localhost'; // usually localhost
$dbUsername = 'fms';
$dbPassword = 'xxxxxxxxx';
$dbDatabase = 'fms';
$db = mysql_connect($dbHost, $dbUsername, $dbPassword) or die ("Unable to connect to Database Server.");
mysql_select_db ($dbDatabase, $db) or die ("Could not select database.");
$sql = mysql_query("SELECT * FROM supplierprice");
while($row=mysql_fetch_array($sql))
{
echo '<tr '.$row['id'].' >';
echo "<td class='edit' >" . $row['region'] . "</td>";
echo "<td class='edit' >" . $row['country'] . "</td>";
echo "<td class='edit' >" . $row['networkname'] . "</td>";
echo "<td class='edit' >" . $row['mcc'] . "</td>";
echo "<td class='edit' >" . $row['mnc'] . "</td>";
echo "<td class='edit'>" . $row['mnp'] . "</td>";
echo "</tr>";
}
?>
</table>
</body>
config.php
<?php
$dbHost = 'localhost'; // usually localhost
$dbUsername = 'fms';
$dbPassword = 'xxxxxxxx';
$dbDatabase = 'fms';
$db = mysql_connect($dbHost, $dbUsername, $dbPassword) or die ("Unable to connect to Database Server.");
mysql_select_db ($dbDatabase, $db) or die ("Could not select database.");
print $_POST['rowid'];
if($_POST['rowid'])
{
$id=mysql_escape_String($_POST['id']);
$region=mysql_escape_String($_POST['region']);
$country=mysql_escape_String($_POST['country']);
$networkname=mysql_escape_String($_POST['networkname']);
$mcc=mysql_escape_String($_POST['mcc']);
$mnc=mysql_escape_String($_POST['mnc']);
$mnp=mysql_escape_String($_POST['mnp']);
$sql = "update supplierprice set region='$region',country='$country',networkname='$networkname',mcc='$mcc',mnc='$mnc',mnp='$mnp' where id='$id'";
mysql_query($sql);
print " $sql";
}
?>
enter image description here
The above image due value 19948 and the input value are not greater than the due value 19948. How to validate this in javascript or jquery or php?
<?php
$i = 0;
$sql = "select * from invoice where `cid`='5'";
$res = mysql_query($sql);
$numrows = mysql_num_rows($res);
while ($row = mysql_fetch_array($res)) {
$i = $i + 1;
echo "<tr>";
echo "<td>" . $row['customername'] . "</td>";
echo "<td>" . $row['totalamount'] . "</td>";
echo "<td>" . $row['paidamount'] . "</td>";
echo "<td>" . $row['dueamount'] . "</td>";
?>
<?php
echo "<td><input type='text' name='ichange$i' value='0' onkeyup='ivalue()' />
<input type='hidden' name='idue$i' value='$due' /></td>";
echo "</td>";
echo "</tr>";
}
echo "<input type='hidden' name='nrows' value='$numrows' />";
?>
<script>
function ivalue()
{
nrows=document.getElementsByName("nrows").item(0).value;
for(i=1;i<=nrows;i++)
{
ichange="ichange" + i;
idue="idue" + i;
if(document.getElementsByName(ichange).item(0).value>document.getElementsByName(idue).item(0).value)
{
alert("Value not greater than due value")
}
}
}
</script>
I suppose you want to alert the user if he enters a greater value than the due in the same row.
I would use jQuery here since you tagged it :
$('input[type="text"]').on('keyup',function(){
if($(this).val() > $(this).next().val()){
alert("Value not greater than due value")
}
})
You could add some classes to your html for an easier and more precise select.