how to pass value one page to another page using html

how to pass value one page to another page using html - javascript

Hi I have a Pricing table that was created in javascript, what I need to know is how to pass the values in row 1 or 2 into a aspx page using javascript with the click of a button
Here my code:
<select style="padding:10px;background: #cb1c69;color: #FFFFFF; font-size:18px; border-radius: 11px;">
<option>Choose Your Plan</option>
<option value="red">Monthly</option>
<option value="green">Yearly</option>
<option value="blue">Perpetual</option>
</select>
Edition:
<div class="pricetable-column red box" style="width: 33.3333333333%; border-right:1px solid gray;">
<div class="pricetable-column-wall">
<div class="pricetable-header">
<div class="pricetable-fld-name">
Lite</div>
<div class="pricetable-header-inner">
<div class="pricetable-fld-price">
<span class="cur"></span>750/- Monthly</div>
<p>
( Minimum 6 Month)</p>
</div>
</div>
<div class="ribbon">
HOT</div>
<div class="pricetable-button-container1">
Buy Now
</div>
</div>
</div>
I want if i click the buy now button and value get go to another page. I mean billing options page
please help me sir
I don't know how to use javascript.
update code:
Source code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Name:
<input type="text" id="txtName" name="Name" value="Mudassar Khan" /><br />
<br />
Technology:
<select id="ddlTechnolgy" name="Technology">
<option value="ASP.Net">ASP.Net</option>
<option value="PHP">PHP</option>
<option value="JSP">JSP</option>
</select>
<input type="button" id="btnQueryString" value="Send" />
<script type="text/javascript">
$(function () {
$("#btnQueryString").bind("click", function () {
var url = "MyPage2.html?name=" + encodeURIComponent($("#txtName").val()) + "&technology=" + encodeURIComponent($("#ddlTechnolgy").val());
window.location.href = url;
});
});
</script>
Destination Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
var queryString = new Array();
$(function () {
if (queryString.length == 0) {
if (window.location.search.split('?').length > 1) {
var params = window.location.search.split('?')[1].split('&');
for (var i = 0; i < params.length; i++) {
var key = params[i].split('=')[0];
var value = decodeURIComponent(params[i].split('=')[1]);
queryString[key] = value;
}
}
}
if (queryString["name"] != null && queryString["technology"] != null) {
var data = "<u>Values from QueryString</u><br /><br />";
data += "<b>Name:</b> " + queryString["name"] + " <b>Technology:</b> " + queryString["technology"];
$("#lblData").html(data);
}
});
</script>
Any problem my code:

Plese try this code according to your requirement:
Source Page:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Name:
<input type="text" id="txtName" name="Name" value="Mudassar Khan" /><br />
<br />
Technology:
<select id="ddlTechnolgy" name="Technology">
<option value="ASP.Net">ASP.Net</option>
<option value="PHP">PHP</option>
<option value="JSP">JSP</option>
</select>
<input type="button" id="btnQueryString" value="Send" />
<script type="text/javascript">
$(function () {
$("#btnQueryString").bind("click", function () {
var url = "Page2.htm?name=" + encodeURIComponent($("#txtName").val()) + "&technology=" + encodeURIComponent($("#ddlTechnolgy").val());
window.location.href = url;
});
});
</script>
Destination Page
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<span id = "lblData"></span>
<script type="text/javascript">
var queryString = new Array();
$(function () {
if (queryString.length == 0) {
if (window.location.search.split('?').length > 1) {
var params = window.location.search.split('?')[1].split('&');
for (var i = 0; i < params.length; i++) {
var key = params[i].split('=')[0];
var value = decodeURIComponent(params[i].split('=')[1]);
queryString[key] = value;
}
}
}
if (queryString["name"] != null && queryString["technology"] != null) {
var data = "<u>Values from QueryString</u><br /><br />";
data += "<b>Name:</b> " + queryString["name"] + " <b>Technology:</b> " + queryString["technology"];
$("#lblData").html(data);
}
});
</script>

