使用jQuery从URL获取URL变量以形成表单 [英] Get url variables from url to form with jquery

问题描述

我有一个HTML表单，该表单仅显示价格，但不向服务器提交任何内容.现在工作正常.

I have a html form which only shows a price, but don't submit anything to the server. This works fine now.

如何添加仅通过url变量运行此表单的功能，因此如果您要访问带有url变量的页面，则不必单击提交"按钮?

How can I add the function of running this form just from url variables, so you don't have to click the submit button if you are coming to this page with url variables?

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

Something like this: www.my-domain.com/formurl/?smoker=yes&amount=500000&age=20 should display the price when the page is finished loading, and change the form values according to the url variables.

这是我的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

    });


});

推荐答案

以填写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

To send data to server, you can use get, post or ajax jquery

将$('#calc').click(function(e)替换为$('form').submit(function(e)

使用get:

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

这篇关于使用jQuery从URL获取URL变量以形成表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！