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

st_facebook_large is a class, but you're looking for an id in your find function — S.Davis
– S.Davis, Commented Mar 30, 2018 at 20:12

Mladen Ilić · Accepted Answer · 2018-03-30 20:12:52Z

3

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

answered Mar 30, 2018 at 20:12

Mladen Ilić

1,7951 gold badge19 silver badges22 bronze badges

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

3 Comments

Santosh Over a year ago

Thank you for pointing my mistake. Its now adding fine. But still that share thing doesn't work with updated url. However I see the attribute is updated. Any idea ?

Mladen Ilić Over a year ago

I don't know what social_share_url does. I can only guess that something could be storing the attr value and not fetching it again on click. Btw, if my answer helped you it, i'd appreciate if you mark it as correct.

Santosh Over a year ago

Yes, it did help. Thanks.

Collectives™ on Stack Overflow

Update custom attribute from input value shows undefined

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related