JQuery или Javascript для анализа строки запроса при отправке - PullRequest
Новая
       9

JQuery или Javascript для анализа строки запроса при отправке

0 голосов
/ 15 декабря 2011

Эта форма имеет несколько вариантов с помощью флажка. Например. Pet You Own является множественным выбором, и есть различные варианты, такие как Cat, Dog, Mule и т. Д.

Теперь по умолчанию отправленная строка запроса будет выглядеть так: 

?pet=dog&pet=cat&pet=mule

учитывая, что все 3 проверены.

Мне нужен способ, чтобы разобрать это так, чтобы строка запроса была похожа на: 

?pet=dog,cat,mule

Другое требование заключается в том, что в форме есть другие параметры / входы, поэтому она должна работать в сочетании с другими входами стандартной формы.

Ответы [ 4 ]

4 голосов
/ 15 декабря 2011

Формат, который вы сейчас видите, является обычным форматом.Если бы поля формы были названы pet[], а не pet, ваш сервер мог бы интерпретировать результат как массив.name атрибут ваших флажков, чтобы они не были опубликованы, и вместо этого разместите скрытое поле, которое содержит значение ваших флажков в виде строки, разделенной запятой: 

$('#my-form').submit(function() {

    var pets = [];
    $('input[name=pet]:checked').each(function() {
        pets.push($(this).val());
    });

    // stop checkboxes from being posted
    $('input[name=pet]').attr('name','');

    // have an input field be posted instead
    $('#my-hidden-field')
        .val(pets.join(','))
        .attr('name', 'pet');

});
1 голос
/ 15 декабря 2011

Необходима небольшая очистка, но с помощью простого JS вы можете достичь 

<html>
    <head>
    <title>My Page</title>
    <script>
    function myFunction(){
    var options = "";
    if(document.getElementById("option1").checked){
    options = options+"Milk";
    }
    if(document.getElementById("option2").checked){
    options = options+",Butter";
    }
    if(document.getElementById("option3").checked){
    options = options+",Cheese";
    window.location = "end.html&options="+options
    }
    }
    </script>
    </head>
    <body>

    <div align="center"><br>
    <input id="option1" type="checkbox" name="option1" value="Milk"> Milk<br>
    <input id="option2" type="checkbox" name="option2" value="Butter" checked> Butter<br>
    <input id="option3" type="checkbox" name="option3" value="Cheese"> Cheese<br>
    <br>

    </div>
    <a href="#" onClick="myFunction();">Button to submit </a>
    </body>
    </html>
1 голос
/ 15 декабря 2011

Я предлагаю вам сделать эту работу на стороне сервера.Когда ваш сервер получит этот запрос, он получит массив, который называется pet и имеет три элемента: собака, кошка и мул.Вы можете легко соединить их.

==== Я реализую это с помощью JavaScript: 

var str = window.location.href;
var queryString = "", temp = {};
str = str.substring(str.lastIndexOf("?") + 1);
str.split("&").some(function(item) {
var tarr = item.split("=");
    if(typeof temp[tarr[0]] == "undefined") {
        temp[tarr[0]] = tarr[1];
    } else if(typeof temp[tarr[0]] == "string") {
        temp[tarr[0]] += "," + tarr[1];
    }
});
// Make queryString
for(var i in temp) {
    queryString += "&" + i + "=" + temp[i];
}
queryString = queryString.replace(/^./,"");

// 
var href = window.location.href;
console.log("before:", href);
href = href.replace(/\?.*$/, "?");
// the url is that you want
console.log("after:", href + queryString);
//window.location.href = href + queryString;

ВЫХОД:

до: http://www.boutell.com/newfaq/creating/forcedownload.html?pet=dog&pet=cat&pet=mule&animal=camel
после: http://www.boutell.com/newfaq/creating/forcedownload.html?pet=dog,cat,mule&animal=camel

0 голосов
/ 15 декабря 2011

Назовите ваши флажки как p1, p2 и т. Д. В вашей форме есть скрытое поле с именем «pet».Непосредственно перед отправкой с использованием JS, установите значение вашей скрытой переменной так, как вам нужно, и верните true. 

function beforeSubmit() {
  var p = '';
  if($('#p1').attr('checked')==true) p += ',cat';
  if($('#p2').attr('checked')==true) p += ',dog';
  ...
  p = p.substring(1); // strip the , at 0
  $('#pet').val(p);
  return true;
}

, и ваша форма должна выглядеть следующим образом: 

<form ... onsubmit="return beforeSubmit()">
...
<input type="checkbox" name="p1" id="p1">Cat<br>
<input type="checkbox" name="p2" id="p2">Dog<br>
...
<input type="hidden" name="pet" id="pet" value="">
</form>
...