Markerade link-items lagras med värde

PHPportalen Forum Index » HTML/CSS/JavaScript/Design
Lägg ett bokmärke på hela tråden
Skapa nytt inlägg   Svara på inlägget
Visa föregående ämne :: Visa nästa ämne  
Startad av: Meddelande
minero



Medlem i: 4125 dagar

Status: Offline



#742890
Inlägg Skrivet: 2020-12-26 20:38      Ämne: Markerade link-items lagras med värde Citera

Hej!
Jag brottas med att skapa en horisontell länk-lista där man ska kunna markera ett av valen och sedan, utan att lämna sidan, gå till nästa liknande lista för att markera ett annat val och slutligen skicka iväg de två valda värdena med ett formulär.

Tänk er att man väljer man eller kvinna på rad ett och ett värde mellan 1 och 5 på rad 2 - och jag vill inte använda mig av checkboxar/ratioknappar.

Jag fastnarbåde i hur man markerar en länk (växlar mellan två css-stilar) och sedan lagras värdet. Förstår ni hur jag menar och har några tips? ☺️

Förstår att det är JavaScript för markeringen och php för att spara respektive värde i databasen vid submit.

Tack på förhand
 
Till toppen på sidan
Visa användarprofil Skicka privat meddelande
Peppe L-G



Medlem i: 5161 dagar
Från: Mullsjö
Status: Offline



#742891
Inlägg Skrivet: 2020-12-29 21:19      Ämne: Re: Markerade link-items lagras med värde Citera

minero skrev:
jag vill inte använda mig av checkboxar/ratioknappar.


Du bör nog använda radio-knappar för att hålla koll på vad användaren har gjort för val. Men du kan du kan använda CSS för att gömma själva radio-knappen, och for-attributet för att klicka på ett annat element för att toggla knappen (trots att den inte syns).

https://stackoverflow.com/a/29346555/2104665

Och som du skrev får du sedan använda JavaScript för att dölja och visa nästa rad beroende på användarens val. Men du får nog ställa någon mer specifik fråga om vad du vill ha hjälp med.
 
Till toppen på sidan
Visa användarprofil Skicka privat meddelande MSN Messenger
minero



Medlem i: 4125 dagar

Status: Offline



#742898
Inlägg Skrivet: 2021-01-23 22:41      Ämne: Citera

Tack för input Peppe!

Jag är ute efter att skapa följande beteende: http://www.golfirl.com/exempel.jpg

Dvs, markerade ikoner har ett värde, i detta fall 2 och 1. Dessa två värden vill jag lagra i min db när jag trycker på spara. För att båda skall lagras behöver användaren se att de är markerade, vilket då blir via javascript.

Jag har bara kommit halvägs (markerar när man hovrar) på javascript/css-delen och vet inte hur jag skall knyta ihop det med html och php för att lagra det.

KOD:
1:
         <ul>
2:
  <li>Antal 1<br>
3:
    <input type="radio" name="input1" id="yes1" value="1" checked="checked">
4:
    <label for="yes1">1</label> &ensp;&ensp;
5:
    <input type="radio" name="input1" id="no1" value="2">
6:
    <label for="no1">2</label><br>
7:
  </li>
8:
  <li>Antal 2<br>
9:
    <input type="radio" name="input2" id="yes2" value="3" checked="checked">
10:
    <label for="yes2">3</label> &ensp;&ensp;
11:
    <input type="radio" name="input2" id="no2" value="4">
12:
    <label for="no2">4</label><br><br></li>
13:
</ul>


KOD:
1:
function radio1Hover(){
2:
document.getElementById("ingredients").style.fontSize = "300%";
3:
}
4:
 
5:
function radio1Normal(){
6:
document.getElementById("ingredients").style.fontSize = "100%";
7:
}


KOD:
1:
$input_alias = strip_tags($_SESSION['inloggad_alias']);
2:
$input_alias = mysql_real_escape_string($input_alias);
3:
 
4:
$input_first = strip_tags($_POST['input_first']);
5:
$input_first = mysql_real_escape_string($input_first);
6:
 
7:
$input_second = strip_tags($_POST['input_second]);
8:
$input_second = mysql_real_escape_string($input_second);
9:
 
10:
$input_id = mysql_real_escape_string($_POST['post_id']);
11:
$input_date=date("y-m-d h:i");
12:
 
13:
 
14:
$newposting = mysql_query("INSERT INTO input (input_id, input_alias, input_first, input_second, input_date) VALUES('', '$input_id', '$input_alias', '$input_first', '$input_second', '$input_date')")
15:
or die("Det gick inte att lägga till<br />" . mysql_error());
 
Till toppen på sidan
Visa användarprofil Skicka privat meddelande
Peppe L-G



Medlem i: 5161 dagar
Från: Mullsjö
Status: Offline



#742899
Inlägg Skrivet: 2021-01-24 22:10      Ämne: Citera

Du kan använda följande HTML och CSS för att låta användaren klicka på text istället för radio-knappar:

KOD:
1:
<style>
2:
   
3:
   #x input{
4:
      display: none;
5:
   }
6:
   
7:
   #x input:checked + label{
8:
      color: lime;
9:
   }
