Javascript — несколько массивов флажков Jquery для переполнения стека

Привет всем, у меня есть проблемы с jquery. Извините за мой плохой английский. Я искал решение в течение нескольких часов и ничего не нашел. Что я хочу сделать с помощью jQuery, так это редактировать параметры, когда флажки установлены и отправлены.

Если я установлю все флажки и нажму «Применить фильтр». URL попадает в такой формат

http://blablabla.com/filter.php?rfilter=1&rfilter = 2&CFilter = 1&CFilter = 2&CFilter = 3&sfilter = 1&sfilter = 2&sfilter = 3

Мне нужно, чтобы URL выглядел так:

http://blablabla.com/filter.php?rfilter=1:2&CFilter = 1: 2: 3&sfilter = 1: 2: 3 (если я установил все флажки и отправлю его.)

Потому что я хочу взорвать эти значения с помощью php и поместить их в запрос.

Спасибо всем за помощь.

<form id="form" method="GET" action="filter.php">
<fieldset class="right-side">
<legend>Rarity</legend>
<div id="test">
<ul>
<li>
<input type="checkbox" id="rfilter" name="rfilter" value="1" />
<label for="rfilter">Common</label>
</li>
<li>
<input type="checkbox" id="rfilter" name="rfilter" value="2" />
<label for="rfilter">Free</label>
</li>
</ul>
</div>
</fieldset>
<fieldset class="right-side">
<legend>Color</legend>
<div id="test">
<ul>
<li>
<input type="checkbox" id="cfilter" name="cfilter" value="1"/>
<label for="cardfilter">Netural</label>
</li>
<li>
<input type="checkbox" id="cfilter" name="cfilter" value="2"/>
<label for="cardfilter">Green</label>
</li>
<li>
<input type="checkbox" id="cfilter" name="cfilter" value="3"/>
<label for="cardfilter">Red</label>
</li>
</ul>
</div>
</fieldset>
<fieldset class="right-side">
<legend>Size</legend>
<div id="test">
<ul>
<li>
<input type="checkbox" id="sfilter" name="sfilter" value="1"/>
<label for="sfilter">Big</label>
</li>
<li>
<input type="checkbox" id="sfilter" name="sfilter" value="2"/>
<label for="sfilter">Normal</label>
</li>
<li>
<input type="checkbox" id="sfilter" name="sfilter" value="3"/>
<label for="sfilter">Small</label>
</li>
</ul>
</div>
</fieldset>
<input type="submit" id="filterapply" value="Filter Apply" />
</form>

-1

Решение

http://jsfiddle.net/utmbhmex/2/ вот ты, мой друг Копировать-вставить из одного из моих проектов

<form id="form" method="post" action="/url" >

Group 1
<input type="checkbox" name="filter_a[]" value="1">
<input type="checkbox" name="filter_a[]" value="2">
<input type="checkbox" name="filter_a[]" value="3">

Group 2
<input type="checkbox" name="filter_b[]" value="1">
<input type="checkbox" name="filter_b[]" value="2">
<input type="checkbox" name="filter_b[]" value="3">

Group 3
<input type="checkbox" name="filter_c[]" value="1">
<input type="checkbox" name="filter_c[]" value="2">
<input type="checkbox" name="filter_c[]" value="3">

<input type="submit" id="filterapply" value="Filter Apply" />

</form>

ЯШ:

var hasClass = function(element, className) {
return (new RegExp("( |^)" + className + "( |$)", "g")).test(element.className);
};

var form = document.getElementById('form');