You have multiple options to do so:
sessionStorage
Example:
sessionStorage.setItem('key', 'value');//to set value
sessionStorage.getItem('key');//to get the value
localStorage
Example:
localStorage.setItem('key', 'value');//to set value
localStorage.getItem('key');//to get the value
Cookies
Example: Ref
var createCookie = function(name, value, days) {
var expires;
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toGMTString();
}
else {
expires = "";
}
document.cookie = name + "=" + value + expires + "; path=/";
}
function getCookie(c_name) {
if (document.cookie.length > 0) {
c_start = document.cookie.indexOf(c_name + "=");
if (c_start != -1) {
c_start = c_start + c_name.length + 1;
c_end = document.cookie.indexOf(";", c_start);
if (c_end == -1) {
c_end = document.cookie.length;
}
return unescape(document.cookie.substring(c_start, c_end));
}
}
return "";
}
As a key in Query string
Ex:
http://www.example.com?myKey=myVal

If I understand correctly, you want to pass values that a user selects in one page to another page. I would recommend you to pass your values using key value pairs in the URL. JavaScript has neat way of doing it. For example :
var month = "July"
var date = "1"
var URL = "yourpage.aspx?month="+month+"&date="+date
location.href=URL
By this, the URL will look something like this youpage.aspx?month=July&date=1
The parameters in the URL start after the question mark "?" and the key value pairs are separated by "&". location.href will redirect your page to that URL. and then you can read these parameters using .net on the server side. I hope this helps.

Related

Get all spreadsheet data to client side first, then "find row number and same row values using javascript for a specific value"

Code.js
/**
* Load Spreadsheet by ID
* Get all Sheets present in that spreadsheet
* Loop through each sheet
* Create an object with sheet's name as Key of the object
* and sheets data as Value of the object
* Return the key-value paired object
*/
function doGet(e) {
return HtmlService
.createHtmlOutputFromFile('form.html')
.setTitle("Exam Result");
}
function getAllResult()
{
var id = '1da6d8rfWgZrG2Cnpyho6YDx0C7Me4o20rM4PhDi8yCY'; // ID of the Result spreadsheet
var ss = SpreadsheetApp.openById(id);
var sheets = ss.getSheets(); // get all the sheets in the spreadsheeet
var allSheetsData = {}; // initialize javascript object
var sheetName = '';
var sheetValues;
for (i = 0; i < sheets.length; i++) {
sheetName = sheets[i].getName();
sheetValues = sheets[i].getDataRange().getValues();
allSheetsData[sheetName] = sheetValues;
}
//Logger.log(allSheetsData);
return allSheetsData;
}
index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
window.onload = function() {
init(); // initial function to run on page load
};
// initializing object that will be storing all result data
var allResultData = {};
// loading image
var loading = '<img width="25px" ' +
'src="https://lh6.googleusercontent.com/PshQKOjKS5j6IEaEXZ6r7-JOFZwYOBopBt82Q-kTGdRcW6wi3SBHDAUHebb2yreOeTpGfzgs=w1280-h661"> ' +
'Loading...';
/**
* First function to run on page load
*/
function init() {
document.getElementById('progressClass').innerHTML = loading; // show loading image
/**
* This calls getAllResult() function of Code.gs
* The returned value from getAllResult() is passed to populateClass(value) function
* present in this html file
*/
google.script.run
.withSuccessHandler(populateClass)
.getAllResult();
}
/**
* Second function to run after init() function
* Populates the "Class" select box
*/
function populateClass(value) {
document.getElementById('progressClass').innerHTML = ''; // hide loading image
allResultData = value; // all result data is stored in allResultData object
var className = Object.keys(value);
var classes = '<option>Please Select</option>';
for (i = 0; i < className.length; i++) {
classes += "<option>" + className[i] + "</option>";
}
document.getElementById("class").innerHTML = classes;
}
function populateSymbolNumber(value)
{
{var day = "<option>Day</option>";
var data = allResultData[value]
for (i=1; i < 32; i++) { // start from i=1, skipping 1st row as it's heading
day += "<option value="+i+">" + data[i][3] + "</option>";
}
document.getElementById("day").innerHTML = day;}
{var month = "<option>Month</option>";
var data = allResultData[value]
for (i=1; i < 13; i++) { // start from i=1, skipping 1st row as it's heading
month += "<option value="+i+">" + data[i][4] + "</option>";
}
document.getElementById("month").innerHTML = month;}
{var year = "<option>Year</option>";
var data = allResultData[value]
for (i=1; i < 122; i++) { // start from i=1, skipping 1st row as it's heading
year += "<option value="+i+">" + data[i][5] + "</option>";
}
document.getElementById("year").innerHTML = year;}
{var symbol = "<option>Please Select</option>";
var data = allResultData[value]
for (i=1; i < data.length; i++) { // start from i=1, skipping 1st row as it's heading
symbol += "<option value="+i+">" + data[i][0] + "</option>";
}
document.getElementById("symbol").innerHTML = symbol;}
}
/**
* Show name of student and marks result
*/
function submitForm(value) {
var grade = document.getElementById("class");
var gradeValue = grade.options[grade.selectedIndex].value;
var classResult = allResultData[gradeValue];
var symbol = document.getElementById("symbol");
var day = document.getElementById("day");
var month = document.getElementById("month");
var year = document.getElementById("year");
var symbolText = symbol.options[symbol.selectedIndex].text;
var DayText = day.options[day.selectedIndex].text;
var MonthText = month.options[month.selectedIndex].text;
var YearText = year.options[year.selectedIndex].text;
var symbolValue = symbol.options[symbol.selectedIndex].value;
var dob = DayText + '-' + MonthText + '-' + YearText;
var marks = '';
var headerRow = classResult[0];
//console.log(headerRow);
for (i = 1; i < headerRow.length; i++) { // start from i=1, skipping 1st column as it contains symbol number
marks += headerRow[i] + ': ' + classResult[symbolValue][i] + '<br>';
}
var result = "Symbol Number: " + symbolText + '<br>' + marks;
document.getElementById('result').innerHTML = result;
return false;
}
</script>
</head>
<body>
<div id="form">
<table cellpadding="5px">
<tr>
<td>Class</td>
<td>
<select id="class" onchange="populateSymbolNumber(this.value)">
<option value="">Please Select</option>
</select>
<span id="progressClass"></span>
</td>
</tr>
<tr>
<td>Symbol</td>
<td>
<select id="day">
<option value="">Day</option>
</select>
</td>
<td>
<select id="month">
<option value="">Month</option>
</select>
</td>
<td>
<select id="year">
<option value="">Year</option>
</select>
</td>
<td>
<select id="symbol">
<option value="">Please Select</option>
</select>
</td>
</tr>
<tr>
<td> </td>
<td>
<button onclick="submitForm(); return false;">Submit</button>
</td>
</tr>
</table>
</div>
<div id="result" style="border-top: 1px solid #ccc; padding: 5px"></div>
</body>
</html>
There is a variable
var dob = DayText + '-' + MonthText + '-' + YearText;
I want to find row number for the "dob" value in the loaded data.
Google sheet has value as 30-December-1992.

