What's new

PHP Guys anong kulang dito sa Javascript ko para sa php, pasok guys!

P

PHC - Naethan

Forum Expert
Joined
Dec 27, 2016
Posts
3,374
Reaction
18,121
Points
2,599
Age
22
Good Afternoon mga ka PHC

Ask ko lng kung anong kulang dito sa code ko para sa EDIT function ng Javascript
Na dini-display kase ng PHP yung database ko sa HTML <table>.. wait para maintindihan niyo

1671254824901.png


---------=========== Eto code ko sa Display Function neto ===========--------------
PHP: 
<?php
                    $conn = mysqli_connect("localhost", "root", "", "upload");
                    // Check connection
                    if ($conn->connect_error) {
                    die("Connection failed: " . $conn->connect_error);
                    }
                    $sql = "SELECT id, title, date, course FROM register";
                    $result = $conn->query($sql);
                    if ($result->num_rows > 0) {
                    // output data of each row
                    while($row = $result->fetch_assoc()) {
                    echo "<tr id='row'><td id='Title_row'>" . $row["title"]. "</td><td id='Date_row'>" . $row["date"] . "</td><td id='Course_row'>"
                    . $row["course"]. "</td><td><input type='button' value='Edit' id='eBtn' onclick='edit_row()' style='background-color: #48A14D; color: white;'><input type='button' value='Save' id='sBtn' onclick='save_row()' style='background-color: blue; color: #48A14D;'></td></tr>";
                    }
                    echo "</table>";
                    } else { echo "0 results"; }
                    $conn->close();
                ?>

#### Btw, wala namang problema sa PHP [Fetching] keneme, oks naman lahat..

#### Tsaka nga pala sa dulo, kung mapapansin niyo na gumawa ako ng


<td><input type="button" /*for button Edit button sa mga row, (naka auto kung baga)"*/> at <input type="button" /*for the save button sa mga row ulit, (para auto rin)*/></td>

.
.
.
.

Now ang problema ko ay dito sa editing function, lagi kase yung taas yung na E-EDIT kahit pindutin ko yung mga EDIT buttton sa baba, hahaha.. may mali ako dito ehh or may kulang akong dapat i-declare since auto ginamit ko para sa mga Button Edit at Save sa mga Row

1671256191867.png


#### Check my Java Script code
JavaScript: 
function edit_row()
    {
     document.getElementById("eBtn").style.display="none";
     document.getElementById("sBtn").style.display="block";
        
     var Title=document.getElementById('Title_row');
     var Date=document.getElementById('Date_row');
     var Course=document.getElementById('Course_row');
        
     var Title_data=Title.innerHTML;   
     var Date_data=Date.innerHTML;
     var Course_data=Course.innerHTML;
    
     Title.innerHTML="<input type='text' id='Title_text' value='"+Title_data+"'>";
     Date.innerHTML="<input type='text' id='Date_text' value='"+Date_data+"'>";
     Course.innerHTML="<input type='text' id='Course_text' value='"+Course_data+"'>";
    }
    
    function save_row()
    {
         var title_val=document.getElementById("Title_text").value;
         var date_val=document.getElementById("Date_text").value;
         var course_val=document.getElementById("Course_text").value;

         document.getElementById("title_row").innerHTML=title_val;
         document.getElementById("date_row").innerHTML=date_val;
         document.getElementById("course_row").innerHTML=course_val;

         document.getElementById("eBtn").style.display="block";
         document.getElementById("sBtn").style.display="none";
        
        
        
        //alert("Updated Successfully");
         Swal.fire({
            title: 'Ｓａｖｅｄ！',
            text: 'Record Updated Successfully!',
            imageUrl: 'giphy.gif',
            imageWidth: 300,
            imageHeight: 150,
            width: "25em",
            imageAlt: 'Custom image',
          })
    }

####BTW kung mapapansin niyo, bat pa ako gumagamit ng Javascript, kung meron na akong SQL database para sa PHP, bakit di ko nalng gamitin yung function ng PHP para duon.. Kase po Prototype plng naman pinapagawa sa amin kaya, maybe sunod nalng.. or sa next na tanong ko dito hahahaha.. pero kung bibigyan niyo ako ng idea or maibibigay niyo ng maaga.. abat! happy merry christmass tlga malala :ROFLMAO: !!

