Update custom attribute from input value shows undefined

Question

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.
});

Answer 1

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. :)