JavaScript class did not function in asp.net

I have created a javascript function in my aspx page..
below are the sample code,
<script type="text/javascript">
$(document).ready(function () {
console.log("ready!");
var output = [];
var yr = 1950;
for (var i = 0; i <= 70; i++) {
if (i == 0) {
output[i] = '<option value="0" selected="selected"> Choose Year</option>';
}
else {
output[i] = '<option value="' + (parseInt(1950) + parseInt(i - 1)) + '">' + (parseInt(1950) + parseInt(i - 1)) + '</option>';
}
}
$('#yearid').get(0).innerHTML = output.join('');
});
$("#yearid").change(function () {
var select = $("#yearid option:selected").val();
$("#yearval").val(select);
});
</script>
I would like this function execute in the property such as
<div class="col-md-4 form-group">
<span>Year : </span>
<select id="yearid" class="form-control" runat="server">
</select>
<input id="yearval" type="hidden" runat="server"/>
</div>
As the code running, the javascript function above should be executed and display the " Choose Year" propery inside as shown above.
I try to run this code but nothing happens to the property. Any help would be appreciated. Thank u.

Your code seems to be working as below. However you may be missing the jQuery script so you can check if that exists.
$(document).ready(function () {
console.log("ready!");
var output = [];
var yr = 1950;
for (var i = 0; i <= 70; i++) {
if (i == 0) {
output[i] = '<option value="0" selected="selected"> Choose Year</option>';
}
else {
output[i] = '<option value="' + (parseInt(1950) + parseInt(i - 1)) + '">' + (parseInt(1950) + parseInt(i - 1)) + '</option>';
}
}
$('#yearid').get(0).innerHTML = output.join('');
});
$("#yearid").change(function () {
var select = $("#yearid option:selected").val();
$("#yearval").val(select);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-4 form-group">
<span>Year : </span>
<select id="yearid" class="form-control" runat="server">
</select>
<input id="yearval" type="hidden" runat="server"/>
</div>

Jquery insert values of text-field into list-box.?

I want to fetch value from the textfield and add to the listbox.
Here is my jquery code
JS:-
{
$('#btn_AddToList').click(function(
{
var select = document.getElementById('lst_Regions');
var region = $('#txt_RegionName').val();
if('' != region)
{
var newOption = document.createElement('option');
newOption.text = region;
newOption.value = region;
if($.browser.msie)
{
select.add(newOption);
}
else
{
select.add(newOption, null);
}
}
return false;
});
});
here is my html code
html:
<input type="text" name="region" id="txt_RegionName" /><br />
<input type="button" name="add" id="btn_AddToList" value="add" class="btn btn-success" /></br />
<select size="10" id="lst_Regions" style="width: 500px;">
</select>
question: I cannot add the value of the txt_RegionName to the lst_Region ,where i am going wrong?
Thank you.

$('#btn_AddToList').click(function () {
var val = $('#txt_RegionName').val();
$('#lst_Regions').append('<option>' + val + '</option>');
$('#txt_RegionName').val('').focus();
})
jsFiddle example

you can do this like:
$('#btn_AddToList').click(function(event)
{
var region = $('#txt_RegionName').val();
if(region && !$('#lst_Regions>option[value=' + region + ']').length){
var newOption = $('<option value="' + region + '">' + region + '</option>');
$('#lst_Regions').append(newOption);
}
//return false;
event.preventDefault();
event.stopPropagation();
});
just to let you know, you can prevent it from duplicate values using:
$('#lst_Regions>option[value=' + region + ']').length
which has to be zero, and as you see I have added that to my answer.

{
$('#btn_AddToList').click(function()
{
var select = document.getElementById('lst_Regions');
var region = $('#txt_RegionName').val();
if ('' != region) {
$(document.createElement('option')).text(region).val(region).appendTo(select);
}
return false;
});
};

View page does not recognize null element in load

I have an javascript function that generates links in my page based on a DropDown. I'm checking the javascript function in two places; when the DropDown changes with attribute "onchange", and when the page is loaded. The error is generated when the page is loaded without element on viewbag, my javascript is not recognizing the null element for generate links without the information on viewbag.
<p>Pesquisar por: #Html.DropDownList("tipoPesquisa", ViewBag.DropDownPesquisa as SelectList, new { onchange = "alteraFiltro()" })
<div id="dadosFornecedor">
#if (ViewBag.CurrentFornecedor != null)
{
<fieldset>
<legend>#ViewBag.CurrentFornecedor.RazaoSocial</legend>
<b>Razão Social:</b> #ViewBag.CurrentFornecedor.RazaoSocial <b>Endereço:</b> #ViewBag.CurrentFornecedor.Endereco
#Html.Hidden("idFornecedor", new { IdFornecedor = ViewBag.CurrentFornecedor.IdFornecedor })
<input type="button" class="btn" onclick="removerFornecedor();" value="Remover Fornecedor" />
<br />
<br />
</fieldset>
<br />
}
</div>
<script type="text/javascript">
$(function () {
alteraFiltro();
});
function removerFornecedor() {
var div = $("#dadosFornecedor");
var hidden = $("#idFornecedor");
div.empty();
div.append("<input type='hidden' name='deletarFornecedor' value='true' />")
}
function alteraFiltro() {
var urlCodigo = $("#linkCodigo");
var urlLancamento = $("#linkLancamento");
var urlPagamento = $("#linkPagamento");
var urlFornecedor = $("#linkFornecedor")
var dropValue = $("#tipoPesquisa").val();
var hidden = $("#idFornecedor");
if (hidden.val() == "" || hidden.val() == null || hidden == null) {
urlCodigo.attr("href", "saidasDiversas?sortOrder=#ViewBag.CodigoSortParm&currentFilter=#ViewBag.CurrentFilter&currentDrop=" + dropValue + "");
urlLancamento.attr("href", "saidasDiversas?sortOrder=#ViewBag.DataLancamentoSortParm&currentFilter=#ViewBag.CurrentFilter&currentDrop=" + dropValue + "");
urlPagamento.attr("href", "saidasDiversas?sortOrder=#ViewBag.DataPagamentoSortParm&currentFilter=#ViewBag.CurrentFilter&currentDrop=" + dropValue + "");
urlFornecedor.attr("href", "saidasDiversas?sortOrder=#ViewBag.FornecedorSortParm&currentFilter=#ViewBag.CurrentFilter&currentDrop=" + dropValue + "")
} else{
urlCodigo.attr("href", "saidasDiversas?sortOrder=#ViewBag.CodigoSortParm&idFornecedor=#ViewBag.CurrentFornecedor.IdFornecedor&currentFilter=#ViewBag.CurrentFilter&currentDrop=" + dropValue + "");
urlLancamento.attr("href", "saidasDiversas?sortOrder=#ViewBag.DataLancamentoSortParm&idFornecedor=#ViewBag.CurrentFornecedor.IdFornecedor&currentFilter=#ViewBag.CurrentFilter&currentDrop=" + dropValue + "");
urlPagamento.attr("href", "saidasDiversas?sortOrder=#ViewBag.DataPagamentoSortParm&idFornecedor=#ViewBag.CurrentFornecedor.IdFornecedor&currentFilter=#ViewBag.CurrentFilter&currentDrop=" + dropValue + "");
urlFornecedor.attr("href", "saidasDiversas?sortOrder=#ViewBag.FornecedorSortParm&idFornecedor=#ViewBag.CurrentFornecedor.IdFornecedor&currentFilter=#ViewBag.CurrentFilter&currentDrop=" + dropValue + "")
}
}
</script>

If the issue is caused by ViewBag.CurrentFornecedor not having a value when the view is first loaded, try altering your javascript along these lines:
var hidden = $("#idFornecedor");
if (hidden.val() == "" || hidden.val() == null || hidden == null) {
// ...
}
else {
urlCodigo.attr("href", "saidasDiversassortOrder=#ViewBag.CodigoSortParm&idFornecedor="
+ #{ViewBag.CurrentFornecedor != null ? ViewBag.CurrentFornecedor.IdFornecedor : -1}
+ "&currentFilter=#ViewBag.CurrentFilter&currentDrop=" + dropValue + "");
// ...
}

write data in some text

i have following code
<html>
<script type="text/javascript">
function writeit()
{
var tbox = document.getElementById('a_tbox_1');
if (tbox)
{
tbox.value = '';
}
tbox = document.getElementById('a_tbox_2');
if (tbox)
{
tbox.value = '';
}
}
</script>
<form name="a_form">
Product name:
<input type="text" id="a_tbox_1" name="a_tbox" value="" />
price : <input type="text" id="a_tbox_2" name="a_tbox" value="" />
<input type="button" name="btn" value="write it" onclick="writeit()" />
</form>
</html>
main idea of program is that i should give me possibilites to write two value product name and price and click after write ii it should write these informations in some text how to do it?please help

function writeit()
{
var strValue = '';
var tbox = document.getElementById('a_tbox_1');
if (tbox)
{
//tbox.value = '';
// add:
strValue = 'name: ' + tbox.value;
}
if(strValue != '')
strValue += ', ';
tbox = document.getElementById('a_tbox_2');
if (tbox)
{
//tbox.value = '';
// add:
strValue += 'price: ' + tbox.value + ' € :)';
}
alert(strValue);
// or do whatever you want with it...
}

Your questin is not clear, but try the code below and see if its what you are looking for:
<html>
<head>
<title></title>
<script type="text/javascript">
function writeit() {
var tbox = document.getElementById('a_tbox_1'), tbox2 = document.getElementById('a_tbox_2');
if (tbox.value && tbox2.value){
alert('product = ' + tbox.value + " :: price = " + tbox2.value);
// sendData('action.php?product=' + tbox.value + '&price=' + tbox2.value); (you can send your data via ajax)
tbox.value = '';
tbox2.value = '';
return false;
}
}
</script>
</head>
<body>
<form name="a_form">
Product name: <input type="text" id="a_tbox_1" name="a_tbox" value="" />
Price : <input type="text" id="a_tbox_2" name="a_tbox" value="" />
<input type="button" name="btn" value="write it" onclick="writeit()" />
</form>
</body>
</html>

Develop Reference

JavaScript is the programming language of the Web.

how to pass value one page to another page using html - javascript

Related

Get all spreadsheet data to client side first, then "find row number and same row values using javascript for a specific value"

JavaScript class did not function in asp.net

Jquery insert values of text-field into list-box.?

View page does not recognize null element in load

write data in some text

Categories

Resources