Can We Use As A Form Element In Html?

Actually, I am using a list in which I am trying use my

element as a part of form. I am doing something like as shown bellow :-

Solution 1:

To do so, you need to add an event handler to the li or a parent container, save the item clicked and Ajax the result to the server, or build a form object in memory, or create a URL with the selections.

Here is an example that expects the search to be done on the SAME server as the page is on - I am using jQuery because it is the most convenient for what you are trying to do

I did not wire the Ajax in the live demo.

Live Demo

Suggested HTML

<ul id="search-option">
    <li data-option="buy" class="sel">inputBUY</li>
    <li data-option="rent">RENT/LEASE</li>
    <li data-option="pg">PG</li>
</ul>
<a href="#" id="searchLink">Search</a>
<div id="result"></div>

Suggested jQuery

$(function() { // when page loads
    $("#searchLink").on("click",function(e) { // when link clicked
        e.preventDefault(); // stop the click from any further action
        var option = $("#search-option li.sel").data("option"); // get the selected option
        $.post("search.php",{"option":option},function(data) { // post the option
            $("#result").html(data); // show the result
        });
    });
    $("#search-option li").on("click",function() { // when LI is clicked
        $(this)
         .addClass("sel")
         .siblings().removeClass("sel"); // Swap class
    });
});

Solution 2:

No, you must use form controls(inputs,select) in order to send data to the server or whatever place you want, not HTML tags

Solution 3:

The short, direct answer is no. However....

Often with this you will find some javascript attatched to the list items. When Clicked the javasctipt will update the hidden form field with the clicked value.

Also note that value is not a standard attribute of li

Here is an example of how to do this with jQuery..

Update your html with:

<input type="hidden" id="search-type" name="search-type" value="commercial">
<ul id="selType">
   <li name="search-option" id="buy" value="buy">inputBUY</li>
   <li name="search-option" id="rent" value="rent">RENT/LEASE</li>
   <li name="search-option" id="pg" value="pg">PG</li>
</ul>

And use the following (you will need jQuery and lean about $(document).ready

//Assign the value
$("#selType li").click(function(){
    $("#search-type").val($(this).attr("value"));
});

See it in action here: http://jsfiddle.net/Xcgw4/

You can also use plain javasript but for this demo I'll use the jquery library because it makes life easy.

You would also want to do something to indicate what has been clicked etc.

Solution 4:

You need to use proper form controls. Replace the li with a select like this:

<form action="index.php" method="post">
 <select name="search-option">
  <option value="buy">BUY</option>
  <option value="rent">RENT/LEASE</option>
  <option value="pg">PG</option>
 </select>
 <input type="submit" value="Submit" name="submit">
</form>

or a radio like this:

    <form action="index.php" method="post">
     <input type="purchaseType" name="buy" value="buy">BUY<br>
     <input type="purchaseType" name="rent" value="rent">RENT/LEASE<br>
     <input type="purchaseType" name="pg" value="buy">PG<br>
     <input type="submit" value="Submit" name="submit">
    </form>

Share