Как заменить тег select на другой?

Question

[santavits]

Вообщем есть такая форма

<select class="input-md form-control" id="category" name="category" onChange="removeQuantity();">
<option disabled selected id="sel">Что будем крутить?</option>
<option value="11">Услуги Youtube</option>
<option value="12">Услуги Instagram</option>
									</select>

Как можно сделать чтобы это отображалась в виде кнопок, а не в виде выпадающего списка
т.е нажал на Услуги Youtube и значение value="11" передалось с данной функцией removeQuantity()

Comments

[Максим Тимофеев]

а что в removeQuantity()? Надо видеть как там value получается.

Answer 1

[Даниил Сугоняев]

А js код почему не написали?
Как вариант такой выход. Но js тоже нужно править.

<button onClick="removeQuantity('11');">Услуги Youtube</button>
<button onClick="removeQuantity('12');">Услуги Instagram</button>

Comments

[santavits]

вот js

function removeQuantity() {
	$("#min_quantity").html("0");
	$("#max_quantity").html("0");
	$("#service-description").html("");
	$("#price").html("0");
	$("#order_quantity").val(0);
	$("#order_link").val("");
	$("#description").fadeOut();
}

[Даниил Сугоняев]

santavits, должно быть еще что-то

[santavits]

Даниил Сугоняев, делал поиск по всем файлам с данной функцией только это

[Даниил Сугоняев]

santavits, Не с этой функцией. Функция, что вы скинули, не принимает параметров. Значит существует другая функция, которая принимает value из option.

[santavits]

Даниил Сугоняев, Видимо эта

