Skicka data i formulär, när data är presenterad i <li>

captaindoe · 2011-03-07, 16:13

Tjena,

Jag visar bilder i <li> format, och om man markerar en <li>, så vill jag att <li> value ska skickas vidare i formuläret.

PHP-kod:


			
<form name="view" class="rowElem" action="test.php" method="POST">

<h5>Click for single or drag for multiple choice(s)</h5>

<ul id="countryselect" class="selectable">

<li class="ui-state-default" 'title="Första alternativ" value="1" name="1"><img src="img/countries/1.png" width="24" height="24" alt="1" /></li>

/* massor av fler alternativ här */

</ul>



<div class="filterbox_button"><input name="apply" type="submit" value="Apply"></div>

</form>

Alltså, så skulle jag vilja på något sätt få det så att $_POST['1'] är "set".

Problemet är dock att när man trycker på Apply, så skickas inte value 1 om man har klickat på den bilden.

Jag har provat att använda hidden input boxar, men det hjälper ju såklart inte eftersom då blir alla set, även om användaren inte har tryckt på den bilden.

Jag har också provat att använda <input type="image"> men funkar inte bra heller (estetiskt. blir inte lika snyggt eftersom det inte funkar med css klassen).

Har ni några förslag hur man kan gå tillväga för att få datan skickad? Anledningen till att jag har det i <li> är för att jag vill visa alternativen på ett snyggt sätt.

Tack

Kekke · 2011-03-07, 16:49

Har du försökt med jQuery + ajax?
Jag är inte helt säker på hur du vill ha det och hur det ska fungera, men känns som om det borde vara lättast att lösa igenom det.

captaindoe · 2011-03-07, 17:00

Det är ju typiskt att problemet blir löst nästan direkt efter man har skrivit om det här..
Jag återkommer om jag får några ytterligare problem.

KarlRoos · 2011-03-08, 11:04

Citat:

Ursprungligen postat av captaindoe

Det är ju typiskt att problemet blir löst nästan direkt efter man har skrivit om det här..
Jag återkommer om jag får några ytterligare problem.

Skriv gärna hur du löste det också.

captaindoe · 2011-03-08, 17:51

Javascript lösning. Inte den finaste men funkar.

PHP-kod:


			
    <script>



    $(function() {



        $( "#selectable" ).selectable({



            stop: function() {



                var result = $( "#select-result" ).empty();



                $( ".ui-selected", this ).each(function() {



                    var index = $( "#selectable li" ).index( this );



                    result.append( "<input type='hidden' name='country" + ( index + 1 ) + "' />" );



                });



            }



        });



    });



    </script>



    <body>



    







<form action="">



<div class="demo">







<p id="feedback">



    <span id="select-result"></span>



</p>







<ol id="selectable">



    <li class="ui-state-default">1</li>



    <li class="ui-state-default">2</li>



    <li class="ui-state-default">3</li>



    <li class="ui-state-default">4</li>



    <li class="ui-state-default">5</li>



    <li class="ui-state-default">6</li>



    <li class="ui-state-default">7</li>



    <li class="ui-state-default">8</li>



    <li class="ui-state-default">9</li>



    <li class="ui-state-default">10</li>



    <li class="ui-state-default">11</li>



    <li class="ui-state-default">12</li>



</ol>







</div><!-- End demo -->



<input name="skicka" type="submit" class="ui-button-text" value="skicka">



</form>

KarlRoos · 2011-03-08, 23:41

Jag skulle byta ut ol-listan mot:

PHP-kod:


			
<?php for($i = 1; $i < 13; $i++):?>
<li class="ui-state-default"><?php echo $i;?></li>
<?php endfor;?>

Känns onödigt att skriva ut alla alternativ manuellt!

captaindoe · 2011-03-09, 00:37

Jo absolut

Det har du helt rätt i.
Nu är det dock inte så att jag har siffror i ol lista. Jag gjorde endast så för att enkelt visa hur problemet blev löst.

Aktiva användare som för närvarande tittar på det här ämnet: 1 (0 medlemmar och 1 gäster)

Menu

Skicka data i formulär, när data är presenterad i <li>