Crea URL da campi modulo con Javascript o jquery

Question

Ho una domanda veloce, non riesco a trovare una soluzione adatta a nessun altro. Sto provando a creare un modulo di creazione URL con Javascript o jquery. Bascially, prenderà il valore dei due campi del modulo, li aggiungerà a un URL preimpostato e lo mostrerà su un terzo campo su submit.

L'URL risultante potrebbe essere http://www.mydomain.com/index.php?variable1=12&variable2=56

Ora, questo non è l ' "azione" del modulo e l'applicazione non può leggere un URL (per afferrare le variabili) quindi deve essere fatto in pagina .

L'URL risultante verrà visualizzato nel campo denominato "url".

Ecco un esempio della forma:

<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> 

Grazie in anticipo! Troy

Answer 1

jQuery ha serialize che costruisce valori querystring

S o se si vuole fare l'intero modulo:

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

Se si vuole fare solo alcuni campi, non solo rendono il selettore selezionare quei campi.

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

Answer 2

ne dite qualcosa di simile ...

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); 

Questo selezionerà tutte <input> s su in form1 con type='text', e li concatena in una stringa di query. Vedi encodeURIComponent().

---

Orrrr ..... si può usare solo .serialize(). Grazie, @prodigitalson.

Answer 3

qualcosa come il seguente dovrebbe funzionare:

var partFields = '#variable1,#variable2'; 

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

Tuttavia se non si vuole che la gente di essere in grado di ignorare l'URL che si potrebbe desiderare di utilizzare un campo nascosto e un elemento di rgeular per la visualizzazione e la presentazione del valore di URL in cui youd CSE hanno qualcosa di simile al seguente:

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 
});