IE отправляет внутренний HTML при нажатии на элемент кнопки

У меня есть следующий HTML на моей веб-странице (упрощенно).

<button type="submit" name="action" value="ButtonA">Click Here</button>

В Firefox он представляет «ButtonA» как значение для значения формы «action». Тем не менее, в IE7, он отправляет «Нажмите здесь». Есть ли способ решить эту проблему? Я не хочу использовать входные теги, потому что мне нужно иметь возможность настраивать текст, не затрагивая значения, возвращаемые обратно в форму (локализация). По сути, я хочу иметь возможность иметь несколько кнопок с одинаковым именем и, в зависимости от их значения, выполнять разные действия при отправке. Есть ли простой способ заставить IE действовать правильно в этом случае?

[БОЛЬШЕ]

Может быть, я должен быть более ясным, но я не могу использовать

<input type="submit" name="Action" value="ButtonA">

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

[БОЛЬШЕ]

Более подробно, в основном, я хочу, чтобы кнопка могла произносить «Сохранить» или «Sauver» в зависимости от языка, но не иметь значения, переданного на сервер, для изменения. Я также хочу иметь несколько кнопок с одинаковым именем и, в зависимости от значения, делать что-то, а не в зависимости от имени кнопки, и проверять, есть ли значение для этой кнопки. Код уже написан с этой точки зрения, и я просто хочу иметь возможность изменять отображаемый текст в значениях без существующего кода обработки на стороне сервера.

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

 cLFlaVA18 дек. 2008 г., 18:55
Ваша логика в том, что вы не используете входные теги, не имеет смысла. Можете ли вы объяснить свой отказ от использования элементов ввода? элементы кнопок и элементы ввода будут «настроены» одинаково.

Ответы на вопрос(12)

Проверьте этото есть кнопка-фикс проект, который использует поведение IE (то есть javascript) для аккуратного решения проблемы.

Я думаю, что вы должны пересмотреть всю эту концепцию. У меня есть ощущение, что ваш сценарий выглядит примерно так:

Пользователь нажимает Сохранить или ОтменитьНа стороне сервера вы проверяете значение «Сохранить» или «Отмена»Вы выполняете действия, основанные на этом

В действительности не должно иметь значения значение кнопки «Сохранить». В PHP, например, вы можете просто проверитьa значение в элементе Сохранить. Независимо от значения «Сохранить» или «Sauver», вы можете выполнить функцию сохранения.

Я прошу прощения, если я далеко от базы здесь. Дайте мне знать, если мои предположения верны.

 strager18 дек. 2008 г., 23:29
@cLFIaVA, мне пришлось сделать что-то похожее на это, и я пошел с подходом Javascript. В моем случае у меня была таблица с кнопками UPDATE и DELETE рядом с каждым элементом, а также флажки слева, которые используются, когда вы нажимаете кнопку для всей формы (для выполнения массовой операции).
 cLFlaVA18 дек. 2008 г., 21:45
Конечно, но какая польза от нескольких кнопок с одинаковым именем?
 Kibbee18 дек. 2008 г., 21:15
Значение сохраняемого значения имеет значение, если вы хотите иметь несколько кнопок с одинаковым именем.

Одним из решений является использование Javascript и скрытого поля

   <input type="hidden" name="actionparam" value="DoNothing">
   <input type="button" onclick="OnSubmitForm('ActionA')" Value="Click Here for A" />
   <input type="button" onclick="OnSubmitForm('ActionB')" Value="Click Here for B" />


   function OnSubmitForm(actionname) {
    var f = document.frm;
    f.actionparam.value = actionname;
    f.submit();
 }

Это также работает как скрытая CATPCHA, и вы можете добавить некоторую проверку клиента в функцию javascript

Редактировать:

Поскольку вы говорите, что хотите перейти на браузеры, не поддерживающие JavaScript, вы можете использовать эту версию, которая разрешает только одно действие по умолчанию пользователям, не имеющим JavaScript

Дополнительные кнопки отключены в HTML, но затем снова включены с помощью JavaScript.
Протестированный код:

<html>
<head>
    <script type="text/javascript">
    <!--
    function OnSubmitForm(actionname) {
            var f = document.frm;
            f.actionparam.value = actionname;
            f.submit();
    }
    //-->
    </SCRIPT>
