0

Здравствуйте, как заменить input [type=submit] на button [type=submit] через javascript, input кнопки невидимы и обычным способом их не заменить, а требуется сделать хорошее оформление для кнопок с before и after, на странице их несколько, replacewidth не помог.

6
  • Добавте ваш код, это облегчит ответ на вопрос.
    – 0xdb
    27 июн 2017 в 11:17
  • 2
    А суть замены через js, когда можно просто html отредактировать? 27 июн 2017 в 11:18
  • 1
    Надеюсь опечатка только тут? replacewidth 27 июн 2017 в 11:25
  • А почему вы решили что к input[type=submit] нельзя применить псевдо классы before и after
    – Shnur
    27 июн 2017 в 11:38
  • Обычным способом их не заменить, их нельзя просто так отредактировать, Евгений Миронов replaceWith, 0xdb <input class="btn-block" name="sbm" type="submit" value="Отправить"> 27 июн 2017 в 11:41

1 ответ 1

2

// Расширяем $.fn.attr для получения списка всех атрибутов (https://stackoverflow.com/questions/14645806/get-all-attributes-of-an-element-using-jquery)
(function(old) {
  $.fn.attr = function() {
    if(arguments.length === 0) {
      if(this.length === 0) {
        return null;
      }

      var obj = {};
      $.each(this[0].attributes, function() {
        if(this.specified) {
          obj[this.name] = this.value;
        }
      });
      return obj;
    }

    return old.apply(this, arguments);
  };
})($.fn.attr);


// Сам input 
var input = $('.btn-block');

// Заменяем на button c сохранением всех атрибутов
input.replaceWith(
  $('<button />')
    .attr(input.attr())
    .text(input.val())
);

// Просто смотрим что получилось
$('<p />').text($('div').html()).appendTo($('div'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input class="btn-block" name="sbm" type="submit" value="Отправить">
</div>

2
  • Спасибо большое за такой хороший ответ, все получилось, все работает. 27 июн 2017 в 12:19
  • Рад помочь, галочку поставьте, что ответ подошел) 27 июн 2017 в 12:22

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.