Reeborn
@Reeborn

Прошу помочь с формой отправки ajax. Форма отправляется, но только первый button. Как исправить?

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Профиль: <? echo $name; ?></title>
    <link rel="stylesheet" href="/assets/css/main.css">
    <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
</head>
<body>
<form id="form">
<div id="dii">
<input type="hidden" id="login" value="<? echo $login; ?>"></button>
<button type="submit" id="status" value="1">1</button>
<button type="submit" id="status" value="2">2</button>
<button type="submit" id="status" value="3">3</button>
<button type="submit" id="status" value="4">4</button>
</div>
<div id="app" width="640" ></div>
</form>

</body>
<script type="text/javascript">
//$('a').on('click', function (e) { e.preventDefault() });
$("#dii>button").on('click', function(e){
	e.preventDefault();
	var status = document.getElementById('status').value;
	var login = document.getElementById('login').value;
    $.ajax({
	type: 'post',
	url: 'preload.php',
	data: {status: status, login: login},
	success: function(data){
	//alert("Ваше сообщение отпрвлено!");
	    alert(data);
            $("#app").empty();
            $("#app").append(data);
	}
});
});
</script>
</html>
  • Вопрос задан
  • 106 просмотров
Решения вопроса 1
thisuserhatephp
@thisuserhatephp
thisuserhatephp
id должен быть уникальным.

<form id="form">
<div id="dii">
<input type="hidden" id="login" value="<? echo $login; ?>">
<button type="submit" id="" class="status"  value="1">1</button>
<button type="submit" id="" class="status"  value="2">2</button>
<button type="submit" id="" class="status"  value="3">3</button>
<button type="submit" id="" class="status"  value="4">4</button>
</div>
<div id="app" width="640" ></div>
</form>


$("#dii>button").on('click', function(e){
  e.preventDefault();
  var status = $(this).val();
  
  console.log(status);
  var login = document.getElementById('login').value;
    $.ajax({
  type: 'post',
  url: 'preload.php',
  data: {status: status, login: login},
  success: function(data){
  //alert("Ваше сообщение отпрвлено!");
      alert(data);
            $("#app").empty();
            $("#app").append(data);
  }
});
});


оффтоп: вот такое встречается часто

Скажите пожалуйста, где вы учились этому ? Какие-то курсы может, универ какой-то ? Видео уроки ?

Как же я устал от этого id в css, от тридцать миллиардов одинаковых id на документ. Постоянно работать вот с этим. Я почему спрашиваю, наконец хочу найти этого преподавателя и попросить его не учить людей этому.

#button {
  color: green; 
 width: 250px;
 height: 60px;
}
 #button2 {
  color: green; 
 width: 250px;
 height: 60px;
}

 #button3 {
  color: green; 
 width: 250px;
 height: 60px;
}
 #button4 {
  color: green; 
 width: 250px;
 height: 60px;
}


Что так сложно класс использовать ?
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@Shura0102
<input type="hidden" id="login" value="<? echo $login; ?>"></button> не вижу открывающего тега <button>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы