Xây dựng URL từ các Trường Mẫu với Javascript hoặc jquery

Question

Tôi có một câu hỏi nhanh, tôi dường như không thể tìm ra giải pháp phù hợp cho bất kỳ nơi nào khác. Tôi đang cố gắng tạo biểu mẫu trình tạo URL bằng Javascript hoặc jquery. Về cơ bản, nó sẽ lấy giá trị của hai trường biểu mẫu, thêm chúng vào một url được đặt trước và hiển thị nó trên trường thứ ba khi gửi.

URL kết quả có thể là http://www.mydomain.com/index.php?variable1=12&variable2=56

Bây giờ, đây không phải là "hành động" của hình thức và ứng dụng không thể đọc được một URL (để lấy các biến) vì vậy nó phải được thực hiện trong trang .

URL kết quả sẽ được hiển thị trong trường "url" có tên.

Dưới đây là một ví dụ về các dạng:

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

Cảm ơn trước! Troy

Answer 1

jQuery có serialize đó xây dựng các chuỗi truy vấn giá trị

S o nếu bạn muốn thực hiện toàn bộ biểu mẫu:

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

Nếu bạn chỉ muốn thực hiện một vài trường, chỉ cần chọn bộ chọn những trường đó.

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

Answer 2

Làm thế nào về một cái gì đó giống như ...

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

này sẽ chọn tất cả <input> s trên trong form1 với type='text' và nối chúng thành một chuỗi truy vấn. Xem encodeURIComponent().

---

Orrrr ..... bạn chỉ có thể sử dụng .serialize(). Cảm ơn bạn, @prodigitalson.

Answer 3

giống như sau nên làm việc:

var partFields = '#variable1,#variable2'; 

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

Tuy nhiên, trừ khi bạn muốn mọi người có thể ghi đè URL mà bạn có thể muốn sử dụng một lĩnh vực ẩn và một yếu tố rgeular để trưng bày và nộp giá trị URL trong đó youd cse có một cái gì đó như sau:

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