</head>
<body>
   <noscript>
        <div style="background-color: yellow; margin: 20px;" >
            You are using a limited version of the site because you don't have Javascript enabled
        </div>
    </noscript>


   <h1>form</h1>
    <form name="frm" method="post">
    <input type="hidden" name="actionparam" value="DefaultAction" />
    <button name="defaultbutton" type="submit">default action</button>
    <button name="extrabutton1" disabled onclick="OnSubmitForm('ExtraAction1')">Extra action 1</button>
    <button name="extrabutton2" disabled onclick="OnSubmitForm('ExtraAction2')">Extra action 2</button>
    </form>


   <h1>Results</h1>
   <h2>forms collection</h2>
   <ol>
   <%
   For x = 1 To Request.Form.count()
      Response.Write("<li>" + Request.Form.key(x) + "=" + Request.Form.item(x) + "</li>")
   Next
   %>
   </ol>


    <script type="text/javascript">
    <!--
    document.frm.extrabutton1.disabled = false;
    document.frm.extrabutton2.disabled = false;
    //-->
    </SCRIPT>

</body>
</html>
 Kibbee18 дек. 2008 г., 19:38
Мне нравится этот метод, но я не хочу полагаться на Javascript. Я не вижу простой способ изящно ухудшить это, если Javascript отключен.

Я думаю, что вы должны использовать<input type="submit" /> вместо<button>.

 strager18 дек. 2008 г., 23:28
Использование кнопки позволяет разделить введенное значение и текст, представленный пользователю. Другие причудливые вещи могут быть сделаны с помощью кнопок, которые также не могут быть введены.

Обычный обходной путь, чтобы заставить это работать с вводом-отправкой, состоит в том, чтобы изменить значение на несколько атрибутов 'name', например:

<input type="submit" name="submit.buttonA" value="Sausage" />
<input type="submit" name="submit.buttonB" value="Mash" />

Слой формы, который я использую лично, автоматически преобразует это так, как если бы щелкнули элемент управления «submit» со значением «buttonA» или «buttonB», но в большинстве сред его легко сделать вручную.

Хорошие новости: Microsoft исправила это в IE8 (только в стандартном режиме)

Плохая новость: он все еще в бета-версии

этоисправление jQuery работает хорошо, или вы можете взломать свой собственный JS для обработки IE.

Что касается тех, кто предлагает ввод поверх кнопки, это нормально, но если вам нужна графика или другие стили на вашей кнопке, то кнопка - единственный путь.

Я не знаю ни одного способа заставить его работать в IE7 (или IE6) без необходимости JavaScript (или странных мультиформных конструкций).

Разве это не доступно как-то локализованно для серверной части? Скажем, текст поступает из базы данных или это просто встроено в локальные шаблоны или около того? Вы должны быть в состоянии получить локализованную версию этикетки как при печати, так и при проверке формы на внутреннем сервере, не так ли (насколько вы предпочитаете просто использовать неизменное значение, так как вы действительно сможете это сделать) делать)?

Там всегда есть решение JavaScript ...

Следующее является скорее доказательством концепции, которая потребует некоторой настройки, чем готовый однострочный jQuery, но он должен работать без необходимости изменения какого-либо HTML:

<!doctype html>
<html>

<head>

<title>Fix Buttons in IE6</title>

<script type="text/javascript">
function fixButtons() {
    var btns = document.getElementsByTagName('button');

    for (var i = 0; i < btns.length; i++) {
        btns[i].onclick = fixValue;
    }
}

function fixValue() {
    var btns = document.getElementsByTagName('button');

    for (var j = 0; j < btns.length; j++) {
        if (this == btns[j]) {
            this.value = this.getAttributeNode('value').value;
        }
        else {
            btns[j].parentNode.removeChild(btns[j--]);
        }
    }
}
</script>

</head>

<body onload="fixButtons()">

<form action="" method="get">
    <button type="submit" name="action1" value="value1">Do Action 1</button>
    <button type="submit" name="action2" value="value2">Do Action 2a</button>
    <button type="submit" name="action2" value="value3">Do Action 2b</button>
</form>

</body>

</html>

Если он должен работать только в IE7, а не в IE6,fiXValue() Функция может быть уменьшена до просто:

this.value = this.getAttributeNode('value').value

Просто пришлось иметь дело с замечательной реализацией IE6button элементы. Это решениеделает полагаться на Javascript, но некоторые могут найти его полезным.

Это особенно раздражает при использовании AbstractWizardController в среде Spring в качествеbutton Элемент является идеальным решением для кнопок «Далее», «Назад» и «Готово» мастера, но не работает в IE6.

Итак, я закончил писать небольшое исправление на основе jQuery (хотя его довольно просто преобразовать, чтобы вам не приходилось использовать библиотеку jQuery).

$(function(){
if((window.XMLHttpRequest == undefined) && (ActiveXObject != undefined)) {
    $('button').click( function(event) {
        var rx = /\bvalue ?= ?(".*?"|'.*?')/i;
        var matches = $(this)[0].outerHTML.match( rx );
        if( matches != null )
            $(this).attr( 'value', matches[1].substring( 1, matches[1].length - 1 ) );
        $('button').not( $(this) ).attr('disabled','disabled');
    });
}
}); 

