2010-10-24 13 views
17

के साथ फॉर्म फ़ील्ड से यूआरएल बनाएं मेरे पास एक त्वरित सवाल है, मुझे कहीं और उपयुक्त समाधान नहीं मिल रहा है। मैं जावास्क्रिप्ट या jquery के साथ एक यूआरएल बिल्डर फॉर्म बनाने की कोशिश कर रहा हूँ। मूल रूप से, यह दो फॉर्म फ़ील्ड का मान लेगा, उन्हें प्रीसेट यूआरएल में जोड़ें और सबमिट पर तीसरे क्षेत्र में दिखाएं।जावास्क्रिप्ट या jquery

परिणामी URL http://www.mydomain.com/index.php?variable1=12&variable2=56

अब हो सकता है, इस प्रपत्र के "कार्रवाई" नहीं है और एप्लिकेशन का एक यूआरएल (चर हड़पने के लिए) नहीं पढ़ सकते हैं, ताकि वह पृष्ठ में किया जा सकता है ।

परिणामी यूआरएल "यूआरएल" नामित फ़ील्ड में दिखाया जाएगा। पहले से

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

धन्यवाद:

यहाँ प्रपत्र का एक नमूना है! ट्रॉय

+1

प्रीसेट यूआरएल कहां से आता है? –

+0

यह भी देखें: http://stackoverflow.com/questions/75980/when-are-you-supposed-to-use-escape-instead-of-encodeuri-encodeuricomponent –

उत्तर

23

jQuery serialize जो बनाता क्वेरी स्ट्रिंग को महत्व देता

एस है: जिसमें cse youd निम्नलिखित की तरह कुछ है ओ आप पूरे फार्म करना चाहते हैं:

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

आप, केवल कुछ ही क्षेत्रों करने के लिए की तुलना में सिर्फ चयनकर्ता उन क्षेत्रों का चयन करना चाहते हैं।

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

कैसे की तरह कुछ के बारे में ...

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

यह type='text' साथ में form1 पर सभी <input> रों का चयन करेंगे, और उन्हें एक क्वेरी स्ट्रिंग में श्रेणीबद्ध। encodeURIComponent() देखें।


Orrrr ..... आप बस .serialize() का उपयोग कर सकते हैं। धन्यवाद, @prodigitalson।

+0

चूंकि आप पहले से ही जेक्यू का उपयोग कर रहे हैं, तो यह सब क्यों करें बस '$ (इनपुट चयनकर्ता) का उपयोग कर सकते हैं। serialize();'? – prodigitalson

+0

आप को यह भी शामिल है: अगर (प्रत्येक <$ (यह)। लम्बाई) {str + = "&";} प्रत्येक लूप की अंतिम पंक्ति में, क्योंकि पिछली बार आपके पास ट्रिमिंग "&" है। – netadictos

0

निम्नलिखित की तरह कुछ काम करना चाहिए:

var partFields = '#variable1,#variable2'; 

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

हालांकि जब तक आप लोगों यूआरएल आप एक छिपी हुई फ़ील्ड का उपयोग करना चाहें और प्रदर्शन और URL मान प्रस्तुत करने के लिए एक rgeular तत्व ओवरराइड करने के लिए सक्षम होना चाहते हैं

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

मैं @clarkf लाइन का उपयोग करूंगा: var partFields = $ ('# form1')। ढूंढें ('इनपुट [टाइप = टेक्स्ट]')। नहीं ('# url'); यहां आपके पास कामकाजी डेमो है: http://www.jsfiddle.net/dactivo/4Nmcx/ – netadictos

संबंधित मुद्दे