Javascript nach Button Klick auf andere Webseite leiten?

Moin!

Ich hab folgende Frage: Wie kann ich es realisieren, dass, wenn ich auf den Success Button klicke, ich dann auf eine andere Seite geleitet werde? Der Link dahin ist auch ein Teil dynamischer PHP Code. Ihr werdet es sehen :)

Hier mein Code:

"use strict";!function(){const n=document.querySelector(".suspend-user"),t=(n&&(n.onclick=function(){Swal.fire({title:"Bist du sicher?",text:"Du kannst diesen Benutzer nicht wiederherstellen!",icon:"warning",showCancelButton:!0,confirmButtonText:"Fortsetzen",cancelButtonText:"Abbrechen",customClass:{confirmButton:"btn btn-primary me-2",cancelButton:"btn btn-label-secondary", text:"Abrechen"},buttonsStyling:!1}).then(function(n){n.value?Swal.fire({icon:"success",title:"Benutzer gelöscht!",text:"Der Benutzer wurde gelöscht.",customClass:{confirmButton:"btn btn-success"}}):n.dismiss===Swal.DismissReason.cancel&&Swal.fire({title:"Vorgang abgebrochen",text:"Der Benutzer wurde nicht gelöscht.",icon:"error",customClass:{confirmButton:"btn btn-success"}})})}),document.querySelectorAll(".cancel-subscription"));t&&t.forEach(n=>{n.onclick=function(){Swal.fire({text:"Are you sure you would like to cancel your subscription?",icon:"warning",showCancelButton:!0,confirmButtonText:"Yes",customClass:{confirmButton:"btn btn-primary me-2",cancelButton:"btn btn-label-secondary"},buttonsStyling:!1}).then(function(n){n.value?Swal.fire({icon:"success",title:"Unsubscribed!",text:"Your subscription cancelled successfully.",customClass:{confirmButton:"btn btn-success"}}):n.dismiss===Swal.DismissReason.cancel&&Swal.fire({title:"Cancelled",text:"Unsubscription Cancelled!!",icon:"error",customClass:{confirmButton:"btn btn-success"}})})}})}();

Und ich möchte gern auf folgende Seite weitergeleitet werden:

index.php?page=deleteUser&&delete_id=<?=$user_data['user_id']?>

Könntet ihr mir hier behilflich sein? Wenn ich auf den Button "Fortsetzen" klicke erscheint noch eine Bestätigungsnachricht, wenn man dann auf "OK" klickt, soll der Redirect ausgeführt werden.

Danke euch im Vorraus!

HTML, programmieren, JavaScript, PHP, Technologie, Webentwicklung
Flask WTForms zum Anchor gehen, wenn Form nicht valid?

Ich habe ein Kontaktformular am Ende einer Webseite. Wenn ich das submitte und das Form ist valid, werde ich auf /contact weitergeleitet, der dann wieder auf / redirected und zum Anchor "contact-us" springt - soweit alles gut (vllt. aber auch nicht wirklich elegant)

@app.route("/", methods=['POST', 'GET'])
def index():
    form = ContactForm()
    if form.validate_on_submit():
        send_mail(request.form)
        return redirect('/contact')
    return render_template('index.html', form=form)


#Redirect
@app.route('/contact')
def success():
    form = ContactForm()
    return redirect(url_for('index', _anchor='contact-us'))

Wenn das Form aber nicht valid ist, werde ich natürlich nicht weitergeleitet, aber die Seite wird durch das SubmitField neu geladen und ich bin wieder ganz oben. So weiß der User nicht, dass die Kontaktanfrage fehgeschlagen (Fehler, wie z.B invalid Email werden unter dem Input Field angezeigt), da er erstmal runterscrollen müsste.

Wie kann ich bei nicht valid nach dem Reload wieder zum Anchor springen? (Alert Window oder so für den Fehler möchte ich vermeiden)

Außerdem: Ich hätte gerne eine Nachricht unter dem Form, wenn es erfolgreich gesendet wurde. Kann ich beim Redirect ein Argument mitgeben, sodass ein Text eingeblendet wird oder gibt es dafür eine elegante Lösung? ^^

Computer, Technik, Webseite, programmieren, Python, Webentwicklung, Flask
HTML Die Tabelle rutscht immer nach unten?

Hallo!
Ich habe momenatn ein Schulprojekt bei dem ich eine Fahradshop mit html bauen soll. Ich habe Bilder in eine Tabelle hinzugefügt (weil es uns so vorgegeben wurde) was auch ohne Probleme geklappt hat. Danach wollte ich unter der Tabelle einen Strich setzten welcher dann aber über der Tabelle angezeigt wurde.

