Getting html class with PHP variable in javascript

Navigation
0

I'm trying to get the value of a select from jquery from the class, but this class has part of the value as a php variable.

Currently my code looks like this: 

echo '
  <select name="contarecebvenda" class="selects2'.$linha[cod].'" id="lista1" >
';

I'm trying to run a jquery with it however I do not know how to pass the value of that select to it.

I've tried the following code: 

$('.selects2<?$linha[cod]?>')

But as I imagined I did not get any success, does anyone have any suggestions for doing this?

    
asked by anonymous 23.02.2018 / 17:06

5 answers

1

An alternative solution is to put the name of the class that comes from PHP in the value of a <input type="hidden" /> and in JavaScript get the name of this class :

HTML: 

<input type="hidden" name="classeAuxiliar" id="classeAuxiliar" value="<?= $cod?>" />

<select name="select" class="select2<?= $cod?>" id="lista1">
   <option value="01">01</option>
</select>

JavaScript: 

var classeAuxiliar = $("#classeAuxiliar").val();
$(".selects2." +classeAuxiliar).select2();

The following is an example of an employee function: 

//Obtenho o nome da classe que está no valor do input hidden
var classeAuxiliar = $("#classeAuxiliar").val();

//Busco os elementos que pertencerem a classe selects2 e a Classe informada no input e atribuo o plugin select2().

$(".selects2." +classeAuxiliar).select2();
#lista1{
  width:200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" rel="stylesheet"/>




<!-- Aqui seria seu input com valor oriundo do PHP -->
<input type="hidden" name="classeAuxiliar" id="classeAuxiliar" value="teste" />

<!-- Aqui seria o seu select com a classe vinda do PHP -->
<select name="contarecebvenda" class="selects2 teste" id="lista1">
  <option value="1">Opção 1</option>
  <option value="2">Opção 2</option>
  <option value="3">Opção 3</option>
  <option value="4">Opção 4</option>
  <option value="5">Opção 5</option>
</select>
    
02.03.2018 / 15:09
1

Run the following: 

$linha = [ 0 => 'asdf', 1=> 'zxcv'];
$cod=0;
$('.selects2<?php echo $linha[$cod];?>');

results in: 

$('.selects2asdf') //seleciona o SELECT a partir da classe
    
23.02.2018 / 17:42
0

You could try catching it like this: 

$(function() {

	var selects = $('[class^="selects2"]');
  
  selects.each(function(index, element) {
 
  	alert(element.className);
  
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><selectname="contarecebvenda" class="selects210" id="lista1"></select>

<select name="contarecebvenda" class="selects211" id="lista2"></select>

<select name="contarecebvenda" class="selects212" id="lista3"></select>

Within the loop of the each method you can do the manipulation as you wish.

    
23.02.2018 / 18:27
0

So if your js is inline, you can use php inside the script tag, see how: 

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Untitled</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="author" href="humans.txt">
</head>
<body>
        <?php
        $cod = 23;
        ?>

        <select name="select" class="select2<?= $cod?>" id="item1">
            <option value="01">01</option>
        </select>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><scripttype="text/javascript">
            $('.selects2<?= $cod ?>').select2();
        </script>
</body>
</html>

Now, if your js is inside an external file, you can create a variable in the window and retrieve it in your file, like this:

HTML: 

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Untitled</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="author" href="humans.txt">
</head>
<body>
        <?php
        $cod = 23;
        ?>

        <select name="select" class="select2<?= $cod?>" id="item1">
            <option value="01">01</option>
        </select>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><scripttype="text/javascript">
            window.classeSelect = ".select2<?= $cod ?>";
        </script>
        <script src="script.js"></script>
</body>
</html>

JS: 

$(window.classeSelect).select2();
    
23.02.2018 / 18:56
-1

This seems very wrong, there is probably a more elegant solution to the problem. However, if this snippet is in a php file, you can use the following: 

$('.selects2'+<?= $linha[cod]?>+');
    
23.02.2018 / 17:30
Undefined when attempting to use the valid JSON received I wanted to add more than one permission on springSecurity roles