Переадресация формы в зависимости от пользовательского ввода

-1

Извинения заранее - я очень новичок во всем кодировании и нуждаюсь в некоторой помощи.Переадресация формы в зависимости от пользовательского ввода

Вот мой текущий 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>

Довольно просто, как он стоит ...

Но - мне это нужно, чтобы перенаправить пользователя на конкретную страницу на основе их вход.

Например, если пользователь должен был ввести cat, я бы хотел, чтобы целевая страница была form_output_cat.htm.

Не уверен, если это выполнимо с помощью HTML в одиночку, но какие-либо указания было бы оценено :)

Спасибо,

Бен

источник

2016-04-10 Ben

Вы можете изменить атрибут action, когда пользователь изменит значение в input.

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>

источник

2016-04-10 13:13:52

ли делать это JavaScript, что вы хотите?

Добавить в <script> тег внизу, справа до </body>.

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

источник

2016-04-10 13:12:50 Chiru

Этот код не является кросс-платформенный .. https://kangax.github.io/compat-table/es6/ –

@MoshFeu Это. Он работает в браузерах, которые существовали до того, как я даже родился, если [transpiled] (https://babeljs.io). Кроме того, во всех современных браузерах поддерживаются функции 'const', стрелки и строки шаблонов, поэтому он должен работать без каких-либо проблем. Здесь нет проблем. – Chiru

Спасибо .. Я узнал что-то новое. Хотя, как я понял, babel является компилятором, но не поддерживается в старых браузерах. Я думаю, что если вы используете его в своем ответе, вы должны упомянуть об этом, потому что такие люди, как я (2 минуты назад;)), или кто не может использовать babel, должен знать об этом. –

Переадресация формы в зависимости от пользовательского ввода

ответ

Смежные вопросы