$('#category').on('change', function() {
	var selected = this.value;

Вот полный файл

$('#category').on('change', function() {
	var selected = this.value;

	dataString = 'action=get-services&category-id='+selected;
	$.ajax({
		type: "POST",
		url: "requests.php",
		data: dataString,
		cache: false,
		success: function(data){
			if(data) {
				$("#service").html('<option disabled selected>Выберите вид накрутки.</option>');
				$("#service").append(data);
			} else {
				$("#service").html('<option selected="true" style="display:none;">Здесь пока ничего нет.</option>');
			}
		}
	});
});

function getBalance() {
	dataString = 'action=get-user-balance';
	$.ajax({
		type: "POST",
		url: "requests.php",
		data: dataString,
		cache: false,
		success: function(data){
			if(data) {
				$("#user-balance").html(data);
				$("#current-balance").html(data);
			}
		}
	});
}

function generateNewAPI() {
	dataString = 'action=generate-new-api';
	$.ajax({
		type: "POST",
		url: "requests.php",
		data: dataString,
		cache: false,
		beforeSend: function(){
			$("#user-api").val('Создание нового ключа API..');
		},
		success: function(data){
			if(data) {
				$("#user-api").val(data);
			}
		}
	});
}

function selectService(ServiceID) {
	dataString = 'action=select-service&service-id='+ServiceID;
	$.ajax({
		type: "POST",
		url: "requests.php",
		data: dataString,
		cache: false,
		success: function(data){
			if(data) {
				if(data == 'hashtag') {
					$("#additional").html('<div class="form-group"><div class="form-tip">Хэштег</div><input type="text" name="hashtag" class="input-md round form-control def-text" placeholder="Хэштег" required></div>');
				} else if(data == 'comments') {
					$("#additional").html('<div class="form-group"><div class="form-tip">Комментарии</div><textarea name="comments" class="input-md round form-control def-text" style="resize: none;" rows="8" placeholder="Комментарии (по одному в строке)" required></textarea></div>');
				} else if(data == 'mentions') {
					$("#additional").html('<div class="form-group"><div class="form-tip">Имя пользователя</div><input type="text" name="mentions_username" class="input-md round form-control def-text" placeholder="Упоминаемый пользователь" required></div>');
				} else {
					$("#additional").html('');
					$("#order_quantity").prop("readonly", false);
				}
			} else {
				$("#additional").html('');
				$("#order_quantity").prop("readonly", false);
			}
		}
	});
	
	var autoModeAllowedForServices = [3,4,5,6,7,8,11,12,14,25,30,31,32,33,36,40,41,43,44,48,49,52,64,66,92,94];
	var iServiceId = parseInt(ServiceID);
	var $form = $('form#new-order');
	if (autoModeAllowedForServices.indexOf(iServiceId) !== -1){
		$form.find('.form-group[data-name=order-mode]').show();
	} else {
		$form.find('.form-group[data-name=order-mode]').find('select[name=mode]').val('link').change();
		$form.find('.form-group[data-name=order-mode]').hide();
	}
	
}

function reloadService() {
	$("#service").html('<option disabled checked>Выберите вид накрутки.</option><option style="display:none;">Выберите категорию.</option>');
	//$("#category").append('<option disabled checked>Выберите категорию.</option><option style="display:none;">Выберите категорию.</option>');
	$("#sel").remove();
	$("#category").prepend('<option disabled selected id="sel">Выберите категорию.</option>');
}

function nullQuantity() {
	$("#quantity").val(0);
}

function orderModeUpdated(el, ServiceID){
	var $form = $(el).parents('form');
	if ($(el).val()==='auto'){
		$form.find('.form-group[data-name=link]').find('.form-tip').html('Ссылка на аккаунт');
		$form.find('.form-group[data-name=link]').find('input[name=link]').attr('placeholder','Ссылка на аккаунт');
		$form.find('.form-group[data-name=posts-count]').show();
		$form.find('.form-group[data-name=quantity]').find('.form-tip').html('Количество накрутки на одну');
		$form.find('.form-group[data-name=quantity]').find('input[name=quantity]').attr('placeholder','Сколько крутить на одну');
		$form.find('.form-group[data-name=dispersion]').show();
		$form.find('.form-group[data-name=posts-exists-count]').show();
	} else {
		$form.find('.form-group[data-name=link]').find('.form-tip').html('Ссылка');
		$form.find('.form-group[data-name=link]').find('input[name=link]').attr('placeholder','Ссылка');
		$form.find('.form-group[data-name=posts-count]').hide();
		$form.find('.form-group[data-name=quantity]').find('.form-tip').html('Количество');
		$form.find('.form-group[data-name=quantity]').find('input[name=quantity]').attr('placeholder','Сколько крутить');
		$form.find('.form-group[data-name=dispersion]').hide();
		$form.find('.form-group[data-name=posts-exists-count]').hide();
	}
	
	
}

function removeQuantity() {
	$("#min_quantity").html("0");
	$("#max_quantity").html("0");
	$("#service-description").html("");
	$("#price").html("0");
	$("#order_quantity").val(0);
	$("#order_link").val("");
	$("#description").fadeOut();
}

function updateMinQuantity(ServiceID) {
	dataString = 'action=get-min-quantity&service-id='+ServiceID;
	$.ajax({
		type: "POST",
		url: "requests.php",
		data: dataString,
		cache: false,
		success: function(data){
			if(data) {
				$("#min_quantity").html(data);
			}
		}
	});
}


function eAjax(el, action){
	if ($(el).hasClass('disable')) return false;
	$(el).addClass('disable');
	var params = JSON.parse($(el).attr('data-params') || '{}');
	var data = $.extend(params, {action: action});
	$.ajax({
		type: "POST",
		url: "requests.php",
		data: data,
		cache: false,
		success: function(html){
			$('#m_service').html(html);
			$(el).removeClass('disable');
		}
	});
	return false;
}

function updatePrice(ServiceID, Quantity, PostsCount) {
	var dataString = 'action=get-price&service-id='+ServiceID+'&quantity='+Quantity+'&postsCount='+PostsCount;
	if(Quantity > 0) {
		$.ajax({
			type: "POST",
			url: "requests.php",
			data: dataString,
			cache: false,
			success: function(data){
				if(data) {
					$("#price").html(data);
				}
			}
		});
	} else {
		$("#price").html(0);
	}
}

function updateMaxQuantity(ServiceID) {
	dataString = 'action=get-max-quantity&service-id='+ServiceID;
	$.ajax({
		type: "POST",
		url: "requests.php",
		data: dataString,
		cache: false,
		success: function(data){
			if(data) {
				$("#max_quantity").html(data);
			}
		}
	});
}

function updateLinkMaxQuantity(ServiceID, Link) {
	dataString = 'action=get-link-quantity&service-id='+ServiceID+'&link='+Link;
	$.ajax({
		type: "POST",
		url: "requests.php",
		data: dataString,
		cache: false,
		success: function(data){
			if(data) {
				$("#max_quantity").html(data);
			}
		}
	});
}

function updateDescription(ServiceID) {
	dataString = 'action=get-description&service-id='+ServiceID;
	$.ajax({
		type: "POST",
		url: "requests.php",
		data: dataString,
		cache: false,
		success: function(data){
			if(data) {
			    $("#description").fadeIn();
				$("#service-description").html(data);
			}
		}
	});
}

$("#show-order-example").click(function() {
	if($("#example-create-order").is(':visible')) {
		$("#show-order-example").html('Показать пример.');
		$("#example-create-order").hide( "slow" );
	} else {
		$("#show-order-example").html('Скрыть пример.');
		$("#example-create-order").show( "slow" );
	}
});

$("#show-referral-url").click(function() {
	if($("#referral-url").is(':visible')) {
		$("#show-referral-url").html('Показать партнерскую ссылку.');
		$("#referral-url").hide( "slow" );
	} else {
		$("#show-referral-url").html('Скрыть партнерскую ссылку.');
		$("#referral-url").show( "slow" );
	}
});

[Даниил Сугоняев]

santavits, Да, он, замените его как я тут сделал https://jsfiddle.net/a6twfeay/13/

[santavits]

Даниил Сугоняев, Увы не работает
Видимо потому что select раньше был в форме
в js об этом и сказано

$('.select').on('click', function() {
  var selected = this.value;


	
	dataString = 'action=get-services&category-id='+selected;
	$.ajax({
		type: "POST",
		url: "requests.php",
		data: dataString,
		cache: false,
		success: function(data){
			if(data) {
				$("#service").html('<option disabled selected>Выберите вид накрутки.</option>');
				$("#service").append(data);
			} else {
				$("#service").html('<option selected="true" style="display:none;">Здесь пока ничего нет.</option>');
			}
		}
	});

}
);

сейчас button нужен перед самой формой вот код

<button onClick="removeQuantity('18');">Услуги Youtube</button>
<button onClick="removeQuantity('23');">Услуги Instagram</button>
				<form method="POST" id="new-order" onsubmit="event.preventDefault(); newOrder();">
					
								<div class="form-group">
									<div class="form-tip">Сервис</div>
									<select class="input-md form-control" id="service" name="service"
                                            onChange="selectService(this.value);
                                            nullQuantity();
                                            updateMinQuantity(this.value);
                                            updateMaxQuantity(this.value);
                                            updateDescription(this.value)
                                            ">
										<option style="display:none;">Выберите категорию.</option>
									<select>
								</div>
								<div class="form-group">
									<div class="form-tip">Ссылка</div>
									<input type="text" id="order_link" name="link" class="input-md round form-control def-text" onChange="updateLinkMaxQuantity(document.getElementById('service').value, this.value)" placeholder="Ссылка" required>
								</div>
								<div class="form-group">
									<div class="form-tip">Количество</div>
									<input type="number" id="order_quantity" name="quantity" class="input-md round form-control def-text" onChange="updatePrice(document.getElementById('service').value, this.value);"; placeholder="Количество" required>
								</div>
								<div id="additional"></div>
								<div class="form-group">
                                        <input type="submit" name="order" class="submit_btn btn btn-mod btn-medium btn-round" value="Заказать">
								</div>
							</form>

[Даниил Сугоняев]

santavits, для начала правильно перенесите html из моего примера. https://jsfiddle.net/a6twfeay/13/
это

<button onClick="removeQuantity('18');">Услуги Youtube</button>
<button onClick="removeQuantity('23');">Услуги Instagram</button>

заменить на это

<button class="select" value="11">Услуги Youtube</button>
<button class="select" value="12">Услуги Instagram</button>

[santavits]

Даниил Сугоняев, Теперь при клике на button вообще никаких действий не происходит, может из за того что не указана не где функункция removeQuantity?

[Даниил Сугоняев]

santavits, вероятно. Попробуйте ее добавить в баттоны
например

<button class="select" value="11" onChange="removeQuantity();>Услуги Youtube</button>

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

[santavits]

Даниил Сугоняев, тут же ничего менять не нужно?
Это туда куда должен подставляться значение value, потому что именно эти значение в форме и не обновляются

dataString = 'action=get-services&category-id='+selected;
	$.ajax({
		type: "POST",
		url: "requests.php",
		data: dataString,
		cache: false,
		success: function(data){
			if(data) {
				$("#service").html('<option disabled selected>Выберите вид накрутки.</option>');
				$("#service").append(data);
			} else {
				$("#service").html('<option selected="true" style="display:none;">Здесь пока ничего нет.</option>');
			}
		}
	});

[Даниил Сугоняев]

Тут надо изменить, давайте сначала проверим работает ли код. Замените этот код:

success: function(data){
      if(data) {
        $("#service").html('<option disabled selected>Выберите вид накрутки.</option>');
        $("#service").append(data);
      } else {
        $("#service").html('<option selected="true" style="display:none;">Здесь пока ничего нет.</option>');
      }
    }

На этот:

success: function(data){
      if(data) {
       alert('Все работает!')
      } else {
        alert('Печалька)
      }
    }

[santavits]

Даниил Сугоняев, ничего не происходит
js

$('.select').on('click', function() {
  var selected = this.value;

dataString = 'action=get-services&category-id='+selected;
	$.ajax({
		type: "POST",
		url: "requests.php",
		data: dataString,
		cache: false,
	success: function(data){
      if(data) {
       alert('Все работает!')
      } else {
        alert('Печалька)
      }
    }
		
	});
  });

html

<button class="select" value="23" onClick="removeQuantity();">Услуги Youtube</button>


<form method="POST" id="new-order" onsubmit="event.preventDefault(); newOrder();">
													<div class="form-group">
									<div class="form-tip">Сервис</div>
									<select class="input-md form-control" id="service" name="service"
                                            onChange="selectService(this.value);
                                            nullQuantity();
                                            updateMinQuantity(this.value);
                                            updateMaxQuantity(this.value);
                                            updateDescription(this.value)
                                            ">
										<option style="display:none;">Выберите категорию.</option>
									<select>
								</div>
								<div class="form-group">
									<div class="form-tip">Ссылка</div>
									<input type="text" id="order_link" name="link" class="input-md round form-control def-text" onChange="updateLinkMaxQuantity(document.getElementById('service').value, this.value)" placeholder="Ссылка" required>
								</div>
								<div class="form-group">
									<div class="form-tip">Количество</div>
									<input type="number" id="order_quantity" name="quantity" class="input-md round form-control def-text" onChange="updatePrice(document.getElementById('service').value, this.value);"; placeholder="Количество" required>
								</div>
								<div id="additional"></div>
								<div class="form-group">
                                        <input type="submit" name="order" class="submit_btn btn btn-mod btn-medium btn-round" value="Заказать">
								</div>
							</form>

[Даниил Сугоняев]

santavits, В том js что вы скинули ошибка.
Замените фрагмент на этот

$('.select').on('click', function() {
  var selected = this.value;

  dataString = 'action=get-services&category-id='+selected;
  $.ajax({
    type: "POST",
    url: "requests.php",
    data: dataString,
    cache: false,
    success: function(data){
      if(data) {
        console.log('Успех')
      } else {
        console.log('Не оч')
      }
    }
  });
});

и скиньте что показывает консоль после нажания кнопки, вызывается она F12
https://yadi.sk/i/mlOoB_jP3WXCVD

[santavits]

Даниил Сугоняев,

а при нажатие на button в консоль вообще ничего не пишется

[Даниил Сугоняев]

santavits, это синтаксическая ошибка, написано что вы пропустили скобку на 264 линии в new-order.php. Сначала разберитесь с ошибками

[Павел Корнилов]

Трэш полный.
Нужно снять все обработчики с селекта и перевесить их на баттоны.
Далее проверить все обращения на предмет наличия select в них. Если код рабочий - всё должно работать.

Answer 2

[boga-net]

Переделал )

<select class="input-md form-control" id="category" name="category">
<option disabled selected id="sel">Что будем крутить?</option>
<option value="11">Услуги Youtube</option>
<option value="12">Услуги Instagram</option>
</select>

function removeQuantity(value)  {
	console.log(value);
}

$('#category option').on('click', function() {
	value = $(this).val();
	removeQuantity(value);
});

https://jsfiddle.net/a6twfeay/7/

Comments

[santavits]

Да вы же совсем не то делаете, с помощью select у меня уже и так есть, мне не нужен выпадающий список, мне нужны кнопки)

[boga-net]

santavits, вы смотрели после того, как я обновил ? )
Возможно, я не совсем правильно вас понял.
"т.е нажал на Услуги Youtube и значение value="11" передалось с данной функцией removeQuantity() " - вот это я сделал.
Вы хотите, чтобы сами селекты были кнопками - то есть выглядели как кнопки или тег селекта изменялся на тег button ?
Объясните, пожалуйста, подробней )

[santavits]

boga-net, на тег button нужно)
как то так

[boga-net]

santavits, последний вопрос : а зачем вам тег баттон ? Вам для семантики/структуры кода или это связано с визуальным оформлением ? Кнопки должны располагаться вертикально или как у вас - горизонтально ?
В любом случае, тут не обойтись без плагина, если не хотите пробовать написать самостоятельно. Если же вы хотите оформить селекты как кнопки (потому что вас не устраивает вид селекта), то поищите плагины для стилизации селектов. Я не буду скидывать ссылки, потому что сам как-то хотел оформить селекты под свой вкус и не нашёл ничего подходящего из плагинов. В итоге, отказался от самого тега селект, так как возможности его видоизменения с помощью чистого CSS - ограничены.