JS - insert form value into URL

Question

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="&amp;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>

so you're trying to keep /at even when directly editing the input? — CapitanFindus
– CapitanFindus, Commented Apr 29, 2020 at 14:54
you can get the value in your input field if you attach an id to the html element: <input name='model' type="text" value="iPhone " id="the-phone"><p> and in your change handler function var 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. — developer
– developer, Commented Apr 29, 2020 at 14:56
Yes, I need the au/ or at/ 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) — yello
– yello, Commented Apr 29, 2020 at 14:57

matthias_h · Accepted Answer · 2020-04-29 15:01:06Z

1

You can do it like this:

$('#foo-list').change(function() {
    var opt = $(this.options[this.selectedIndex]);
    var url = opt.attr('data-url');
    var model = $("input[name='model']").val().toLowerCase().replace(" ","-");
    $('#url').html('<a href="https://www.apple.com/'+url+'shop/buy-iphone/' + model + '" target="_blank"  >Apple product site</a>');      
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/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="&amp;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 id='url'></span><br>
</p>

answered Apr 29, 2020 at 15:01

matthias_h

11.4k9 gold badges24 silver badges40 bronze badges

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

2 Comments

matthias_h Over a year ago

@yello Glad that I was able to help :)

yello Over a year ago

Just a few notes: Works with jquery 3.3.1 - not sure about older versions. The model to URL works only when I input the model first, and not when I input the country first. (no problem for me). To create appends like iphone-11-pro I changed replace(" ","-"); to replace(\ \g ,"-"); so all white spaces get replace and not just he first one.

Collectives™ on Stack Overflow

JS - insert form value into URL

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related