I want to create a clickable URL, it's a bit beyond my JS knowledge.
The target URL is i.e.: https://www.apple.com/at/shop/buy-iphone/iphone-se
The created at/ - works fine. I did manage to change the i.e. iPhone SE string to iphone-se but I struggle to put (append) the iphone-se string into the URL string. So both are working, but not together.
This the current status:
$('input').keyup(function(){ $('.model').html($(this).val().toLowerCase().replace(" ","-")); }); $('#foo-list').change(function() { var opt = $(this.options[this.selectedIndex]); var url = opt.attr('data-url'); $('#url').html('<a href="https://www.apple.com/'+url+'shop/buy-iphone/" target="_blank" >Apple product site</a>'); });<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <select class="paselect" id="foo-list"> <option data-country="Australia" data-iso="AUD" data-cur="A$" data-url="au/" >Australia</option> <option data-country="Austria" data-iso="EUR" data-cur="&euro;" data-url="at/" >Austria</option> <option data-country="Brazil" data-iso="BRL" data-cur="B$" data-url="br/" >Brazil</option> </select> <input name='model' type="text" value="iPhone " ><p> <span class="model"></span><br> <span id='url'></span><br>
/ateven when directly editing the input?<input name='model' type="text" value="iPhone " id="the-phone"><p>and in your change handler functionvar phone = $('#the-phone').val(), but you would need to map this to the value you want in the URL string. You are probably better off making this a dropdown list, with the text value, of each option, being friendly display text, and the value of the option, the string you want in your URL.au/orat/in the URL. But that part works fine. The append part is the trouble. I want to create the link with out a page refresh (otherwise I would use the more familiar php)