Как отправить значение в ajax при клике?

Question

[DrunkMaster]

HTML:

<form id="formStart" 
onsubmit="return AjaxFormRequest(this, 'Result', 'http://site.com/ajax_worker')">
    от <input type="text" name="start">
    до <input type="text" name="stop">
    <button type="submit" name="add">Отправить</button>
</form>

<a href="#" attr="1">1</a>
<a href="#" attr="2">2</a>
<a href="#" attr="3">3</a>

Обработчик отправки формы который сейчас отправляет только данные формы:

window.AjaxFormRequest = function (form, param, url) {
 	var data = $(form).serializeArray();
 	window.FilterData = data;
	jQuery.ajax({
		url: url,
		type: "POST",
		dataType: "html",
		data: data,
		success: function(response) {
			document.getElementById(param).innerHTML = response;
		},
		error: function(response) {
			document.getElementById(param).innerHTML = "Ошибка";
		}
	});
	return false;
 }

Хотелось бы при клике на ссылку так же как сейчас отправлять текущее значение полей формы + значение attr в ссылке.

Answer 1

[Alexander Smirnov]

А зачем вы используете document.getElementById(param).innerHTML, когда можно проще $("#param").html("Ошибка");

Воспользуйтесь плагином jquery.form.js и Ваш код будет таким:

$(function() {
    $("#formStart").on("submit", function(e) {
        e.preventDefault();
        $(this).ajaxSubmit({
            dataType: "json", // "html", 
            beforeSubmit: function() {
                // скрываем старые сообщения об ошибках перед отправкой формы
            },
            success: function(resp) {
        
            }
        });
    });
});

Comments

[DrunkMaster]

В туториале вероятно подсмотрел в каком-то )) А значение из attr как отправить лучше?

[Alexander Smirnov]

DrunkMaster: не совсем понял вопрос. Зачем отправлять из attr отправлять?

[DrunkMaster]

Alexander Smirnov: так а как иначе передать страницу пагинатора выбранную?

Answer 2

[ShinShil]

0)Редактирую. Получение аттрибута var attrVal = $('#someId').attr("attrName")
1)Если используете jquery, то используйте его полностью вместо
document.getElementById(param) = response
пишите это
$('#'+param).html(response);

2)Мне не совсем ясно о каких значениях attr идёт речь, но любые данные можно передать на сервера в параметре data. data параметр имеет формат json. Когда Вы сериализуете форму, то получаете строку такого вида {start: "val1", stop:"val2"}, где val1,val2 - это значение введённые в Input. Я не рекомендую пихать js код в html разметку. Строку с данными я бы формировал так:

myData = {
start: $('input[name="start"]).val(),
stop: $('input[name="stop"]).val(),
attr:"some attr"
};

Обратите внимание, что attr на php, например, будет доступен так $_POST["attr"]:
echo $_POST["attr"] //выведет: some attr

$('#formStart button[type="submit"]').click(function() { //или $('#formStart').onsubmit
$.ajax({
    url: url,
    type: "POST",
    dataType: "html",
    data: myData,
    success: function(response) {
      document.getElementById(param).innerHTML = response;
    },
    error: function(response) {
      document.getElementById(param).innerHTML = "Ошибка";
    }
  });
}

3)Если хотите просто добавить какие аттрибуты в ваш вариант
после serializearray допишите

var data = $(form).serializeArray();
data["attr"] = "some attr"; //это добавит поле attr со значением "some attr" в объект data, на php будет доступен как $_POST["attr"]

4)Попробуйте чаще гуглить jquery, например, как отправить форму с jquery, как сделать анимацию c jquery и т.д.

Comments

[DrunkMaster]

Вы хоть код тегом код выделите, а то тяжело читать )

[ShinShil]

DrunkMaster: Спасибо )