Как автоматически Установить входные значения в форме при выборе опции?

У меня есть форма, например:Как автоматически Установить входные значения в форме при выборе опции?

<form> 
    <ul> 

    <li> 
    <select name="choose"> 
    <option value="0">1</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 

    </select> 
    </li> 

    <li><h2>No. Of person</h2></li> 
    <input type="text" name="ref_person"id="field" value="" /> 

    <li><h2>earning of person:</h2></li> 
    <input type="text" name="ear_person" id="field" value="" /> 

    </ul> 
    </form>

так, когда я выбираю вариант: 1 оба поля ввода должны быть заполнены без какой. скажем, № человека = 3 и заработок человека = 5 долларов США.

источник

2015-12-24 ninja

все, что нужно это PHP * для загрузки *. –

@fred, не могли бы вы рассказать? Кстати, спасибо за ваш ответ. – ninja

Для этого вам понадобится JS/jQuery. Что-то вроде этого Q & A http://stackoverflow.com/q/17516982/ –


             
   
    
    function getPerson(select) { 
 
    var form = select.form; 
 
    form.ref_person.value = select.options[select.selectedIndex].getAttribute('per'); 
 
    form.ear_person.value = select.value; 
 
} 
    <form> 
 
    <fieldset><legend>Person and earning</legend> 
 
    <label for="personSelect">Select a person 
 
    <select name="choose" id="personSelect" onchange="getPerson(this)"> 
 
     <option per="3" value="0">1</option> 
 
     <option per="9" value="100">2</option> 
 
     <option per="27" value="500">3</option> 
 
    </select> 
 
    </label> 
 
    <br> 
 
    <label for="personNumber">No. Of person: 
 
    <input type="text" name="ref_person"id="personNumber"></label> 
 

 
    <label for="personEarning">Earning of person: 
 
    <input type="text" name="ear_person" id="personEarning"></label> 
 
    </fieldset> 
 
</form>

источник

2015-12-25 10:38:41 ninja

Я не мог заставить оператор switch работать, поэтому я сделал это с тремя операциями if, но вот мое решение. Скачайте сами, сделайте это, как хотите.

<form> 
    <ul> 
     <li> 
      <select name="choose" id="option1" onchange="relatedPrice()"> 
       <option value="0">1</option> 
       <option value="1">2</option> 
       <option value="2">3</option> 
      </select> 
     </li> 
     <li><h2>No. Of person</h2></li> 
     <input type="text" name="ref_person" id="field1" value="" /> 
     <li><h2>earning of person:</h2></li> 
     <input type="text" name="ear_person" id="field2" value="" /> 
    </ul> 
</form> 
<script> 
    function relatedPrice() { 
     var e = document.getElementById("option1"); 
     var test = e.options[e.selectedIndex].text; 

     document.getElementById("field1").value = test; 
     if(test==1) { 
      document.getElementById("field2").value = 100; 
     } 
     if(test==2) { 
      document.getElementById("field2").value = 200; 
     } 
     if(test==3) { 
      document.getElementById("field2").value = 300; 
     } 
    } 
</script>

источник

2015-12-24 21:37:33 Craz1k0ek

Спасибо! mate, Это, похоже, тоже хорошее решение, я постараюсь реализовать это тоже :) Thumbs up !! – ninja

У вас жестко закодированы значения в кучу операторов if. Возможно, просто поместите значения в selectbox – Bindrid

Да, как я уже сказал, я не мог заставить оператор switch работать, к сожалению. Это было бы лучше. Не стесняйтесь улучшать его! – Craz1k0ek

Вот пример кода, который использует событие onchange для копирования значений в текстовые поля.

<script type="text/javascript"> 
    function selectOnChange(obj) { 

     var val = obj.options[obj.selectedIndex].value; 
     var text = obj.options[obj.selectedIndex].text; 
     document.getElementById("field1").value = val; 
     document.getElementById("field2").value = text; 
     } 
</script> 
</head> 
<body> 

    <div> 
     <select onchange='selectOnChange(this)' name="choose"> 
       <option value="100">1</option> 
       <option value="200">2</option> 
       <option value="300">3</option> 

      </select> 

     </div> 
     <ul><li><h2>No. Of person</h2></li></ul> 
     <div> 
      <input type="text" name="ref_person" id="field1" value=""> 

      <ul> 
       <li><h2>earning of person:</h2></li></ul> 
       <input type="text" name="ear_person" id="field2" value="" /> 
     </div>

источник

2015-12-24 21:41:11 Bindrid

Брат, я не хотел копировать текст в поля ввода, я хочу, чтобы они были заполнены цифрами, указанными мной. – ninja

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

да, вы правы. Позвольте мне попробовать это, и это может быть хорошим решением. – ninja

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

Кроме того, вопрос должен содержать код, который вы пробовали, объяснение того, что вы пробовали, где это происходит неправильно и точно, что вы ожидаете от него, включая пример ввода и вывода.

Следующие могут помочь. Обратите внимание, что идентификаторы элементов должны быть уникальными, а в формах должна использоваться семантическая разметка (например, не используйте список для ее представления, не помещайте заголовки внутри списков, используйте метки, элементы группы с помощью полей и т. Д.).

Вы можете использовать событие изменения элемента select, чтобы получить значение и текст выбранного параметра и отобразить его в другом месте в форме. Вы также можете ссылаться на формы управления как на названные свойства формы, что удобно и более прямолинейно, чем с использованием getElementById.

В коде ссылка на выбор передается функции с использованием этого. Каждый элемент управления формы имеет вид , который является ссылкой на форму, в которой он находится. Остальное должно быть достаточно простым для понимания, но, пожалуйста, спросите, нужна ли вам другая помощь.

function getPerson(select) { 
 
    var form = select.form; 
 
    form.ref_person.value = select.options[select.selectedIndex].text; 
 
    form.ear_person.value = select.value; 
 
}

<form> 
 
    <fieldset><legend>Person and earning</legend> 
 
    <label for="personSelect">Select a person 
 
    <select name="choose" id="personSelect" onchange="getPerson(this)"> 
 
     <option value="0">1</option> 
 
     <option value="100">2</option> 
 
     <option value="500">3</option> 
 
    </select> 
 
    </label> 
 
    <br> 
 
    <label for="personNumber">No. Of person: 
 
    <input type="text" name="ref_person"id="personNumber"></label> 
 

 
    <label for="personEarning">Earning of person: 
 
    <input type="text" name="ear_person" id="personEarning"></label> 
 
    </fieldset> 
 
</form>

источник

2015-12-24 23:29:49 RobG

вы сделали то же самое, что мне нужно, кроме того, что, как в вашем заявленном примере, поле ref_person принимает его значение как индекс, но я хочу, чтобы это поле было «если значение опции 1 для ref_person должно быть 3, а когда выберите вариант 2 значение ref_person должно быть 9. и когда параметр 3: valur ref_person должен быть 27. ", :) Спасибо! для того, чтобы взглянуть на мой запрос и составить его план. Еще раз спасибо за ваше время и вклад. – ninja

У меня есть еще один запрос в дальнейшем процессе, поскольку я получаю входные значения с использованием php-кода, он не работает? например **************** Я создал на странице html с таргетингом на файл total.php, где он вычисляет данные и отражает их в html-файле. где, как в файле html

– ninja

Если у вас есть другой вопрос, задайте другой вопрос. – RobG

Как автоматически Установить входные значения в форме при выборе опции?

ответ

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