时间戳

首页 > 解决方案 > 将多个值从一个 html 页面传递到另一个 html 页面

jquery - 将多个值从一个 html 页面传递到另一个 html 页面

问题描述

我在 Page1.html 中使用 jquery 进行了一些计算，方法是使用 get 函数从输入框中获取值，并通过使用 jquery 的 set 函数在 inputbox8 中设置来存储变量 tax6 及其值。我已经使用 window.location.href 在 Page2.html 中的变量 tax7 中传递 inputbox8 和 inputbox4 的值。在 Page2.html 中，我使用了 document.url.indexof，但我没有得到 inputbox9 和 inputbox10 中的值。它只是连接值。请帮帮我。

Page1.html

<!DOCTYPE html>
<html>
<body>

<p>Click the button to get a time-based greeting:</p>
INCOME: <input type="text" id="myinput" value="">
DEDUCTION: <input type="text" id="myinput1" value="" readonly>
GROSS INCOME: <input type="text" id="myinput2" value="" readonly>
TAX: <input type="text" id="myinput3" value=""readonly>
NET INCOME: <input type="text" id="myinput4" value="">

<button id="click1">CALCULATE NET INCOME</button><br><br>

NET INCOME: <input type="text" id="myinput5" value="">
AGRI INCOME: <input type="text" id="myinput6" value="">
OTHER SOURCE: <input type="text" id="myinput7" value="">
TOTAL INCOME: <input type="text" id="myinput8" value="">

<button id="click2">CALCULATE TOTAL INCOME</button>

<button id="click3">next</button>


<p id="demo"></p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
	$("#click1").click(function a(){
        
		myfunction();
        
    });

   
function myfunction() {
var tax, tax1, tax2;
var inc = $("#myinput").val();
	alert(inc);
	 $("#myinput1").val(10000);

	 tax1 = inc - 10000;

	 $("#myinput2").val(tax1);
    	
    	if (tax1 <=250000) {
        tax = "0";
   	 } 
	
	else if (tax1 >250000 && tax1<=500000) {
	tax = (tax1 - 250000)*5/100;
	 }

	else if (tax1 >500000 && tax1<=1000000) {
	tax = 12000 + ((tax1 - 500000)*20/100);
	 }

	else { tax = 112000 + ((tax1 - 1000000)*30/100);
	 }

	$("#myinput3").val(tax);

	
	tax2 =  tax1 - tax;
	

	$("#myinput4").val(tax2);
	$("#myinput5").val(tax2);
		
	
}

 $("#click2").click(function b(){

     
		myfunction1();
        
    });
	function myfunction1() {
var tax4, tax5, tax6, tax7;
	 var ni=$("#myinput4").val();

	
	var tax4 = $("#myinput6").val();
	var tax5 = $("#myinput7").val();


m=parseInt(ni);	
k=parseInt(tax4);
l=parseInt(tax5);
	tax6 = k + l+m;

	$("#myinput8").val(tax6);		

	$("#click3").click(function c(){
		window.location.href="getset-index2.html?tax7="+$('#myinput8').val()+$('#myinput4').val();
	});

	}
 

});
</script>

</body>
</html>


Page2.html

<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>


<body>
TOTAL INCOME: <input type="text" id="myinput9" value="" readonly>
NET INCOME: <input type="text" id="myinput10" value="">
EMI CAR: <input type="text" id="myinput11" value="">
TOTAL NET INCOME: <input type="text" id="myinput12" value="">

<button id="click4">CALCULATE NET INCOME</button><br><br>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>


$(document).ready(function(){
	
	$("#click4").click(function d(){
	

			myfunction2();
	});
		function myfunction2() {
			
var x, tax8, tax9, tax10;

var x = document.URL.indexOf('?tax7=');
	
	$("#myinput9").val(x);	

}
});
</script>
</body>
</html>

标签： jquery

解决方案

我改变了你的代码如下。如果你想输入 inputbox9 和 inputbox10 值，那么你想分别发送它。

window.location.href="2.html?tax7="+$('#myinput8').val()+"&tax10="+$('#myinput4').val();

如果要获取 url 参数值，请使用上述修改

var urlParams = new URLSearchParams(window.location.search);
        tax9 = urlParams.get('tax7');
    tax10 = urlParams.get('tax10');
    $("#myinput9").val(tax9);   
    $("#myinput10").val(tax10);

你可以在下面找到完整的代码。

Page1.html

    <!DOCTYPE html>
<html>
<body>

<p>Click the button to get a time-based greeting:</p>
INCOME: <input type="text" id="myinput" value="">
DEDUCTION: <input type="text" id="myinput1" value="" readonly>
GROSS INCOME: <input type="text" id="myinput2" value="" readonly>
TAX: <input type="text" id="myinput3" value=""readonly>
NET INCOME: <input type="text" id="myinput4" value="">

<button id="click1">CALCULATE NET INCOME</button><br><br>

NET INCOME: <input type="text" id="myinput5" value="">
AGRI INCOME: <input type="text" id="myinput6" value="">
OTHER SOURCE: <input type="text" id="myinput7" value="">
TOTAL INCOME: <input type="text" id="myinput8" value="">

<button id="click2">CALCULATE TOTAL INCOME</button>

<button id="click3">next</button>


<p id="demo"></p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#click1").click(function a(){

        myfunction();

    });


function myfunction() {
var tax, tax1, tax2;
var inc = $("#myinput").val();
    alert(inc);
     $("#myinput1").val(10000);

     tax1 = inc - 10000;

     $("#myinput2").val(tax1);

        if (tax1 <=250000) {
        tax = "0";
     } 

    else if (tax1 >250000 && tax1<=500000) {
    tax = (tax1 - 250000)*5/100;
     }

    else if (tax1 >500000 && tax1<=1000000) {
    tax = 12000 + ((tax1 - 500000)*20/100);
     }

    else { tax = 112000 + ((tax1 - 1000000)*30/100);
     }

    $("#myinput3").val(tax);


    tax2 =  tax1 - tax;


    $("#myinput4").val(tax2);
    $("#myinput5").val(tax2);


}

 $("#click2").click(function b(){


        myfunction1();

    });
    function myfunction1() {
var tax4, tax5, tax6, tax7;
     var ni=$("#myinput4").val();


    var tax4 = $("#myinput6").val();
    var tax5 = $("#myinput7").val();


m=parseInt(ni); 
k=parseInt(tax4);
l=parseInt(tax5);
    tax6 = k + l+m;

    $("#myinput8").val(tax6);       

    $("#click3").click(function c(){
        window.location.href="2.html?tax7="+$('#myinput8').val()+"&tax10="+$('#myinput4').val();
    });

    }


});
</script>

</body>
</html>

Page2.html

<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>


<body>
TOTAL INCOME: <input type="text" id="myinput9" value="" readonly>
NET INCOME: <input type="text" id="myinput10" value="">
EMI CAR: <input type="text" id="myinput11" value="">
TOTAL NET INCOME: <input type="text" id="myinput12" value="">

<button id="click4">CALCULATE NET INCOME</button><br><br>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>


$(document).ready(function(){

    $("#click4").click(function d(){


            myfunction2();
    });
        function myfunction2() {

var x, tax8, tax9, tax10;


var urlParams = new URLSearchParams(window.location.search);
    tax9 = urlParams.get('tax7');
    tax10 = urlParams.get('tax10');
    $("#myinput9").val(tax9);   
    $("#myinput10").val(tax10); 

}
});
</script>
</body>
</html>

推荐阅读