Hier der Code:

<html>
<title>Fahrrad Verkauf</title>
<head><center>
<img src=leisteprodukte.png usemap="#image-map">
</center>
</head>
<body bgcolor=#CAE1FF><center>
  <br><br><br>
  <map name="image-map">
      <area target="" alt="" title="" href="Produkte.html" coords="3640,911,3974,990" shape="rect">
      <area target="" alt="" title="" href="Kaufen.html" coords="4320,990,4039,906" shape="rect">
      <area target="" alt="" title="" href="Startseite.html" coords="4390,889,4732,986" shape="rect">
  </map>
  <map name="1">
    <area target="" alt="Trackind Rad1" title="Trackind Rad" href="Fahrrad1.html" coords="2,1,610,610" shape="rect">
  </map>
  <map name="2">
    <area target="" alt="Trackind Rad2" title="Trackind Rad" href="Fahrrad2.html" coords="2,1,610,610" shape="rect">
</map>
<map name="3">
  <area target="" alt="Mountainbike1" title="Mountainbike" href="Fahrrad3.html" coords="2,1,610,610" shape="rect">
</map>
<map name="4">
  <area target="" alt="Mountainbike2" title="Mountainbike" href="Fahrrad4.html" coords="2,1,610,610" shape="rect">
</map>
<map name="5">
  <area target="" alt="City Rad1" title="City Rad" href="Fahrrad5.html" coords="2,1,610,610" shape="rect">
</map>
<map name="6">
  <area target="" alt="City Rad2" title="City Rad" href="Fahrrad6.html" coords="2,1,610,610" shape="rect">
</map>
<map name="7">
  <area target="" alt="Kinder Rad1" title="Kinder Rad" href="Fahrrad7.html" coords="2,1,610,610" shape="rect">
</map>
<map name="8">
  <area target="" alt="Kinder Rad2" title="Kinder Rad" href="Fahrrad8.html" coords="2,1,610,610" shape="rect">
</map>
<br><br><br><br><br><br>
<span style="font-size:70">Drücke auf die Bilder für eine Groß-Ansicht.</span>
<table bordercolor=#6381d8 border=1>
   <tr>
    <td><img src=Fahrrad1.jpg usemap=#1></td>
    <td><img src=Fahrrad2.jpg usemap=#2></td>
    <td><img src=Fahrrad3.jpg usemap=#3></td>
    <td><img src=Fahrrad4.jpg usemap=#4></td>
  </tr>
   <tr>
    <td><img src=Fahrrad5.jpg usemap=#5></td>
    <td><img src=Fahrrad6.jpg usemap=#6></td>
    <td><img src=Fahrrad7.jpg usemap=#7></td>
    <td><img src=Fahrrad8.jpg usemap=#8></td>
  </tr><br>
  <hr color=#6381d8 size=10 width=100%>
</body>
</html>

Bild zum Beitrag
HTML, Webseite, Webentwicklung, Tabelle
CSS Buttons verschieben?

Hallo, ich möchte auf meiner Website, dass die Buttons untereinander und nicht nebeneinander angezeigt werden wie hier:

habe schon einiges probiert aber nichts funktioniert richtig...

mein html Code ist das hier:

<!DOCTYPE html>
<html lang="de">
<head>
    <link href="style_bypass.css" rel="stylesheet">
    <title>Bypass</title>
</head>
<body id="links">


<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Set Lockscreen</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Einstellungen</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Test Video</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Galaxy Store</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Google Quick Search</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Youtube</button></a>



</body>

Und mein CSS Code der hier:

