Formular-Weiterleitung Redirect abhängig von Benutzereingabe

-1

Entschuldigung im Voraus - Ich bin sehr neu für alle Codierung und brauche ein bisschen Hilfe.Formular-Weiterleitung Redirect abhängig von Benutzereingabe

Hier ist meine aktuellen HTML:

<!DOCTYPE html> 
 
<html> 
 
    <body> 
 
    <form action="form_output.htm"> 
 
     Input:<br> 
 
     <input type="text" name="input" value="Enter here"> 
 
     <br><br> 
 
     <input type="submit" value="Submit"> 
 
    </form> 
 
    <p>Click 'Submit' to continue.</p> 
 
    </body> 
 
</html>

Ziemlich einfach, wie es steht ...

Aber - ich brauche es den Benutzer auf eine bestimmte Seite zu umleiten basierend auf ihren Eingang. Wenn der Benutzer beispielsweise cat eingeben soll, sollte die Zielseite form_output_cat.htm lauten.

nicht sicher, ob dies machbar ist allein mit HTML, aber eine Anleitung wäre sehr willkommen :)

Danke,

Ben

Quelle

2016-04-10 Ben

können Sie ändern die action Attribut, wenn der Benutzer den Wert in der input ändern.

var form = document.querySelector('form'); 
 
document.querySelector('input').addEventListener('change', function() { 
 
    form.setAttribute('action', 'form_output_' + this.value + '.html'); 
 
}); 
 

 
form.addEventListener('submit', function(event) { 
 
    event.preventDefault(); 
 
    alert('form should send to: ' + form.getAttribute('action')); 
 
});

<!DOCTYPE html> 
 
<html> 
 
    <body> 
 
    <form action="form_output.htm"> 
 
     Input:<br> 
 
     <input type="text" name="input" placeholder="Enter here"> 
 
     <br><br> 
 
     <input type="submit" value="Submit"> 
 
    </form> 
 
    <p>Click 'Submit' to continue.</p> 
 
    </body> 
 
</html>

Quelle

2016-04-10 13:13:52

Enthält diese JavaScript tun, was Sie wollen?

Fügen Sie es in einem <script> Tag an der Unterseite, direkt vor </body>.

const input = document.querySelector("[name=input]"); 
const form = input.parentNode; 
input.addEventListener("input",() => { 
    form.action = `form_output_${input.value}`; 
});

Quelle

2016-04-10 13:12:50 Chiru

Dieser Code ist nicht Cross-Plattform .. https://kangax.github.io/compat-table/es6/ –

@MoshFeu Es ist. Es funktioniert auf Browsern, die schon vor meiner Geburt existierten, wenn [transpiled] (https://babeljs.io). Außerdem unterstützen alle modernen Browser mittlerweile "const", Pfeilfunktionen und Template-Strings, so dass es ohne Probleme laufen sollte. Kein Problem hier. – Chiru

Danke .. Ich habe etwas Neues gelernt. Obwohl, wie ich verstanden habe, ist babel ein Compiler, aber in alten Browsern nicht nativ unterstützt. Ich denke, wenn du es in deiner Antwort verwendest, musst du das erwähnen, weil Leute wie ich (vor 2 Minuten;)) oder wer das nicht benutzen kann, darüber Bescheid wissen müssen. –

Formular-Weiterleitung Redirect abhängig von Benutzereingabe

Antwort

Verwandte Themen