Объедините несколько форм javascript в одну форму с параметрами выбора

Я создал автономное приложение для Android на основе JavaScript с помощью Phonegap. В index.html есть четыре формы для поиска в базе данных:

<form onsubmit = "s1(); return false;">
  <input id = "search1" type = "text" maxlength = "255" placeholder = "Search in Titles only" value = "" />
  <input type = "submit" value = "Go" />
</form>

<form onsubmit = "s2(); return false;">
  <input id = "search2" type = "text" maxlength = "255" placeholder = "Search in Titles + Contents" value = "" />
  <input type = "submit" value = "Go" />
</form>

<form onsubmit = "scat(); return false;">
  <input id = "cat" type = "text" maxlength = "255" placeholder = "Search in Categories" value = "" />
  <input type = "submit" value = "Go" />
</form>

<form onsubmit = "gotoid(); return false;">
  <input id = "articleid" type = "text" maxlength = "255" placeholder = "Find based on ID" value = "" />
  <input type = "submit" value = "Go" />
</form>

А вот скрипт на странице:

function s1() {
  window.location.href = "search1.html?" + document.getElementById("search1").value.trim().replace(/\s+/g, "+");
}

function s2() {
  window.location.href = "search2.html?" + document.getElementById("search2").value.trim().replace(/\s+/g, "+");
}

function scat() {
  window.location.href = "cat.html?" + document.getElementById("cat").value.trim().replace(/\s+/g, "+");
}

function gotoid() {
  window.location.href = "id.html#" + document.getElementById("articleid").value.trim().replace(/\s+/g, "");
}

Проблема в том, что страница довольно грязная. Я попытался объединить эти четыре формы в одну, сохранив их функции, добавив <select> и <options>, но у меня не получалось заставить его работать.

Приветствуются любые предложения, будь то CSS, HTML, JavaScript или их комбинации (но не jQuery).

javascript html css

09.06.2018 13:10

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

326

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Сделай это:

var btns = document.querySelectorAll( 'input[type = "button"]' );

btns.forEach( function( item, index) {
    item.addEventListener( 'click', function() {
        var elm = item.previousElementSibling,
            eid = ( index !=3 ) ? elm.id + '.html?' : 'id.html#',
            val = elm.value.trim().replace( /\s+/g, '+' );

        /* window.location.href = eid + '.html?' + val */
        console.info( eid + val )
    } )
} )

<form>
  <input id = "search1" type = "text" maxlength = "255" placeholder = "Search in Titles only" value = "" />
  <input type = "button" value = "Go" /><br />
  <input id = "search2" type = "text" maxlength = "255" placeholder = "Search in Titles + Contents" value = "" />
  <input type = "button" value = "Go" /><br />
  <input id = "cat" type = "text" maxlength = "255" placeholder = "Search in Categories" value = "" />
  <input type = "button" value = "Go" /><br />
  <input id = "articleid" type = "text" maxlength = "255" placeholder = "Find based on ID" value = "" />
  <input type = "button" value = "Go" /><br />
</form>

О вашем обновленном коде:

Это решение лучше. Но вы можете просто сделать это, как показано ниже:

function search() {
    var select = document.getElementById( 'select' ),
        value = document.getElementById( 'key' ).value.trim().replace( /\s+/g,'+' );

    /*window.location.href = select.options[ select.selectedIndex ].value + value;*/
    console.info( select.options[ select.selectedIndex ].value + value )
}

<form onsubmit = "search(); return false;">
  <input id = "key" type = "text" maxlength = "255" placeholder = "" value = "" />
  <select id = "select">
    <option value = "search1.html?" selected>Only in Titles</option>
    <option value = "search2.html?">In Titles + Contents</option>
    <option value = "cat.html?">In Categories</option>
    <option value = "id.html#">Based on ID</option>
  </select>
  <input type = "submit" value = "Go" />
</form>

Мне только что удалось заставить его работать. Пожалуйста, посмотрите и дайте мне знать, стандартный ли это способ. Спасибо

— 09.06.2018 14:26

Ваш HTML лучше исходного HTML, но это может сбивать с толку, учитывая четыре ввода и четыре кнопки. Во всяком случае, я голосовал за это.

— 09.06.2018 14:35

@Siamak, ты прав. Но я только обновил ее код. Спасибо за ваш голос.

— 09.06.2018 14:53

Кавиан, обновленный код в порядке. Чем короче, тем лучше. Спасибо.

— 09.06.2018 15:13

09.06.2018 14:21

Мне удалось заставить его работать. Вот новый HTML:

<form onsubmit = "search(); return false;">
<input id = "key" type = "text" maxlength = "255" placeholder = "" value = "" />
<select>
<option id = "s1" selected>Only in Titles</option>
<option id = "s2">In Titles + Contents</option>
<option id = "scat">In Categories</option>
<option id = "gotoid">Based on ID</option>
</select>
<input type = "submit" value = "Go" />
</form>

И новый сценарий выглядит следующим образом:

function search(){
if (document.getElementById("s1").selected == true){
window.location.href = "search1.html?" + document.getElementById("key").value.trim().replace(/\s+/g,"+");
}

else if (document.getElementById("s2").selected == true){
window.location.href = "search2.html?" + document.getElementById("key").value.trim().replace(/\s+/g,"+");
}

else if (document.getElementById("scat").selected == true){
window.location.href = "cat.html?" + document.getElementById("key").value.trim().replace(/\s+/g,"+");
}

else if (document.getElementById("gotoid").selected == true){
window.location.href = "id.html#" + document.getElementById("key").value.trim().replace(/\s+/g,"");
}

else{
alert('Something went wrong. Please try again!');
}
}

Прокомментируйте, если это не стандартный способ.

09.06.2018 14:24