2012-06-11 3 views
1

Каков эффект изменения innerHTML контейнера div на полезной нагрузке HTTP-запроса, если этот div содержит поля формы?Изменение элемента html с помощью innerHTML-эффекта на httprequest

Это first.html

<html> 
<body> 
     <script type="text/javascript"> 

     function changeDropdown(){ 
      document.getElementById('divId').innerHTML=""; 
      var options = "<select name='suffix' id='suffix'></select>"; 
      document.getElementById('divId').innerHTML=options;   

     } 
    </script> 
    <br><br> 
    <p>testing http header issue</p> 
    <a href="javascript:changeDropdown()">Change dropdown</a> 
    <form name="test" action="second.html" method="post"> 
     <table align="center"> 
      <tr> 
       <td> 
        <label for="name">Name</label> 
       </td> 
       <td> 
        <input type="text" name="name"/> 
       </td> 
      </tr>  
      <tr> 
       <td> 
        <label for="suffix">Suffix</label> 
       </td> 
       <td> 
        <div id="divId"> 
         <select name="suffix" id="suffix"> 
          <option value="Mr" selected=selected>Mr</option> 
          <option value="Mrs" selected=selected>Mrs</option> 
          <option value="Ms" selected=selected>Ms</option> 
         </select> 
        </div> 
       </td> 
      </tr> 
      <tr> 
       <td colspan="2"><input type="submit" value="submit"</td> 
      </tr> 
     </table> 
    </form> 
</body> 

Если я ввести значение в двух областях, и нажмите на кнопку отправить, это значение, которое я видел в полях запроса Chrome. (network-> headers)

**Request Payload** 
     name=Batman&suffix=Mr 

Теперь откройте first.html еще раз. На этот раз нажмите ссылку «изменить выпадающее меню». Это приведет к удалению всех параметров. Теперь введите имя и нажмите «Отправить».

Это значение в заголовке Хрома

**Request Payload** 
     name=Batman 

параметр "суффикс" исчез из HTTP (?) Params список. Я ясно добавил полный элемент select обратно в форму, используя innerHTML. Но по какой-то причине это не признается.

Интересно, если я добавлю пустую опцию в поле выбора, она будет поднята. т.е. изменение Javascript функции

document.getElementById('divId').innerHTML=""; 
var options = "<select name='suffix' id='suffix'><option value=''></option></select>"; 
document.getElementById('divId').innerHTML=options; 

Если кто-нибудь знают, почему это происходит и что я могу сделать, чтобы исправить эту проблему без добавления фиктивного параметра, как указано выше, пожалуйста доля. Благодаря!

+0

Ну, в ситуации, когда вы удаляете текущее содержимое и даете ему _blank_ выпадаете, что он должен публиковать? Chrome ведет себя правильно и, как я ожидал. То, что вы пытаетесь сделать, - это обратная вещь, которая кажется = D – Tejs

+0

У innerHTML есть некоторые проблемы с полями формы. Некоторые браузеры (не помнят, хотя бы) не отображали никаких параметров, если бы элемент select был добавлен с помощью innerHTML. Библиотеки JavaScript, такие как jQuery, будут обрабатывать эти проблемы для вас. Вы действительно должны использовать его. – Andre

+0

@Tejs .. Я ожидал, что объект запроса будет иметь параметр с именем «суффикс», но значение null. То, что я пытался сделать, - это .. эта страница изначально заполнена фасолью struts. Предположим, суффикс = Mr. Теперь, если я нажму «изменить параметры» и нажму «submit», то, что я ожидаю, будет выглядеть так, что команда struts action сбросит суффикс на null. Но то, что на самом деле происходит, состоит в том, что форма действия ищет параметр с именем «суффикс» в запросе и не может его найти. поэтому он сохраняет старое значение - это не то, что я хочу. – RKodakandla

ответ

0

Я думаю, что это связано с тем фактом, что при повторном добавлении <select> вы добавляете его без каких-либо возможных вариантов, и, следовательно, хром пропускает переменную (потому что она никогда не может быть установлена).

Это подтверждается тем фактом, что ваш пробел <option> снова производит требуемый результат.