Taking html class with PHP variable in javascript

Asked

Viewed 273 times

0

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

Currently my code is like this:

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

I’m trying to run a jquery with it but I don’t know how to pass the value of this select to it.

I’ve tried the following code:

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

But as I imagined I had no success, someone has some suggestion to do this?

  • At what point do you want to take this class? What would be the purpose?

  • The purpose would be to run the plugin Select2, in case I am running using the class that varies according to the $line [Cod].

5 answers

1


An alternative solution is to name the class that comes from PHP in the value of a <input type="hidden" /> and in the 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();

Below is an example decomo would work:

//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>

<script src="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>

  • I believe I should not but this "computational device" worked in my code with the following modification: I put everything within the value of the auxiliary class : value=". selects2'. $Cod. '"; and then when applying to JS I called only the auxiliary class: $(classeAuxiliar). Select2(); but I believe that I must be going through some error in my code for the other more conventional methods not to work, finally it was worth the idea!

  • It’s good that you helped, there are other ways of solution. I chose this because I personally do not think it is right to put the php in the javascript

  • I also find it a little inconvenient, but an extra input generates more work when it comes to maintaining the code, or even reading it...

1

Perform the following:

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

results in:

$('.selects2asdf') //seleciona o SELECT a partir da classe
  • Sorry, but I did not understand the code very well, $line [Cod] would be just a variable that receives "infinite" codes, so I understand you suggested some kind of control, but this would be impossible since they are generated at all times...

  • I’m not sure I understand what you thought I suggested as "some kind of control" Hehe. Let’s see: if you refer to the array and initialization of $cod=0 , was just to test the example in a php file. As a matter of fact, I risked an answer, but I think your question needed a little more clarification. Maybe post the code with your PHP and Javascript . The reply from @Luizfelipe , which followed mine, goes in the same direction as what I wrote. Anything, give more details.

  • now understood, in my case this select is inside a foreach in php, where each loop has a value for the [Cod] line, now that I checked the source, the value is correct in both class and JS code, but only the script with the last value of the loop works correctly. even though all values are correct...

0

You could try taking it this way:

$(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>
<select name="contarecebvenda" class="selects210" id="lista1"></select>

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

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

Inside the method repeat loop each you can do the handling as you want.

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>
        <script type="text/javascript">
            $('.selects2<?= $cod ?>').select2();
        </script>
</body>
</html>

Now, in case your js is inside an external file, you can create a variable in the window and recover it in your file thus:

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>
        <script type="text/javascript">
            window.classeSelect = ".select2<?= $cod ?>";
        </script>
        <script src="script.js"></script>
</body>
</html>

JS:

$(window.classeSelect).select2();

-1

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

$('.selects2'+<?= $linha[cod]?>+');
  • It is inside a php file, but this code does not seem to work even with adjustments.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.