var fieldValue = {
allReg : /\[([a-zA-Z0-9-]*)\]/g,
isObjReg : /\[(.*)\]/g,
serialize: function (a, b) {
var c = [];
for (var d in a) {
var e = b ? b + "[" + d + "]" : d, f = a[d];
c.push("object" == typeof f ? fieldValue.serialize(f, e) : encodeURIComponent(e) + "=" + encodeURIComponent(f))
}
return c.join("&")
},
get : function(fieldName, reference) {
var arr = [fieldName.replace(fieldValue.isObjReg, '')];
var match;
while (match = fieldValue.allReg.exec(fieldName)) {
arr.push(match[1]);
}

if (reference === undefined) return undefined;
if (reference[arr[0]] === undefined) return undefined;

var tmpObj = reference;

for (var i = 0; i < arr.length; i++) {
if (tmpObj[arr[i]] !== undefined) {
if (tmpObj[arr[i]] == '') return tmpObj[arr[i]];
tmpObj = tmpObj[arr[i]]
}
}

return tmpObj;
},
set : function(fieldName, value, reference, hard) {
hard = hard || !1;

var arr = [fieldName.replace(fieldValue.isObjReg, '')];
var match;
while (match = fieldValue.allReg.exec(fieldName)) {
arr.push(match[1]);
}

if (reference === undefined) return undefined;

var tmpObj = reference;

for (var i = 0; i < arr.length; i++) {
if (arr[i+1] != undefined) {
if (arr[i+1] == '') {
tmpObj[arr[i]] = tmpObj[arr[i]] || [];
if (hard) {
tmpObj[arr[i]] = value;
} else {
tmpObj[arr[i]].push(value);
}
} else {
tmpObj[arr[i]] = tmpObj[arr[i]] || {};
}
tmpObj = tmpObj[arr[i]];
} else if (arr[i] != '') {
tmpObj[arr[i]] = value;
}
}
}
};
function bind(obj, evt, fnc) {
// W3C model
if (obj.addEventListener) {
obj.addEventListener(evt, fnc, !1);
return !0;
}
// Microsoft model
else if (obj.attachEvent) {
return obj.attachEvent('on' + evt, fnc);
}
// Browser don't support W3C or MSFT model, go on with traditional
else {
evt = 'on'+evt;
if(typeof obj[evt] === 'function'){
// Object already has a function on traditional
// Let's wrap it with our own function inside another function
fnc = (function(f1,f2){
return function(){
f1.apply(this,arguments);
f2.apply(this,arguments);
}
})(obj[evt], fnc);
}
obj[evt] = fnc;
return !0;
}
}

var submit = function(data, callback) {
callback = callback || function() {};

var request = new XMLHttpRequest();

request.open(form.getAttribute('method') || "POST", form.action);
request.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8");
request.setRequestHeader('X-Requested-With','XMLHttpRequest');
request.send(fieldValue.serialize(data, null));

request.onreadystatechange = function() {
if (request.status == 200 && request.readyState == 4) {
callback(request.response);
}
if (request.status != 200) {
// errorCallback()
}
};

return !0;
};

function formToArray(form, emptyFields) {
var elements = form.elements;
var result = {};

if (!elements) {
return result;
}

for (var i = 0; i < elements.length; i++) {
var element = elements[i];
var name = element.name;

var getFieldValue = function (elem) {
var name = elem.name, type = elem.type, tag = elem.tagName.toLowerCase();

if (!name || elem.disabled || type == 'reset' || type == 'button' ||
(type == 'checkbox' || type == 'radio') && !elem.checked ||
(type == 'submit' || type == 'image') && elem.form && elem.form.clk != elem ||
tag == 'select' && elem.selectedIndex == -1) {
return null;
}

switch (tag) {
case 'select':
var index = elem.selectedIndex;
if (index < 0) {
return null;
}
var a = [], ops = elem.options;
var one = (type == 'select-one');
var max = (one ? index + 1 : ops.length);
for (var i = (one ? index : 0); i < max; i++) {
var op = ops[i];
if (op.selected) {
var v = op.value;
if (!v) {  /* IE fix */
v = (op.attributes && op.attributes['value'] && !(op.attributes['value'].specified)) ? op.text : op.value;
}
if (one) {
return v;
}
a.push(v);
}
}
return a;
case 'input':
switch (type) {
case 'radio':
return elem.value === '' ? null : elem.value;
case 'checkbox':
if (!elem.hasAttribute('value')) {
return 1;
}
return elem.value === '' ? 1 : elem.value;
case 'text':
case 'password':
case 'hidden':
return elem.value === '' ? null : elem.value;
break;
}
break;
case 'textarea':
return elem.value === '' ? null : elem.value;
}

return !1
};

if (!name || element.disabled || hasClass(element, 'default-text')/* || element.hasAttribute('disabled')*/) {
continue;
}

if (emptyFields && fieldValue.get(name, result) === undefined) {
fieldValue.set(name, null, result);
}

var value = getFieldValue(element);

if (value === null) {
continue;
}

if (!emptyFields && (value === '' || value === null || value === undefined)) continue;

if (element.hasAttribute('bitmask')) {
value = parseInt(value, 10) || 0;
if (value !== 0 || emptyFields) {
result[name] |= value;
}
continue;
}

fieldValue.set(name, value, result);
}

return result;
}