10:
   
11:
</style>
12:
 
13:
<form action="">
14:
   
15:
   <div id="x">
16:
      
17:
      x:
18:
      
19:
      <input  id="x1" type="radio" name="x" value="1">
20:
      <label for="x1">1</label>
21:
      
22:
      <input  id="x2" type="radio" name="x" value="2">
23:
      <label for="x2">2</label>
24:
      
25:
      <input  id="x3" type="radio" name="x" value="3">
26:
      <label for="x3">3</label>
27:
      
28:
   </div>
29:
   
30:
   <input type="submit" value="Send">
31:
   
32:
</form>


Om du strukturerar HTML-koden på ett smart sätt så kan du även visa nästa rad när användaren har gjort sitt val i nuvarande rad med CSS utan att använda JavaScript:

KOD:
1:
<style>
2:
   
3:
   #x input{
4:
      display: none;
5:
   }
6:
   
7:
   #x input:checked + label{
8:
      color: lime;
9:
   }
10:
   
11:
   #y{
12:
      display: none;
13:
   }
14:
   
15:
   #x > input:checked ~ #y{
16:
      display: block;
17:
   }
18:
   
19:
</style>
20:
 
21:
<form action="">
22:
   
23:
   <div id="x">
24:
      
25:
      x:
26:
      
27:
      <input  id="x1" type="radio" name="x" value="1">
28:
      <label for="x1">1</label>
29:
      
30:
      <input  id="x2" type="radio" name="x" value="2">
31:
      <label for="x2">2</label>
32:
      
33:
      <input  id="x3" type="radio" name="x" value="3">
34:
      <label for="x3">3</label>
35:
      
36:
      <div id="y">
37:
      
38:
         y:
39:
         
40:
         <input  id="y1" type="radio" name="y" value="1">
41:
         <label for="y1">1</label>
42:
         
43:
         <input  id="y2" type="radio" name="y" value="2">
44:
         <label for="y2">2</label>
45:
         
46:
         <input  id="y3" type="radio" name="y" value="3">
47:
         <label for="y3">3</label>
48:
         
49:
      </div>
50:
      
51:
   </div>
52:
   
53:
   <input type="submit" value="Send">
54:
   
55:
</form>
 
Till toppen på sidan
Visa användarprofil Skicka privat meddelande MSN Messenger
minero



Medlem i: 4125 dagar

Status: Offline



#742900
Inlägg Skrivet: 2021-01-30 16:36      Ämne: Citera

Intressant, jag får pilla lite, är inte så haj på css. Hade velat ha en rund boll runt siffran som i mitt exempel men tänker att det kanske css också kan lösa med ngt typ av block och radius-attribut...

Tack för hjälpen!
 
Till toppen på sidan
Visa användarprofil Skicka privat meddelande
Peppe L-G



Medlem i: 5161 dagar
Från: Mullsjö
Status: Offline



#742901
Inlägg Skrivet: 2021-01-30 17:21      Ämne: Citera

Det kan du nog fixa till med CSS. background-color och border-radius borde göra susen, och eventuellt använda display inline-block och ge elementet en fix width och height.
 
Till toppen på sidan
Visa användarprofil Skicka privat meddelande MSN Messenger
minero



Medlem i: 4125 dagar

Status: Offline



#742906
Inlägg Skrivet: 2021-02-03 21:16      Ämne: Citera

Nästan där nu Smile Tack så mycket!!

Vet du om det går att få pekaren på desktop att förstå att det är klickbara items? Det är ju inga länkar och på mobilen blir det logiskt att trycka in ett värde men inte lika uppenbart med standardpekaren.
 
Till toppen på sidan
Visa användarprofil Skicka privat meddelande
Peppe L-G



Medlem i: 5161 dagar
Från: Mullsjö
Status: Offline



#742907
Inlägg Skrivet: 2021-02-03 21:27      Ämne: Citera

Det kan du nog åstadkomme med CSS-egenskapen cursor och ge den värdet pointer.

https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
 
Till toppen på sidan
Visa användarprofil Skicka privat meddelande MSN Messenger
minero



Medlem i: 4125 dagar

Status: Offline



#742909
Inlägg Skrivet: 2021-02-06 20:46      Ämne: Citera

Grymt! Nu ser det ut precis som jag hade tänkt mig.

Har en del 2 på samma tema men jag vet inte om jag kan med och fråga mer Very Happy Tacksam för alla svar än så länge.

Men...

Det gäller precis samma sak (ett antal runda klickbara "bollar") fast nu med skillnaden att det skall vara fyra bilder som användaren kan markera och vars värde jag vill spara ned i db. Tänk avatarer där man skall välja en eller flera. Bildens url kommer från dbn också så det fungerar inte att köra exakt samma som ovan (eller checkboxes) med background-image i css-filen. Twisten är alltså dessutom att jag vill kunna markera 2 eller flera, inte bara 1 som i första exemplet.

