CODEWITHSUNDEEP
javascriptphpjqueryajax
minion
minion

Reputation: 151

Cannot get select value using AJAX

I have select box with some values and using AJAX to send data to php and display those data inside <div> , Here is my code I don't know why this is not working.

When I used button to get value from It was working. I have tried multiple tutorials and red a lot of question regarding AJAX and select box.

I tried making funciton and inside select calling it with onchange

product.php

<div id="input-option232">
<div class="checkbox">


<div class="custom-select" style="width: 200px">
<form method="get" name="rate">

<select name="rate2" id="rate2">

<option value="0">Broj Rata:</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</form>
</div>

</div>
<div id="ratice"></div> // I WANT TO DISPLAY HERE
</div>

aj-select.js

$("#rate2").on('change', function() {
        var level = $('#rate2').val();
        if(level){
            $.ajax ({
                type: 'GET',
                url: 'rate.php',
                data: 'rate='+level,
                success : function(data) {
                    $('#ratice').html(data);
                }
            });
        }
    });

rate.php

<?php
if(isset($_GET['rate'])){
    echo $rate = $_GET['rate'];
}

?>

select.js

var x, i, j, selElmnt, a, b, c;
/*look for any elements with the class "custom-select":*/
x = document.getElementsByClassName("custom-select");
for (i = 0; i < x.length; i++) {
  selElmnt = x[i].getElementsByTagName("select")[0];
  /*for each element, create a new DIV that will act as the selected item:*/
  a = document.createElement("DIV");
  a.setAttribute("class", "select-selected");
  a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
  x[i].appendChild(a);
  /*for each element, create a new DIV that will contain the option list:*/
  b = document.createElement("DIV");
  b.setAttribute("class", "select-items select-hide");
  for (j = 0; j < selElmnt.length; j++) {
    /*for each option in the original select element,
    create a new DIV that will act as an option item:*/
    c = document.createElement("DIV");
    c.innerHTML = selElmnt.options[j].innerHTML;
    c.addEventListener("click", function(e) {
        /*when an item is clicked, update the original select box,
        and the selected item:*/
        var y, i, k, s, h;
        s = this.parentNode.parentNode.getElementsByTagName("select")[0];
        h = this.parentNode.previousSibling;
        for (i = 0; i < s.length; i++) {
          if (s.options[i].innerHTML === this.innerHTML) {
            s.selectedIndex = i;
            h.innerHTML = this.innerHTML;
            y = this.parentNode.getElementsByClassName("same-as-selected");
            for (k = 0; k < y.length; k++) {
              y[k].removeAttribute("class");
            }
            this.setAttribute("class", "same-as-selected");
            break;
          }
        }
        h.click();
    });
    b.appendChild(c);
  }
  x[i].appendChild(b);
  a.addEventListener("click", function(e) {
      /*when the select box is clicked, close any other select boxes,
      and open/close the current select box:*/
      e.stopPropagation();
      closeAllSelect(this);
      this.nextSibling.classList.toggle("select-hide");
      this.classList.toggle("select-arrow-active");
    });
}
function closeAllSelect(elmnt) {
  /*a function that will close all select boxes in the document,
  except the current select box:*/
  var x, y, i, arrNo = [];
  x = document.getElementsByClassName("select-items");
  y = document.getElementsByClassName("select-selected");
  for (i = 0; i < y.length; i++) {
    if (elmnt === y[i]) {
      arrNo.push(i);
    } else {
      y[i].classList.remove("select-arrow-active");
    }
  }
  for (i = 0; i < x.length; i++) {
    if (arrNo.indexOf(i)) {
      x[i].classList.add("select-hide");
    }
  }
}
/*if the user clicks anywhere outside the select box,
then close all select boxes:*/
document.addEventListener("click", closeAllSelect);

CSS