~Yun lng mga tol, thanks in adv mga kosa
PHC - Naethan
 

Attachments

Ibang language nagamit ko, pero in my exp sa isang table, kailangan makuha nya yung "id" ng line na ni edit mo(button), need may ma send ka din na id(identifier sa db) kung alin yung e edit na data.
 
ueL x said:
Ibang language nagamit ko, pero in my exp sa isang table, kailangan makuha nya yung "id" ng line na ni edit mo(button), need may ma send ka din na id(identifier sa db) kung alin yung e edit na data.
Click to expand...
So bawal ang auto ?, or need pa ng forloop para sa button?
Tsaka prototype plng naman to, kaya no need ko muna ng actual Database Editing function.. PHP na gagamitin ko para dun..

sUFF3R derksd Arcturus Zerobyte mga Tol pahinge ulit ng chakra
 
ueL x said:
Js gamit ko, and yung <td> naka loop, and dun ako nag assign ng id nya.
Click to expand...
Yan prang ganyan nga, kase need ko ng id tlga para sa mga button kaya need ng loop, Pano tol ?

Meron akong looping kaso for Deleting naman kase to, pero pwede kong kunin yung idea ng looping ng table wait.. check mo tol
JavaScript: 
function del_function() {
      var index, table = document.getElementById("myTable");
      var table_reduce = (table.rows.length);
     
                for(var i = 1; i < table_reduce; i++)
                {
                    table.rows[i].cells[3].onclick = function()
                    {
                        var c = confirm("Are you sure !?")                          
                       
                        if(c === true)
                        {
                            index = this.parentElement.rowIndex;
                            table.deleteRow(index);
                        }
                       
                       
                    };
                   
                }
 
Last edited:
Nag assign lang ako ng unique na key

Repo:

You do not have permission to view the full content of this post. Log in or register now.
JSX: 
{residents && residents.map((residents, i) =>
                        <Tr {...residents} key={i} />
                    )}

function Tr({_id, name, address, phone}){

return (
        <tr key={_id} >
<td>
{name}
            </td>
</tr>

}
 
Last edited:
ueL x said:
Nag assign lang ako ng unique na key

Repo:

[Hidden content]

JSX: 
{residents && residents.map((residents, i) =>
                        <Tr {...residents} key={i} />
                    )}

function Tr({_id, name, address, phone}){

return (
        <tr key={_id} >
<td>
{name}
            </td>
</tr>

}
Click to expand...
Ano yung jsx hahaha
 
Usually dynamically assigned din dapat yung ID para magkakaiba sila. Kung lahat ng row same ID, yung first instance lang ang maseselect talaga lagi.

Eto mas madali using querySelectorAll. Chinange ko muna yung ID to class.

PHP: 
<?php
    $conn = mysqli_connect("localhost", "root", "", "upload");
    // Check connection
    if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
    }
    $sql = "SELECT id, title, date, course FROM register";
    $result = $conn->query($sql);
    if ($result->num_rows > 0) {
        echo "<table>"; // added <table> here - remove if it breaks your code
        // output data of each row // change id to class // remove inline onclick script
        while ($row = $result->fetch_assoc()) {
            echo "<tr id='row'><td class='title_row'>" . $row["title"] . "</td><td class='date_row'>" . $row["date"] . "</td><td class='course_row'>" . $row["course"] . "</td>
            <td><input type='button' value='Edit' style='background-color: #48A14D; color: white;'>
            <input type='button' value='Save' style='background-color: blue; color: #48A14D;'></td></tr>";
        }
        echo "</table>";
    } else {
        echo "0 results";
    }
    $conn->close();


Tapos eto yung JS code gamit ang querySelectorAll para iselect lahat ng elements at maindex din para alam natin kung anung row and kinlick

JavaScript: 
// put each column/button in their own array // used class name to select
const titlesArray = document.querySelectorAll("td.title_row")
const datesArray = document.querySelectorAll("td.date_row")
const coursesArray = document.querySelectorAll("td.course_row")
const editButtonsArray = document.querySelectorAll("input[value='Edit']")
const saveButtonsArray = document.querySelectorAll("input[value='Save']")

// loop through each edit buttons and add onClick event // passed on index to know which specific button or row is clicked
editButtonsArray.forEach(function (currentButton, index) {
    currentButton.addEventListener('click', function () {
        const title_data = titlesArray[index].innerHTML;
        const date_data = datesArray[index].innerHTML;
        const course_data = coursesArray[index].innerHTML;

        titlesArray[index].innerHTML = "<input type='text' value='" + title_data + "'>";
        datesArray[index].innerHTML = "<input type='text' value='" + date_data + "'>";
        coursesArray[index].innerHTML = "<input type='text' value='" + course_data + "'>";

        editButtonsArray[index].style.display = "none";
        saveButtonsArray[index].style.display = "block";
    })
})

// loop through each save buttons and add onClick event // passed on index to know which specific button or row is clicked
saveButtonsArray.forEach(function (currentButton, index) {
    currentButton.addEventListener('click', function () {

        // saves data to the innerHTML by getting the value of each of the <td><input>
        titlesArray[index].innerHTML = titlesArray[index].firstElementChild.value;
        datesArray[index].innerHTML = datesArray[index].firstElementChild.value;
        coursesArray[index].innerHTML = coursesArray[index].firstElementChild.value;

        editButtonsArray[index].style.display = "block";
        saveButtonsArray[index].style.display = "none";

        //alert("Updated Successfully");
        Swal.fire({
            title: 'Ｓａｖｅｄ！',
            text: 'Record Updated Successfully!',
            imageUrl: 'giphy.gif',
            imageWidth: 300,
            imageHeight: 150,
            width: "25em",
            imageAlt: 'Custom image',
        })
    })
})
 
Last edited:
derksd said:
Usually dynamically assigned din dapat yung ID para magkakaiba sila. Kung lahat ng row same ID, yung first instance lang ang maseselect talaga lagi.

Eto mas madali using querySelectorAll. Chinange ko muna yung ID to class.

PHP: 
<?php
    $conn = mysqli_connect("localhost", "root", "", "upload");
    // Check connection
    if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
    }
    $sql = "SELECT id, title, date, course FROM register";
    $result = $conn->query($sql);
    if ($result->num_rows > 0) {
        echo "<table>"; // added <table> here - remove if it breaks your code
        // output data of each row // change id to class // remove inline onclick script
        while ($row = $result->fetch_assoc()) {
            echo "<tr id='row'><td class='title_row'>" . $row["title"] . "</td><td class='date_row'>" . $row["date"] . "</td><td class='course_row'>" . $row["course"] . "</td>
            <td><input type='button' value='Edit' style='background-color: #48A14D; color: white;'>
            <input type='button' value='Save' style='background-color: blue; color: #48A14D;'></td></tr>";
        }
        echo "</table>";
    } else {
        echo "0 results";
    }
    $conn->close();


Tapos eto yung JS code gamit ang querySelectorAll para iselect lahat ng elements at maindex din para alam natin kung anung row and kinlick

JavaScript: 
// put each column/button in their own array // used class name to select
const titlesArray = document.querySelectorAll("td.title_row")
const datesArray = document.querySelectorAll("td.date_row")
const coursesArray = document.querySelectorAll("td.course_row")
const editButtonsArray = document.querySelectorAll("input[value='Edit']")
const saveButtonsArray = document.querySelectorAll("input[value='Save']")

// loop through each edit buttons and add onClick event // passed on index to know which specific button or row is clicked
editButtonsArray.forEach(function (currentButton, index) {
    currentButton.addEventListener('click', function () {
        const title_data = titlesArray[index].innerHTML;
        const date_data = datesArray[index].innerHTML;
        const course_data = coursesArray[index].innerHTML;

        titlesArray[index].innerHTML = "<input type='text' value='" + title_data + "'>";
        datesArray[index].innerHTML = "<input type='text' value='" + date_data + "'>";
        coursesArray[index].innerHTML = "<input type='text' value='" + course_data + "'>";

        editButtonsArray[index].style.display = "none";
        saveButtonsArray[index].style.display = "block";
    })
})

// loop through each save buttons and add onClick event // passed on index to know which specific button or row is clicked
saveButtonsArray.forEach(function (currentButton, index) {
    currentButton.addEventListener('click', function () {

        // saves data to the innerHTML by getting the value of each of the <td><input>
        titlesArray[index].innerHTML = titlesArray[index].firstElementChild.value;
        datesArray[index].innerHTML = datesArray[index].firstElementChild.value;
        coursesArray[index].innerHTML = coursesArray[index].firstElementChild.value;

        editButtonsArray[index].style.display = "block";
        saveButtonsArray[index].style.display = "none";

        //alert("Updated Successfully");
        Swal.fire({
            title: 'Ｓａｖｅｄ！',
            text: 'Record Updated Successfully!',
            imageUrl: 'giphy.gif',
            imageWidth: 300,
            imageHeight: 150,
            width: "25em",
            imageAlt: 'Custom image',
        })
    })
})
Click to expand...
Yan din nga nasa isip ko, need tlga mag assign para ma identify kung ano tlga yung button na ginamit ni user na nasa loob ng table
or
Pwede rin gumwa ng for loop para sa button, kaso di ko alam pano mag implement.. malayo pa lakbay ko 😂

Salamat tol, sayo tlga ako na tututo ehh di sa teacher namin ❤

derksd

Eto tol tama tong nakuha ko sa DELETE function, eto rin yung sinasabi ko sanang Loop Function, para di na need ng specified id kada row, td, and button.. kase naka loop na siya "[I]Theory ko lng naman" [/I] hahaha

Problema ko lng dito kase naka confirm(" ") Pano ko siya gawing Sweet alert nalng.. no need na ng conditional statement kung ok or cancel pinindut ni user, provided na kase ni sweet

PHP: 
<?php
                    $conn = mysqli_connect("localhost", "root", "", "upload");
                    // Check connection
                    if ($conn->connect_error) {
                    die("Connection failed: " . $conn->connect_error);
                    }
                    $sql = "SELECT id, title, date, course FROM register";
                    $result = $conn->query($sql);
                    if ($result->num_rows > 0) {
                    // output ng row
                    while($row = $result->fetch_assoc()) {
                    echo "<tr id='row'><td>" . $row["title"]. "</td><td>" . $row["date"] . "</td><td>"
                    . $row["course"]. "</td><td style='background-color: red; cursor: pointer;'><input type='button' onclick='del_function()' value='Delete' style='background-color: red;outline: none;border: 0;cursor: pointer;color: white;font-weight:600;padding-bottom:3px;'/></td></tr>";
                    }
                    echo "</table>";
                    } else { echo "0 results"; }
                    $conn->close();
                ?>

JavaScript: 
function del_function() {
      var index, table = document.getElementById("myTable");
      var table_reduce = (table.rows.length);
  
                for(var i = 1; i < table_reduce; i++)
                {
                    table.rows[i].cells[3].onclick = function()
                    {
                        var c = confirm(Swal.fire({
                                    title: '🇦🇷🇪 🇾🇴🇺 🇸🇺🇷🇪 ?!',
                                    text: 'There is no way to recover this back!',
                                    imageUrl: 'the-rock-chinese-the-rock.gif',
                                    imageWidth: 400,
                                    imageHeight: 200,
                                    imageAlt: 'Custom image',
                                  }));                        
                    
                        if(c === true)
                        {
                            index = this.parentElement.rowIndex;
                            table.deleteRow(index);
                        }
                    
                    
                    };
                
                }
    
    }

oks na lhat ;)
 
Last edited:

Similar threads

Popular Tags

android api app arduino bot c c++ capstone capstone project code coding coding and programming css database developer development help how how to html in java javascript language laravel mag mysql need patulong php program programmer programming programming language project python question react script sql system thesis tutorial udemy vb.net visual basic web web development website with

About this Thread

  • 8
    Replies
  • 518
    Views
  • 3
    Participants
Last reply from:
PHC - Naethan

New Topics

Popular On This Forum

Online statistics

Members online
1,155
Guests online
5,190
Total visitors
6,345
Back
Top