Jquery dynamic image change from selection

Question

Trying to create a nice dynamic selection process. There are two parts to the selection process: Choose category, then choose name. The form process works just fine. I then want to display an image based on the name chosen. I can't seem to figure it out, here's the code:

<form action="file.php" method="post">
    <select id="first-choice" name="cardset">
    <?php foreach ($data as $row): ?>
        <option><?=$row["name"]?></option>
    <?php endforeach ?>
    </select>
    <select id="second-choice" name="card">
        <option>Please choose from above</option>
    </select>
    <img src="" name="image-swap">

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script language=JavaScript >
        $(document).ready(function() {
            $("#first-choice").change(function() {
                $.get("getter.php", { choice: $(this).val() }, function(data) {
                    $("#second-choice").html(data);
                });
            });
        });

        $(document).ready(function() {
            $("#card").change(function() {
                var first = $("first-choice");
                var sec = $(this).val();

                $("#image-swap").html(src ? "<img src='/pics/" + first + sec + "'>" : "");
            });
        });
    </script>

I am trying to pull the image from pics/"first"/"sec".jpg

Answer 1

Two things:

You only need 1 document ready wrap:

$(document).ready(function(){
    $("#first-choice").change(function() {

       $.get("getter.php", { choice: $(this).val() }, function(data) {
            $("#second-choice").html(data);
        });
    });
    $("#card").change(function() {
        var first = $("first-choice");
        var sec = $(this).val();

        $("#image-swap").html(src ? "<img src='/pics/" + first + sec + "'>" : "");
    });
});

The second, non of your options have values, which is why it isn't passing.

<select id="first-choice" name="cardset">
    <?php foreach ($data as $row): ?>
        <option value="<?=$row["name"]?>"><?=$row["name"]?></option>
    <?php endforeach ?>
</select>

Given if the is correct. I've never used = is php to echo, normally I would do <?php echo $row["name"]; ?>.

Answer 2

Hard to tell without seeing the HTML, but . . .

var first = $("first-choice");

. . . is missing the .val() at the end. If you change it to this, it should get you much closer to what you are looking for:

var first = $("first-choice").val();

At the moment, you are trying to append the jQuery reference to the HTML option to a string value (sec).

UPDATE

Was looking a little further and found some other issues . . .

1) You are using an HTML img element, but you've given it a name attribute value of "image-swap":

<img src="" name="image-swap">

. . . and are trying to reference it with a jQuery "id" selector:

$("#image-swap")

In order for that selector to work, you must change the name attribute to and id attribute, like this:

<img src="" id="image-swap">

2) You appear to be attempting to update the src attribute of the img tag, but you don't have that quite right in your code:

$("#image-swap").html(src ? "<img src='/pics/" + first + sec + "'>" : "");

There are a couple of issues here:

• src does not exist as a variable, but you appear to be checking for its existence as one
• you want to update the src attribute of the img, but you are using the .html() method, which sets/gets the HTML content of a tag, not its attributes

To do what you appear to be wanting to do, you probably need to use this code:

$("#image-swap").attr("src", (first !== "" &&  + sec !== "") ? "pics/" + first + "/" + sec + ".jpg" : "");

That will update the src attribute with the image location, if neither of the selections has an empty value, or with "", if one of them does.

Answer 3

I figured out $("first-choice").val() and Try this,

$(document).ready(function(){
    $("#first-choice").change(function() {
    $.get("getter.php", { choice: $(this).val() }, function(data) {
        $("#second-choice").html(data);
    });
});


    $("#card").change(function() {
    var first = $("first-choice").val();
    var sec = $(this).val();

    $("#image-swap").html(src ? "<img src='/pics/" + first + sec + "'>" : "");
    });
});