Någon spontan idé?
 
Till toppen på sidan
Visa användarprofil Skicka privat meddelande
Peppe L-G



Medlem i: 5161 dagar
Från: Mullsjö
Status: Offline



#742910
Inlägg Skrivet: 2021-02-07 10:29      Ämne: Citera

Det är bara att ändra type till checkbox på dina input-element.

Här är första exemplet där jag gjort den ändringen, och det fungerar för mig (jag kan markera flera).

KOD:
1:
<style>
2:
   
3:
   #x input{
4:
       display: none;
5:
   }
6:
   
7:
   #x input:checked + label{
8:
       color: lime;
9:
   }
10:
   
11:
</style>
12:
 
13:
<form action="">
14:
   
15:
   <div id="x">
16:
      
17:
       x:
18:
      
19:
       <input  id="x1" type="checkbox" name="x" value="1">
20:
       <label for="x1">1</label>
21:
      
22:
       <input  id="x2" type="checkbox" name="x" value="2">
23:
       <label for="x2">2</label>
24:
      
25:
       <input  id="x3" type="checkbox" name="x" value="3">
26:
       <label for="x3">3</label>
27:
      
28:
   </div>
29:
   
30:
   <input type="submit" value="Send">
31:
   
32:
</form>
 
Till toppen på sidan
Visa användarprofil Skicka privat meddelande MSN Messenger
minero



Medlem i: 4125 dagar

Status: Offline



#742913
Inlägg Skrivet: 2021-02-13 11:08      Ämne: Citera

Ok, låter som rätt väg men mitt bekymmer ligger i hur jag kan dynamiskt/databasstyrt fylla URL:en för background-image till respektive label. Min CSS ligger i separat fil :-S

Reviderade css:en statiskt bara för att se om jag kunde få till background-image alls. Tyvärr syns inte bilden och jag förstår inte varför.

KOD:
1:
#x input{
2:
    display: none;
3:
}
4:
 
5:
#x input:checked + label{
6:
    color: lime;
7:
}
8:
 
9:
#x label {
10:
    background-image: url("avatar_default_male.png");
11:
    width: 150px;
12:
    height: 150px;
13:
    border-radius: 15px;
14:
    padding: 10px;
15:
    color: white;
16:
    cursor: pointer;
17:
}
 
Till toppen på sidan
Visa användarprofil Skicka privat meddelande
Peppe L-G



Medlem i: 5161 dagar
Från: Mullsjö
Status: Offline



#742914
Inlägg Skrivet: 2021-02-13 11:46      Ämne: Citera

Felet kan vara att din sida är i en undermapp, t.ex. /undermapp/sidan.php, medan bilden är i en annan undermapp, t.ex. /images/avatar_default_male.png. Då kan du ange sökvägen som absolut i CSS-koden, i.e. /images/avatar_default_male.png
 
Till toppen på sidan
Visa användarprofil Skicka privat meddelande MSN Messenger
minero



Medlem i: 4125 dagar

Status: Offline



#742932
Inlägg Skrivet: 2021-02-27 22:26      Ämne: Citera

Tyvärr ngt annat. Skrev ut hela URL för säkerhets skull och testade den. Den syns inte som background men bilden funkar i samma URL via consolen.

Kanske inte går att köra det attributet men konstigt för jag kan ju köra background-color utan problem. :-S
 
Till toppen på sidan
Visa användarprofil Skicka privat meddelande
Peppe L-G



Medlem i: 5161 dagar
Från: Mullsjö
Status: Offline



#742934
Inlägg Skrivet: 2021-02-28 22:29      Ämne: Citera

Låter som att du använder fel sökväg då, men utan information om dina sökvägar, mappar och filer så kan jag inte tala om för dig vad rätt sökväg är.
 
Till toppen på sidan
Visa användarprofil Skicka privat meddelande MSN Messenger
minero



Medlem i: 4125 dagar

Status: Offline



#742937
Inlägg Skrivet: 2021-03-06 16:42      Ämne: Citera

Hittade det tillslut, det behövdes bara stirras ut ordentligt Smile Tack för all hjälp!
 
Till toppen på sidan
Visa användarprofil Skicka privat meddelande
Visa tidigare inlägg:   
Skapa nytt inlägg   Svara på inlägget
PHPportalen Forum Index » HTML/CSS/JavaScript/Design
Hoppa till:  
Du kan inte skapa nya inlägg i det här forumet
Du kan inte svara på inlägg i det här forumet
Du kan inte ändra dina inlägg i det här forumet
Du kan inte ta bort dina inlägg i det här forumet
Du kan inte rösta i det här forumet
Du kan inte bifoga filer i detta forum
Du kan inte ladda ner filer från detta forum
Kontakta oss på adressen: info@phpportalen.net
Webbplatsen bygger i grunden på phpBB © 2001, 2002 phpBB Group

Modifieringar har senare gjorts i systemet av PHPportalen
Sid och logotypdesign skapad av Daren Jularic