Getting value from span with jQuery

Question

Essentially what I'm trying to figure out is how to retrieve the value a span(id="camera_status") that's been populated with the name of a image after its been captured using phonegap.

The way I want it to work is that the image name will then be uploaded to the database along with the form information that's submitted. At the moment it seems to be reading the initial blank value before the span is populated with the image name. If there's anyone who know's how I can fix this i would be grateful.

HTML and Javascript of form page

<div>
  <input type="button" onclick="takePicture();" value="Take Picture" /><br/>
</div>
<div>
<div>
    <b>Status:</b> <span id="camera_status"></span><br>
    <b>Image:</b> <img style="width:240px;visibility:hidden;display:none;" id="camera_image" src="" />
</div>      
<div id="landmark-1" data-landmark-id="1">
<form id="uploadForm">
    <label for="email">
        <b>Email</b>
        <input type="email" id="email" name="email">
    </label>

    <label for="comment">
        <b>Comment</b></br>
        <input id="comment" name="comment" cols="30" rows="10"></textarea>
    </label>
    <input type="button" onclick="uploadPicture();" value="Upload New location" />  
    <input type="submit" value="Upload New location" />

    </form>

<script>
var spanValue = $('#camera_status').html()

$(function(){

$('#uploadForm').submit(function(){
    var landmarkID = $(this).parent().attr('data-landmark-id');
    var postData = $(this).serialize();

    $.ajax({
        type: 'POST',
        data: postData+'&lid='+spanValue,
        //change the url for your project
        url: 'save.php',
        success: function(data){
            console.log(data);
            alert('Your comment was successfully added');
        },
        error: function(){
            console.log(data);
            alert('There was an error adding your comment');
        }
    });

    return false;
 });
});

</div>
</div>
</div>

Wrap all of this in document.ready

Kevin Bowersox
– Kevin Bowersox

2013-05-03 18:23:51 +00:00
Commented May 3, 2013 at 18:23 — Kevin Bowersox
– Kevin Bowersox, Commented May 3, 2013 at 18:23

Mohamed AbdElRazek · Accepted Answer · 2013-05-03 18:23:03Z

7

Try .text() :

var spanValue = $('#camera_status').text();

answered May 3, 2013 at 18:23

Mohamed AbdElRazek

1,68414 silver badges18 bronze badges

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

Comments

adeneo · Accepted Answer · 2013-05-03 18:23:18Z

3

Get the spanValue when you're actually going to use it, and not outside the DOM ready function, before anything is loaded :

$(function(){
    $('#uploadForm').on('submit', function(e){
        e.preventDefault();
        var landmarkID = $(this).parent().data ('landmark-id'),
            postData   = $(this).serialize(),
            spanValue  = $('#camera_status').text()    

        $.ajax({
            type: 'POST',
            data: postData+'&lid='+spanValue,
            url: 'save.php'
        }).done(function(data) {
            console.log(data);
        });
     });
});

answered May 3, 2013 at 18:23

adeneo

319k29 gold badges410 silver badges392 bronze badges

1 Comment

user2236497 Over a year ago

Thank you so much! Knew it had to be something simple but just couldn't figure it out, cheers!

Collectives™ on Stack Overflow

Getting value from span with jQuery

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related