javascriptjqueryfacebook-sharer

Update custom attribute from input value shows undefined


This post has a similar issue as mine. But still, it doesn't help in my case.

I have a textbox where I am allowing user to paste or enter url. And when the share button is click it will share that url on textbox.

<div class="sharewrapurl">
    <div id="shareurl_validation" style="display: none"> </div>
    <input type="text" id="shareviaurl_url" class="textbox_with_url" name="shareviaurl_url" placeholder="Paste URL here.">
    <div class="shareurlbutton">
        <span id="fb_ut_urlshare" style="width:100px;"><span class="st_facebook_large" st_url="http://santosh-shah.com" st_title="#DVDNation #ad #DVD20" onclick="social_share_url(appConfig.FacebookPostWidgetConfigId)"></span></span>
        <span id="tw_ut_urlshare" style="width:100px;"><span class="st_twitter_large" st_url="s" st_title="#DVDNation #ad #DVD20" onclick="social_share_url(appConfig.TwitterPostWidgetConfigId)"></span></span>
    </div>
    <!-- /.shareurlbutton -->
</div>

If I click directly the facebook share then it will share my domain name that is in st_url but I want to update that attribute with input box value.

$('#shareviaurl_url').on('input propertychange paste', function() {
    var url = $("#shareviaurl_url").val();
    $("#shareurlbutton").find("#st_facebook_large").attr("st_url",url);
    console.log($("#shareurlbutton").find("#st_facebook_large").attr("st_url"));//returns undefined.
});

Solution

  • You are using id selectors (#) instead of class selectors (.). Here is working version:

    $('#shareviaurl_url').on('input propertychange paste', function() {
        var url = $('#shareviaurl_url').val();
        $('.shareurlbutton').find('.st_facebook_large').attr('st_url', url);
        console.log($('.shareurlbutton').find('.st_facebook_large').attr('st_url'));
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="sharewrapurl">
        <div id="shareurl_validation" style="display: none"> </div>
        <input type="text" id="shareviaurl_url" class="textbox_with_url" name="shareviaurl_url" placeholder="Paste URL here.">
        <div class="shareurlbutton">
            <span id="fb_ut_urlshare" style="width:100px;"><span class="st_facebook_large" st_url="http://santosh-shah.com" st_title="#DVDNation #ad #DVD20" onclick="social_share_url(appConfig.FacebookPostWidgetConfigId)"></span></span>
            <span id="tw_ut_urlshare" style="width:100px;"><span class="st_twitter_large" st_url="s" st_title="#DVDNation #ad #DVD20" onclick="social_share_url(appConfig.TwitterPostWidgetConfigId)"></span></span>
        </div>
    </div>

    Cheers. :)