Это добавит событие onclick ко всем элементам кнопки. Когда кнопка нажата, она будет захватывать внешний HTML кнопки, например:

<button name="playerId" value="34">Walter Payton</button>

и разобрать атрибут значения. Кажется, много проблем, чтобы получить значение, но я обнаружил, чтоgetAttributeNode('value').value вернул innerHTML, а не указанный атрибут value, поэтому не очень помог. Затем мы устанавливаем субматч регулярного выражения в качестве значения кнопки. Должно совпадать, если вы используете двойные или одинарные кавычки в качестве разделителей, ноВы должны использовать некоторую форму разделителя.

Результатом этого является то, что вместо публикации «Уолтер Пэйтон» вместо этого будет фактически «34». Недостатком является то, что внешний вид кнопки на странице также изменится на «34» непосредственно перед отправкой формы.

Наконец, скрипт найдет все элементы кнопки, кроме нажатой, и установит ихdisabled атрибут должен быть отключен. Это гарантирует, что они не включены в POST, и вы не получите ложных срабатываний.

 Jafin08 нояб. 2010 г., 06:05
Это помогло решить описанную проблему.

ссылка, которую вы указали в вопросе объясняет, что IE6 передает все кнопки при каждой отправке формы, поэтому ваше приложение не будет работать с IE6 независимо от того, какой обходной путь вы используете. Я проверил это и убедился, что IE6 действительно делает это. Это означает, что без Javascript тег <button> бесполезен в IE6, а с учетом другого ограничения он также сильно ограничен в IE7. Единственный обходной путь, не связанный с Javascript, который я могу придумать, - это поместить ваши теги <button> вне основной <form> в их собственные формы. Вы также можете сделать это с тегами <a>, но я не могу рекомендовать это, поскольку ссылки всегда являются запросами GET, а запросы GET никогда не должны иметь побочных эффектов, таких как изменение данных.

<div style="float:left">
  <form name="shoppingCart" action="#c" method="GET">
    <input type="hidden" name="item1" value="hat">
    <input type="text" name="item1quantity" value="1"> Hat, red<br>
    <input type="hidden" name="item2" value="scarf">
    <input type="text" name="item2quantity" value="1"> Scarf, red<br>
    <button type="submit" name="button" value="purchase">Buy now!</button>
  </form>  
</div>
<div style="float:right">
  <form name="remove" action="#a" method="GET">
    <input type="hidden" name="item" value="item1">
    <button type="submit" name="button" value="delete1">Remove this item</button>
  </form>
  <form name="remove" action="#b" method="GET">
    <input type="hidden" name="item" value="item2">
    <button type="submit" name="button" value="delete2">Remove this item</button>
  </form>
</div>

Недостатком использования нескольких форм является то, что вы ограничены в том, что вы можете передавать; если пользователь изменит количество в вышеуказанной форме, эта информация не будет отправлена, когда пользователь нажмет кнопку «удалить». Но вы могли бы рассмотреть эту изящную деградацию для пользователей, не являющихся JS, и использовать JS для синхронизации данных в основной форме со скрытыми формами.

 strager18 дек. 2008 г., 23:31
TYPO: Вы пишете% lt; вместо <. Хороший ответ, хотя.
 Mr. Shiny and New 安宇23 дек. 2008 г., 19:57
Спасибо, Стражер. Исправлена.

Простой обходной путь без использования JavaScript:

<button type="submit" name="action" value="ButtonA" onclick="this.value='ButtonA'">Click Here</button>
 Paul Sturm18 мар. 2015 г., 17:24
что ты думаешьonclick выполняется?

Как упоминает Эдуардо, JavaScript звучит как ваш лучший вариант. Однако вам нужно как-то учесть тот факт, что если у пользователя отключен JavaScript, вы не получите соответствующее значение.

 cLFlaVA18 дек. 2008 г., 19:05
Я бы не согласился с этим утверждением. Как насчет мобильных устройств?
 Eduardo Molteni18 дек. 2008 г., 19:12
Понравился iPhone? :) Просто шучу. Я понимаю вашу точку зрения, но, пожалуйста, попробуйте использовать Интернет в течение 1 дня без JavaScript, и вы поймете, что я имею в виду. Это просто реальный мир.
 Eduardo Molteni18 дек. 2008 г., 19:04
Это недостаток, но я думаю, что все современные сайты требуют JavaScript, по крайней мере, для взаимодействия с сайтом.
 cLFlaVA18 дек. 2008 г., 19:59
Я согласен с вами на этом фронте. Тем не менее ... мы должны помнить о наших пользователях :)

использование<input> вместо<button>, Иначе вотописание хорошего взлома на основе jQuery.

Ваш ответ на вопрос