Save Img Src to Javascript Variable

Question

I am trying to set the image src inside a hidden variable that is passed from my form. When I output the variable is "undefined". I am pretty new to Javascript and not sure what the problem could be. My error is on line:

document.sampleForm.image.value = "images/"+img.attr('src')+"";

Javascript:

$('tr', '#target').each(function () {
    var tr = $(this);
    html += '<center><tr>';
    $('td', tr).each(function () {
        var td = $(this);
        if (!td.is('td.header')) {
            var img = $('img', td);
            var text = $('textarea', td).val();
            html += '<td style="width: 33%;">';
            html += (img.length) ? '<img src="' + img.attr('src') + '" style="display: block; max-width: 100%;" />' : '<div style="width: 100%;"></div>';
            document.sampleForm.image.value = "images/"+img.attr('src')+""; 
            document.forms["sampleForm"].submit();
            html += '</td>';
        } 
    });
    html += '</tr></center>';
});

HTML:

<table id="target">
<form id="sampleForm" name="sampleForm" action="test.php" method="post">
    <tr><center>

        <td class="logo" colspan="3">
            <h3>Choose Header</h3>
          <div class="img-container"><input type="hidden" name="image" id="image" value=""></div>

        </td>

    </center>
    </tr>
    <tr>
    <td style="height:auto;">

    <?php

    $test = mysql_query("SELECT id, title FROM tmpl2");



    echo "<select class='image_select' id='logo_option' name='logo_option[]' multiple='multiple'>";


        while ($row = mysql_fetch_assoc($test))
    {
        echo "<option value='".$row[id]."'>$row[title]</option>";
    }   


    echo "</select>";



    ?>



    </td>
    </tr>


           <tr><center>

        <td class="logo" colspan="3">
                <h3>Choose Logo</h3>
          <div class="img-container"></div>

        </td>

    </center>
    </tr>
    <tr>
    <td style="height:auto;">
    <?php

    $test = mysql_query("SELECT id, title FROM tmpl2");

    echo "<select class='image_select' id='header_option' name='header_option[]' multiple='multiple'>";


        while ($row = mysql_fetch_assoc($test))
    {
        echo "<option value='".$row[id]."'>$row[title]</option>";
    }   


    echo "</select>";

    ?>
    </td>
    </tr>

</table>

Doing a submit inside a loop doesn't make sense. When you submit the form, the page reloads, and your script stops. — Barmar
– Barmar, Commented Nov 4, 2013 at 22:42
Use jquery function attr: $("your_input").val("images/"+img.attr('src')); for more details add your code — Sabri Aziri
– Sabri Aziri, Commented Nov 4, 2013 at 22:45
Barmar - Yes, that was a copy error. I have updated the code. Sabri - I have updated my post to show my HTML. — 626
– 626, Commented Nov 4, 2013 at 22:50

j0hnstew · Accepted Answer · 2013-11-04 22:56:26Z

1

The reason you are getting undefined is because

document.sampleForm.image.value = "images/"+img.attr('src')+"";

is not a property of the HTMLImageElement. You need .src .

document.sampleForm.image.src = "images/"+img.attr('src')+"";

but as @Barmar said you really should not be doing it like this.

answered Nov 4, 2013 at 22:56

j0hnstew

7098 silver badges25 bronze badges

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

1 Comment

626 Over a year ago

Is there any other way you suggest to save the image URL to a post variable? Using img.src does not work, it outputs a blank for me.

Collectives™ on Stack Overflow

Save Img Src to Javascript Variable

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related