button {
    --border: 5px;    /* the border width */
    --slant: 0.7em;   /* control the slanted corners */
    --color: #37E8FC; /* the color */
    
    font-size: 35px;
    padding: 0.4em 1.2em;
    border: none;
    cursor: pointer;
    font-weight: bold;
    color: var(--color);
    background: 
       linear-gradient(to bottom left,var(--color)  50%,#0000 50.1%) top right,
       linear-gradient(to top   right,var(--color)  50%,#0000 50.1%) bottom left;
    background-size: calc(var(--slant) + 1.3*var(--border)) calc(var(--slant) + 1.3*var(--border));
    background-repeat: no-repeat;
    box-shadow:
      0 0 0 200px inset var(--s,#0000),
      0 0 0 var(--border) inset var(--color);
    clip-path: 
        polygon(0 0, calc(100% - var(--slant)) 0, 100% var(--slant),
                100% 100%, var(--slant) 100%,0 calc(100% - var(--slant))
               );
    transition: color var(--t,0.3s), background-size 0.3s;
  }
  button:hover,
  button:active{
    background-size: 100% 100%;
    color: #fff;
    --t: 0.2s 0.1s;
  }
  button:focus-visible {
    outline-offset: calc(-1*var(--border));
    outline: var(--border) solid #000a;
  }
  button:active {
    --s: #0005;
    transition: none;
  }
  
  
  
  body#links {
    display:grid;
    grid-auto-flow:column;
    grid-gap:px;
    place-content:center;
    margin:0;
    height:100vh;
    background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  }

Was genau muss ich in der CSS Datei bearbeiten, dass die Buttons nicht nebeneinander sondern untereinander angezeigt werden?

Bild zum Beitrag
Computer, Homepage, HTML, Webseite, programmieren, CSS, JavaScript, Hosting, Webentwicklung
Webdesigner oder Webentwickler werden?

Hallo, momentan bin ich noch Schülerin und so langsam muss ich mich entscheiden welchen Weg ich für meinen beruflichen Werdegang einschlagen will. Mich haben Computer schon immer fasziniert, hauptsächlich in Sachen Software und konnte mich immer freuen, wenn ich Menschen bei allgemeinen PC-Problemen helfen konnte. Aus diesem Grund habe ich mir lange vorgenommen in Richtung IT zu gehen. Am liebsten wäre es mir, wenn ich mich in dem Beruf ein wenig kreativ austoben könnte, da da nunmal, neben Ordnung/Struktur, meine größte Kompetenz liegt. Ich habe da z.B. an Webentwickler und/oder -designer gedacht, allerdings habe ich große Angst, dass mein logisches Denken, was ja ziemlich wichtig in Sachen Programmieren ist, nicht ausreichen wird (war in Mathe immer nur ein dreier-vierer Typ).

Zu Beginn der 10 Klasse im Gymn. hatte ich Informatik als normalen Grundkurs, wo wir viel mit Java gearbeitet haben. Hatte aber echt Probleme damit klarzukommen, weil es viel logischer zuging, wobei das früher mit HTML (vorher auf Realschule) leichter war.

Ich würde aber ganz gerne beides sein, Webentwickler UND Designer. Würdet ihr mir das raten, was ich mir wünsche, oder sollte ich mich aufgrund meiner Kompetenzen, doch nur auf Webdesigner begrenzen? (Wobei mir da die Sorge aufkommt, dass es ein etwas zu 'unsicherer' Job ist, was ja leider oft so mit kreativen Berufen ist)

Beruf, Schule, Informatik, Webdesign, Webentwicklung, Ausbildung und Studium, Beruf und Büro
Wie überprüfe ich mit JS oder PHP welche HTML Checkbox in einem Form ausgewählt wurde, bevor es abgesendet wurde?

Wie in der Langen Frage geschrieben, ich suche Code der es mir ermöglicht über Java Skript oder PHP auszuwerten welche Checkbox geklickt wurde.

            <input type="checkbox" class="radio-multichoice" name="abteilung:1">

            <label for="frei" align="center"><strong> Abteilung FF </strong></label><br>

            <input type="checkbox" class="radio-multichoice" name="abteilung:1">

            <label for="workS" align="center"><strong> Abteilung W </strong></label><br>

            <input type="checkbox" class="radio-multichoice" name="abteilung:1">

            <label for="MO" align="center"><strong> Abteilung O </strong></label><br>

Im allgemeinen Nutze ich bereits die Funktion in JS damit der User nur ein Element auswählen kann. Doch nun bräuchte ich eine Direkte Ausgabe je nachdem welches Element ausgewählt wurde. D.h. Ich suche eine Möglichkeit auszuwerten welches angeklickt wurde und dann möchte ich etwas ausführen über if, eles if, else.

Falls es helfen sollte hier habe ich die Begrenzung Methode für das anklicken.

   //Dieser Code überprüft ob drei Elemente ausgewählt wurden. Wenn dies der fall ist dann werden alle weiteren Element Blockiert.

   const groups = [...document.getElementsByClassName("radio-multichoice")].reduce((result, element) => {

 result[element.name] = result[element.name] || [];

 result[element.name].push(element);

 return result;

}, {});

for (const [name, elements] of Object.entries(groups)) {

 const limit = name.split(":")[name.split(":").length-1];

 for(const el of elements) {

  el.addEventListener("change", e => {

   if (elements.filter(x => x.checked).length > limit) {

     e.target.checked = false;

   }

  });

 }

}

Könnte mir dabei jemand Helfen, falls ihr nachfragen habt weil ich es mal wieder nicht richtig erklären konnte stellt bitte eine Nachfrage.

Computer, HTML, Webseite, programmieren, JavaScript, PHP, Webentwicklung
Footer Hintergrundfarbe ändert sich nicht?

Hallo,

ich habe hier ein ganz einfachen Footer mit HTML und CSS. Das Problem ist, dass sich die Hintergrundfarbe des Footers einfach nicht ändert und ich keine Ahnung hab, woran das liegt. Habe schon alles versucht, was mir so bekannt ist.

Ich zweifle gerade ziemlich an mir selbst.

HTML:

<footer>   
        <section class="section_footer">
        <div class="social">
            <a href="https://facebook.com" target=”_blank”><i class="fab fa-facebook"></i></a>
            <a href="https://instagram.com" target=”_blank”><i class="fab fa-instagram"></i></a>
        </div>
        <ul class="list">
            <li><a href="Impressum.html">Impressum</a></li>
            <li><a href="datenschutz.html">Datenschutz</a></li>
            <li><a href="kontakt.php">Kontakt</a></li>
            <li><a href="credits.html">Credits</a></li>
        </ul>
        <p class="footer_text">
            Lorem Ipsum
        </p>
        <p> <a href="#top"><i class="fas fa-arrow-up"></i></a></p>
    </section>
    </footer>

CSS:

footer {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Rubik', sans-serif;
    font-weight: 400;
    background-color: whitesmoke;
}
.section_footer {
    padding: 40px 0px;
}
.social {
    text-align: center;
    padding-bottom: 25px;
    color:gray;
    display: flex;
    justify-content: space-between;
    padding: 0 850px;
    font-size: 50px;
}
.social a {
    font-size: 25px;
    color: inherit;
    width: 40px;
    height: 40px;
    line-height: 48px;
    display: inline-block;
    text-align: center;
    margin: 0 8px;
    opacity: 0.75;
}
.social a:hover {
    opacity: 0.9;
}
footer ul {
    margin-top: 0;
    padding: 0;
    list-style: none;
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 0;
    text-align: center;
}
footer ul li a {
    color: inherit;
    text-decoration: none;
    opacity: 0.8;
}
footer ul li {
    display: inline-block;
    padding: 0 15px;
}
footer ul li a:hover {
    opacity: 1;
}
footer section p {
    margin-top: 15px;
    text-align: center;
    font-size: 30px;
    color: #aaa;
}
footer  a i {
    display: flex;
    justify-content: center;
    align-items: center;
}

Danke im Vorraus!

Computer, HTML, CSS, Webentwicklung
Css datei not found 404?

Hey,

ich bin gerade dabei eine kleine Webseite mit PHP zu erstellen (MNit Xampp und visual studio code). Ich habe meine Webseite in mehreren Dateien aufgeteilt, damit ich einen besseren Übersicht habe aber leider ist ein Fehler aufgetreten. Die css Dateien werden nicht geladen. Ich weiß nicht , woran es liegt denn die Pfaden zu den Dateien stimmen alle aber sie werden trotzdem nicht gefunden bzw. geladen und ausgeführt. Also die Seite ist dann nicht gestylt.

----------------header.php-----------------------------
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/header.css">
    <link rel="stylesheet" href="../css/index.css">
    <title>Own Website</title>
</head>
<body>
    <header class="header">
        <div class="logo">
            <h2>Mode</h2>
        </div>
        <ul class="menu">
            <li class="items"><a href="#" class="links">Home</a></li>
            <li class="items"><a href="#" class="links">About</a></li>
            <li class="items"><a href="#" class="links">Service</a></li>
            <li class="items"><a href="#" class="links">Login</a></li>
        </ul>
    </header>
</body>
</html>

------------------------index.php-------------------
<?php include("./templates/header.php"); ?
---------------header.css--------------------

* {
    margin: 0;
    padding: 0;
}




body {

    background-color: #212121;

}



Meine Ordner Struktur

Die Fehlermeldung:

Diese Fehlermeldung bekomme ich, wenn ich mir den Seitenquelltext anschauen möchte und dann die css Datei aufmachen will. Die wird nicht gefunden.

Ich hoffe, dass ich das Problem halbwaches erklären konnte.

Danke im Voraus

Bild zum Beitrag
Computer, Technik, HTML, Webseite, programmieren, CSS, PHP, Webentwicklung

Meistgelesene Beiträge zum Thema Webentwicklung