Load the right Json file into Html Form with Php & Jquery

Question

I have Html Form variables that get stored in a FirstName.json in a directory called SavedPB .

<form action="save_json.php" method="post">
  First name: <input type="text" name="firstname" /><br />
  Last name: <input type="text" name="lastname" /><br /><br />
  <input type="submit" id="submit" value="Send" />
</form>

I list the files in that directory with the following code:

<?php

if ($handle = opendir('SavedPB')) {

    while (false !== ($entry = readdir($handle))) {

        if ($entry != "." && $entry != "..") {

          $entry = substr($entry, 0, strlen($entry) - 5);

            echo "
            <tr>

            <td id=\"cel1\">$entry\n</td>

            <td id=\"cel1\"><button id=\"btnLoad\">Load Json</button></td>   <br />"

            ;
        }
    }

    closedir($handle);
}

?>

This php script removes the .json extention from the view and it has a button after each found file.

The button fires off a jquery script to load the stored json variables back into the form fields:

$(document).ready(function() {
  $("#btnLoad").click(function(){

    $.getJSON("SavedPB/FirstName.json", function(data) {
      $('input[name="firstname"]').val(data["firstname"]);
      $('input[name="lastname"]').val(data["lastname"]);
    });

  });
});

I'm facing 2 problems that i can't seem to resolve .

The php echoed list

when clicked on the button next to echoed list item I need to get the variable of the name next to the button.

Example :

FirstName1       button
Firstname2       button

if clicked on the button next to FirstName2 i need the name variable to be changed in the jquery script to be set to $.getJSON("SavedPB/FirstName2.json", function(data)

It seems to load the variables back into the form fields only when I hit the button next the first in the list

If i click the button next to Firstname1 it loads the json back into the form but not when i click the button next to FirstName2

Dave Goten · Accepted Answer · 2015-02-11 15:32:56Z

2

A lot of your issues are coming from your PHP generating multiple elements with the same ID

if ($handle = opendir('SavedPB')) {

    while (false !== ($entry = readdir($handle))) {
        if ($entry != "." && $entry != "..") {
          $entry = substr($entry, 0, strlen($entry) - 5);

            echo "
                <tr>
                    <td class=\"celLabel\">$entry\n</td>
                    <td class=\"celButton\">
                        <button class=\"btnLoad\">Load Json</button>
                    </td>   
                </tr>";
        }
    }

     closedir($handle);
}

then your jQuery script becomes, then each of your buttons will work to answer your question #2

$(document).ready(function() {
  $(".btnLoad").click(function(){


    $.getJSON("SavedPB/FirstName.json", function(data) {
      $('input[name="firstname"]').val(data["firstname"]);
      $('input[name="lastname"]').val(data["lastname"]);
    });

  });
});

Finally, I'm not sure if you meant $entry is your FirstName1 variable you're trying to access but you can get that this way through jQuery again as

  $(".btnLoad").click(function(){
    var yourVar = $(this).closest('.cellLabel').html();

    $.getJSON("SavedPB/FirstName.json", function(data) {
      $('input[name="firstname"]').val(data["firstname"]);
      $('input[name="lastname"]').val(data["lastname"]);
    });

  });

Edit regarding comments below

    var yourVar = $(this).closest('.cellLabel').html();

or

    var yourVar = $(this).closest('.cellLabel').text();

Will get the value of your $entry . "\n" PHP variable. To simplify things you can remove the "\n" from your PHP. If $entry is where you keep your FirstName value then you can do

$.getJSON("SavedPB/" + yourVar + ".json", function(data) {

But a cleaner/nicer way to do this is to give your button a data-value or some other pseudo-attribute and have that contain your data like this in PHP:

<button class=\"btnLoad\" data-value=\"$entry\">Load Json</button>

then in your javascript do

$.getJSON("SavedPB/" + $(this).attr('data-value') + ".json", function(data)

And then you don't have to rely on the value of a completely unrelated table cell that may or may not have additional formatting/text added to it.

edited Feb 11, 2015 at 15:32

answered Feb 10, 2015 at 16:23

Dave Goten

7014 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kevin G Over a year ago

awesome, classic mistake ; the class instead of ID did make the buttons work . To shed some light on the final question : $.getJSON("SavedPB/??????.json", function(data) { $('input[name="firstname"]').val(data["firstname"]); $('input[name="lastname"]').val(data["lastname"]); }); where the question marks are added in the code, the variable off the name in front of the button should be added So could this be done by what you previously suggested ?

Dave Goten Over a year ago

@user1443063 Edited the answer based on what you've given, hope that answers your question fully.

Collectives™ on Stack Overflow

Load the right Json file into Html Form with Php & Jquery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related