Build-URL aus Formularfeldern mit Javascript oder jquery

Question

Ich habe eine kurze Frage, ich kann nicht finden, eine geeignete Lösung zu irgendwo anders. Ich versuche, ein URL-Builder-Formular mit Javascript oder jquery zu erstellen. Im Grunde nimmt es den Wert der zwei Formularfelder an, fügt sie zu einer voreingestellten URL hinzu und zeigt sie auf einem dritten Feld beim Senden an.

Die resultierende URL http://www.mydomain.com/index.php?variable1=12&variable2=56

Jetzt sein könnte, ist dies nicht die „Aktion“ des Formulars und die App eine URL nicht lesen kann (die Variablen greifen), so hat es in Seite getan werden .

Die resultierende URL wird im Feld "url" angezeigt.

Hier ist ein Beispiel der Form:

<form id="form1" name="form1" method="post" action=""> 
    <p> 
    <label>Variable 1 
     <input type="text" name="variable1" id="variable1" /> 
    </label> 
    </p> 
    <p> 
    <label>Variable 2 
     <input type="text" name="variable2" id="variable2" /> 
    </label> 
    </p> 
    <p> 
    <label>URL 
     <input type="text" name="url" id="url" /> 
    </label> 
    </p> 
    <p> 
    <input type="submit" name="button" id="button" value="Submit" /> 
    </p> 
</form> 

Vielen Dank im Voraus! Troy

Answer 1

jQuery hat serialize, die die Abfragezeichenfolgeflag

S-Werte baut o Wenn Sie die gesamte Form zu tun:

alert($("#form1").serialize()); 

Wenn Sie nur ein paar Felder tun wollen, als nur die Wähler diese Felder machen wählen.

alert($("#variable1, #variable2").serialize()); 

Answer 2

Wie wäre es so etwas wie ...

var inputs = $('#form1').find('input[type=text]').not('#url'); 
var str = "http://www.base.url/path/file.ext?" 
inputs.each(function (i, item) { 
    str += encodeURIComponent(item.name) + "=" + encodeURIComponent(item.value) + "&"; 
}); 
$('#url').val(str); 

Dadurch werden alle <input> s auf in form1 mit type='text' auswählen und sie in einen Query-String verketten. Siehe encodeURIComponent().

---

Orrrr ..... Sie könnten nur .serialize() verwenden. Danke, @ Prodigitalson.

Answer 3

So etwas wie die folgenden funktionieren sollte:

var partFields = '#variable1,#variable2'; 

$(partFields).change(function(){ 
    var url = 'static/url/to/file.php?'; 
    $('#url').val(url+$(partFields).serialize()); 
}); 

Allerdings, wenn Sie Menschen wollen in der Lage sein, die URL außer Kraft zu setzen Sie für die Anzeige und Eingabe des URL-Wert ein verstecktes Feld und ein rgeular Element verwenden möchten in dem Sie haben cse youd etwas wie folgt aus:

var partFields = '#variable1,#variable2'; 

$(partFields).change(function(){ 
    var url = 'static/url/to/file.php?'; 
    var urlValue = url+$(partFields).serialize(); 
    $('#url-display').text(urlValue); // set the displaying element 
    $('#url').val(urlValue); // set the hidden input value 
});