Select option value add to querystring

Question

How can I get the value of a selected option value and put in into url querystring

<td><select name="rate" id="rating" class="form-control col-sm-4">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select></td>
<td><a href="server.php?rate_id='.$table["rating_id"].'?r='[I want to put it here]' " class="btn btn-info" >Rate</td>

I tried using function but putting it in, cause wrong syntax

$(document).ready(function() {
    $('#rating').on('change', get_value_rate);
});

function get_value_rate() {
    var selected = $('#rating').val();
    return selected;
}

I use alert() function and It get the value but after putting do_something() on query string it doesn't work 'return' syntax error as said.

jo_va · Accepted Answer · 2019-02-10 13:49:37Z

2

Here is how I would do it with plain JavaScript.

You can use the querySelector() function to query elements in the DOM and get the select value, build the url using template strings and then set the href attribute on your anchor tag.

You can attach the event listener in HTML:

<select ... onchange="onChange()">

Or using the addEventListener() function:

select.addEventListener('change', onChange);

Here is the MDN doc on querySelector and addEventListener.

If you want to bind the rating id from php, I suggest to bind a data attribute on the link and later use that attribute to construct the href from JavaScript. I named this attribute data-rating-id and it can be set like this with PHP:

<a href="#" data-rating-id="<?php echo $table["rating_id"] ?>">Rate</a>

const select = document.querySelector('#rating');
const link = document.querySelector('#link');
const ratingId = link.getAttribute('data-rating-id');

// Attach the event handler
select.addEventListener('change', onChange);

// Set the initial href for the link
setRateLink(select.value);

// Event handler
function onChange() {
  setRateLink(select.value);
}

// Function to generate URL and set href
function setRateLink(value) {
  const href = `server.php?rate_id=${ratingId}?r=${value}`;
  link.href = href;
  console.log(`href is "${href}"`);
}

<select name="rate" id="rating" class="form-control col-sm-4">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>
<a id='link' href="#" class="btn btn-info" data-rating-id="123">Rate</a>

edited Feb 10, 2019 at 13:49

answered Feb 10, 2019 at 13:03

jo_va

14.1k3 gold badges25 silver badges49 bronze badges

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

2 Comments

Wendell Casul Over a year ago

I add [rating_id] of data-id attribute of select so i can display it also because it says that rate_id is unidentified and it works , but just asking about the code const table = {}; cause i got confused. Sorry :(

jo_va Over a year ago

yes sorry, I removed that code when I saw it was set from php. This is why I added the data attribute, so you can set the href while keeping the value set form php in the template

kami s · Accepted Answer · 2019-02-10 14:43:08Z

0

use jquery and get the value of a selected option value and put in into url

<td><select name="rate" id="rating" class="form-control col-sm-4">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select></td>
<td><a class="btn btn-info"  id ="link">Rate</a></td>

$("#rating").change(function(){

val = $(this).val();

$("#link").attr("href", "server.php?rate_id="+val);

})

answered Feb 10, 2019 at 14:43

kami s

114 bronze badges

Collectives™ on Stack Overflow

Select option value add to querystring

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related