Retrieve text from <li> and move to PHP

Asked

Viewed 640 times

2

I’m starting in web development, I have the logic of how to do things, but the problem is implementation. I have a "UL" being populated by database, I would like to know how I capture the selected value of "LI", game for a variable and this variable play for PHP, so I can handle a search. It follows codes. PS: HTML, CSS and PHP I know it well, but the problem is JS.

1 - JS handling combo: 

    $(document).ready(function () {
    $(".btn-select").each(function (e) {
        var value = $(this).find("ul li.selected").html();
        if (value != undefined) {
            $(this).find(".btn-select-input").val(value);
            $(this).find(".btn-select-value").html(value);
        }
    });
});

$(document).on('click', '.btn-select', function (e) {
    e.preventDefault();
    var ul = $(this).find("ul");
    if ($(this).hasClass("active")) {
        if (ul.find("li").is(e.target)) {
            var target = $(e.target);
            target.addClass("selected").siblings().removeClass("selected");
            var value = target.html();
            $(this).find(".btn-select-input").val(value);
            $(this).find(".btn-select-value").html(value);
        }
        ul.hide();
        $(this).removeClass("active");
    }
    else {
        $('.btn-select').not(this).each(function () {
            $(this).removeClass("active").find("ul").hide();
        });
        ul.slideDown(300);
        $(this).addClass("active");
    }
});

$(document).on('click', function (e) {
    var target = $(e.target).closest(".btn-select");    
    if (!target.length) {
        $(".btn-select").removeClass("active").find("ul").hide();
    }
});

2 - PHP populating combo:

<label for="exampleInputName2">Cargo do Colaborador</label>
<a class="btn btn-default btn-select">
                <input type="hidden" class="btn-select-input" id="" name="" value="" />
                <span class="btn-select-value">Selecione o cargo (opcional)</span>
                <span class='btn-select-arrow glyphicon glyphicon-chevron-down'></span>
                <ul>

                    <?
                    $sql="SELECT DISTINCT cargo FROM colaborador WHERE (unidade = 2) or (unidade = 1) order by cargo";

                    $query = mysql_query($sql);
                    if(mysql_num_rows($query)){
                      while($res=mysql_fetch_assoc($query)){

                       $cargo = $res['cargo'];
                        echo "<li id='$cargo'>$cargo</li>";
                      }
                    }

                    else{
                    echo "<li>Nenhum Setor cadastrado!</li>";
                    }                   
                    ?>
                    <!--se quiser um item selecionado, só colocar no LI - class="selected"-->
                </ul>
            </a>

If you’re doing something wrong, please correct it. Thanks for your help!

php javascript

  • What would that be input[type=hidden] in HTML? Already to store the selected position? And why is this entire code in an element a? I saw no logic in it.

  • Hello Anderson, to be honest, I used a code ready from the internet, so I’m not sure what this input is for.

  • To be honest, then you’re getting it wrong. Nothing against getting ready-made codes (as long as they are free), but look for what these codes do before using.

  • This element A defines the style of the button, since Bootstrap is used. Thanks for the tip. I’ll try to understand it.

2 answers

2


The hidden element with "class=btn-select-input" selector receives the chosen value.

<input type="hidden" class="btn-select-input" id="" name="" value="" />

The Javascript snippet that assigns the value to the element:

    var value = $(this).find("ul li.selected").html();
    if (value != undefined) {
        $(this).find(".btn-select-input").val(value); // Esse aqui

There is no form in the codes you posted.

To send the information to the backend (php), you will need to submit a form.

You can do it the traditional way <form action="bababa">coisa e tal</form> or using Ajax (xmlhttprequest).

If you choose the traditional way, without using javascript, you will have to place the hidden element inside a <form> and set a name for that element and add a Submit button.

Example:

<form action="pagina.php" method="POST">
<input type="hidden" class="btn-select-input" id="" name="cargo" value="" />
<input type="submit" value="send" />
</form>

In PHP, just request the parameter

if (isset($_POST['cargo'])) {
    echo $_POST['cargo'];
}

  • Thanks for the clarification Daniel, now I managed to understand and it worked super well :D

2

I have a pure javascript code taken from the book Javascript the Bible

var isNav4 = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) == 4)
var isNav4Min = (navigator.appName == "Netscape" && 
	parseInt(navigator.appVersion) >= 4)
var isIE4Min = (navigator.appName.indexOf("Microsoft") != -1 && 
	parseInt(navigator.appVersion) >= 4)

function showSelection() {
	if (isNav4Min) {
		document.forms[0].selectedText.value = document.getSelection()
	} else if (isIE4Min) {
		if (document.selection) {
			document.forms[0].selectedText.value = document.selection.createRange().text
			event.cancelBubble = true
		}
	}
}
if (isNav4) {
	document.captureEvents(Event.MOUSEUP)
}
document.onmouseup = showSelection

document.write ("Selecione o resultado da busca");
<ul>
	<li id='manda-chuva'>Manda Chuva</li>
	<li id='diretor'>diretor</li>
	<li id='gerente'>gerente</li>
	<li id='chefe'>chefe</li>
	<li id='indio'>indio</li>
</ul>



<form name="MeuForm" action="Pagina Destino" target="_top" method="post">
<input type="text" name="selectedText">
<input type="submit" value="enviar">
</form>

Pagina Destino

if (isset($_POST['selectedText"'])) {
 $cargo = $_POST['selectedText"'];
}

Browser other questions tagged php javascript

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