function processData(data) {
console.log(data);
var res = {};
for (var i in data) {
res[i] = data[i].join(':');
}
return res
}

form.submit = function() {
submit(
processData(formToArray(form, false))
);
};

bind(form, 'submit', function(e) {
if(e.preventDefault) e.preventDefault();
submit(
processData(formToArray(form, false))
);
e.returnValue = !1;
return !1;
});
0

Другие решения

***РЕДАКТИРОВАТЬ***

<form id="form" method="POST" action="filter.php">
<fieldset class="right-side">
<legend>Rarity</legend>
<div id="test">
<ul>
<li>
<input type="checkbox" id="rfilter" name="rfilter" value="1" />
<label for="rfilter">Common</label>
</li>
<li>
<input type="checkbox" id="rfilter" name="rfilter" value="2" />
<label for="rfilter">Free</label>
</li>
</ul>
</div>
</fieldset>
<fieldset class="right-side">
<legend>Color</legend>
<div id="test">
<ul>
<li>
<input type="checkbox" id="cfilter" name="cfilter" value="1"/>
<label for="cardfilter">Netural</label>
</li>
<li>
<input type="checkbox" id="cfilter" name="cfilter" value="2"/>
<label for="cardfilter">Green</label>
</li>
<li>
<input type="checkbox" id="cfilter" name="cfilter" value="3"/>
<label for="cardfilter">Red</label>
</li>
</ul>
</div>
</fieldset>
<fieldset class="right-side">
<legend>Size</legend>
<div id="test">
<ul>
<li>
<input type="checkbox" id="sfilter" name="sfilter" value="1"/>
<label for="sfilter">Big</label>
</li>
<li>
<input type="checkbox" id="sfilter" name="sfilter" value="2"/>
<label for="sfilter">Normal</label>
</li>
<li>
<input type="checkbox" id="sfilter" name="sfilter" value="3"/>
<label for="sfilter">Small</label>
</li>
</ul>
</div>
</fieldset>
<input type="submit" id="filterapply" value="Filter Apply" />
</form>
<script type="text/javascript">
var executeSubmit = false;
var parameters = {};
jQuery('#form').submit(function(e){
if(!executeSubmit){
e.preventDefault();
var parameter = '';
jQuery('input[type=checkbox]:checked').each(function(){
var name = jQuery(this).attr('name');
if(typeof parameters[name] == 'undefined'){
parameters[name] = [];
}
parameters[name].push(jQuery(this).val());
});

for(key in parameters){
parameter += parameter == '' ? '' : '&';
parameter += key + '=' + parameters[key].join().replace(/\,/g,':');
}
console.log(parameter);
jQuery(this).attr('action', jQuery(this).attr('action') + '?' + parameter);
executeSubmit = true;
jQuery(this).trigger('submit');
}
});
</script>

Там я только что написал вам весь код, он работает нормально, вы можете получить доступ к переменной в php, используя $ _GET [‘cfilter’], так как вы хотели, чтобы она была в URL действия.

Я только что сделал этот код, он делает то, что вы хотите, и поместил его в URL, как вы описали.

0

По вопросам рекламы ammmcru@yandex.ru
Adblock
detector