Retrieve text from li and pass to PHP

Question

Retrieve text from li and pass to PHP

Navigation

#1 by (2 votes)
#2 by (2 votes)

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 the "LI", set to a variable and that variable play to PHP, so I can handle a search. Follow codes. PS: HTML, CSS and PHP I handle until well, but the problem is JS.

1 - JS manipulating the 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 are doing something wrong, please correct it. Thanks in advance for your help!

php javascript

asked by anonymous 05.07.2017 / 17:32

2 answers

2

I have a pure javascript code taken from the JavaScript book 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>

Destination page

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

05.07.2017 / 18:00

How to make menu with different drawing? Remove duplicate dates by adding values

score 2 · Accepted Answer

The hidden element with selector "class = btn-select-input" 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 have to submit a form.

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

If you opt for the traditional, non-javascript form, you have to put 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

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