<style type="text/css">
         body{font-family:'Roboto', sans-serif}
        .custom-select {
  position: relative;
  font-family: Arial;
}
.custom-select select {
  display: none; /*hide original SELECT element:*/
}
.select-selected {
  background-color: #f4a137;
}
/*style the arrow inside the select element:*/
.select-selected:after {
  position: absolute;
  content: "";
  top: 14px;
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #fff transparent transparent transparent;
}
/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
  border-color: transparent transparent #fff transparent;
  top: 7px;
}
/*style the items (options), including the selected item:*/
.select-items div,.select-selected {
  color: #ffffff;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
  user-select: none;
}
/*style items (options):*/
.select-items {
  position: absolute;
  background-color: #f4a137;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
}
/*hide the items when the select box is closed:*/
.select-hide {
  display: none;
}
.select-items div:hover, .same-as-selected {
  background-color: rgba(0, 0, 0, 0.1);
}
    </style>

Upvotes: 2

Views: 995

Answers (4)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

So... You use a plugin to obtain a "fancier" select...

That plugin creates some new DOM elements... So the user do not really interact with the select of your original markup. It is only used to create the new ones... Then hidden.

Here is what's created as siblings of your <form>:

<div class="custom-select" style="width: 200px">
  <form method="get" name="rate">

    <select name="rate2" id="rate2">

      <option value="0">Broj Rata:</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
      <option value="11">11</option>
      <option value="12">12</option>
    </select>
  </form>
  <div class="select-selected">
    Broj Rata:
  </div>
  <div class="select-items select-hide">
    <div>Broj Rata:</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
  </div>
</div>

So we now need to use another selector to capture the user interaction.

Replace:

$("#rate2").on('change', function() {

with

$("[name='rate']+.select-selected+.select-items").on("click",function(){

The + sign in the selector is an "adjacent sibling selector". It targets the last one IF it immediately follows the previous (as a sibling in DOM).

And that makes the trick here very well.

CodePen

Upvotes: 1

msg
msg

Reputation: 8161

The following snippet is working, so the problem must be either on the ajax call or the php script itself. Check the Network pane on the DevTools to see what's being sent to the server.

$("#rate2").on('change', function() {
  var level = $('#rate2').val();
  if (level) {
    $('#ratice').html(level);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="input-option232">
  <div class="checkbox">
    <div class="custom-select" style="width: 200px">
      <form method="get" name="rate">
        <select name="rate2" id="rate2">
          <option value="0">Broj Rata:</option>
          <option value="2">2</option>
          <option value="3">3</option>
          </select>
      </form>
    </div>
  </div>
  <div id="ratice"></div>
</div>

Upvotes: 0

Shidersz
Shidersz

Reputation: 17190

Try next modifications, and check the developer console for messages in order to get some debugging.

aj-select.js

$("#rate2").on('change', function()
{
    var level = $('#rate2').val();
    console.log("Selected level is : " + level);

    if (level < 0) return;

    $.ajax ({
        type: 'GET',
        url: 'rate.php',
        dataType: 'json',
        data: {'rate':level},
        success: function(data)
        {
            console.log("SUCCESS - data is: " + data);
            $('#ratice').html(data);
        },
        error: function(jqXHR, textStatus, errorThrown)
        {
           console.log("ERROR: " + textStatus + " " + errorThrown);
        }
    });
});

rate.php

<?php
    if (isset($_GET['rate']))
    {
        echo json_encode($_GET['rate']);
    }
?>

Upvotes: 0

ASM
ASM

Reputation: 169

Change the value of the data property to object data: {'rate':level} 

    $("#rate2").on('change', function() {
        var level = $('#rate2').val();
        if(level){
            $.ajax ({
                type: 'GET',
                url: 'rate.php',
                data: {'rate':level},
                success : function(data) {
                    $('#ratice').html(data);
                }
            });
        }
    });


 <?php
    if(isset($_GET['rate'])){
       $rate = $_GET['rate'];
       echo $rate;
    }

 ?>

Upvotes: 0

Related Questions