从url获取url变量用jquery形成

Question

我有一个只显示价格但不提交任何内容的html表单。这现在工作正常。

如何才能添加运行此表单的功能，只需从url变量中运行，那么如果您使用url变量来访问此页面，则不必单击提交按钮？

类似这样的：www.my-domain.com/formurl/?smoker=yes & amount = 500000 & age = 20当页面加载完成后应该显示价格，并根据url改变表单值变量。

这里是我的html：

<form class="form-horizontal"> 
     <label class="control-label" for="smoker">Do you smoke?</label> 
     <select id="smoker" name="smoker"><option value="No">No</option><option value="Yes">Yes</option></select> 

     <label class="control-label" for="amount">Amount</label> 
     <select id="amount" name="amount"><option value="500000">500 000</option><option value="1000000">1 000 000</option><option value="1500000">1 500 000</option><option value="2000000">2 000 000</option></select> 

     <label class="control-label" for="age">Age</label> 
     <input id="age" name="age" type="text" /> 


     <button class="btn" id="calc" type="submit">Show price</button> 
</form> 


<div class="alert alert-info hide" id="price-result"></div> 

---

$(document).ready(function() { 

    //JSON object 
    var obj = {"data": 
    [ 
     {"age": "18","500000": "645","1000000": "1018","1500000": "1391","2000000": "1764","smoker": "No"}, 
     {"age": "19","500000": "645","1000000": "1018","1500000": "1391","2000000": "1764","smoker": "No"}, 
     {"age": "20","500000": "645","1000000": "1018","1500000": "1391","2000000": "1764","smoker": "No"}, 
     {"age": "18","500000": "964","1000000": "1544","1500000": "2125","2000000": "2705","smoker": "Yes"}, 
     {"age": "19","500000": "964","1000000": "1544","1500000": "2125","2000000": "2705","smoker": "Yes"}, 
     {"age": "20","500000": "964","1000000": "1544","1500000": "2125","2000000": "2705","smoker": "Yes"} 
    ] 

    };   

    //Find the value when form is submitted 
    $('#calc').click(function(e) { 
     e.preventDefault(); 

     var data = jQuery.grep(obj.data, function(element, index){ 
      return element.age && element.smoker; // retain appropriate elements 

     });  

     var selectedSmoke = $('#smoker').val().toString().toLowerCase(); 
     var selectedAmount= $('#amount').val().toString().toLowerCase(); 
     var selectedage = $('#age').val().toString().toLowerCase(); 

     var amount = ""; 

     $.each(data,function(k, v){ 

      if(data[k].age.toString().toLowerCase() == selectedage && 
       data[k].smoker.toString().toLowerCase() == selectedSmoke && 
       data[k][selectedAmount] != undefined){ 

       amount = data[k][selectedAmount]; 


      } 

     }); 


     //Empty the div 
     $('#price-result').empty(); 

     //Show the result in div 
     var displayText = "<h3>Price:" + amount + "</h3>"; 

     $("#price-result").append(amount == "" ? "Not a valid age" : displayText).removeClass("hide"); 

     return false;//Stop page from reloading 

    }); 


}); 

Answer 1

填写input形式URL

function getURLParameter(name) { 
    return decodeURI(
    (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1] 
    ); 
} 
var smoker = getURLParameter('smoker'); 
var amount = getURLParameter('amount'); 
var age = getURLParameter('age'); 

$('#smoker').val(smoker); 
$('#amount').val(amount); 
if(age != 'null'){ 
    $('#age').val(age); 
    calculAmount(obj); 
} 

//Find the value when form is submitted 
$('form').submit(function(e) { 
    e.preventDefault(); 
    calculAmount(obj); 
}); 

将数据发送到服务器，你可以使用get，post或ajax jQuery的

$('form').submit(function(e)

使用get通过更换$('#calc').click(function(e)：

//Empty the div 
$('#price-result').empty(); 

$.get("www.my-domain.com/formurl/", 
{ smoke: selectedSmoke , amount: amount ,age: selectedage}); 

或

$.post('www.my-domain.com/formurl/', $("form").serialize(), function(data) { 
    console.log("data sent"); 
}); 

或

$.ajax({ 
     type : 'POST', 
     url : 'www.my-domain.com/formurl/', 
     data: $("form").serialize(), 
     success : function(data){            
        console.log("data sent"); 
      }, 
      error: function (request, status, error) { 
       console.log(request.responseText); 
      } 
     }); 

Answer 2

如果你想利用得到的网址增值经销商，你可以不喜欢它

这

$(document).ready(function(){ 
    var getVars = getURLVariables(); 
    for(var i in getVars){ 
     if(i == "smoke"){ 
      $('#smoke').val(getVars[i]); 
     } 
    } 

}); 

function getURLVariables(){ 
    var getVars = []; 
    var split = location.href.split('?')[1].split('&'); 
    if(split != null){ 
     for(var i in split){ 
      var parts = split[i].split('=') 
      getVars[parts[0]] = parts[1]; 
     } 
    } 
}