logo
down
shadow

How to pass data from one html page to another?


How to pass data from one html page to another?

Content Index :

How to pass data from one html page to another?
Tag : javascript , By : Vodkat
Date : November 28 2020, 12:01 PM

it should still fix some issue These are two html page for a laundry website, one is called the booking page where clients can click to book the number of clothes to be washed and have the total amount to pay, another page called the summary which is suppose to receive data from booking page (no server side language is used, just local storage in JavaScript), but I have not been able to figure it out at all. , Add This code in your Initial Page i.e Page 1
let firstVal = document.querySelector('#firstVal');
let secondVal = document.querySelector('#secondVal');
let thirdVal = document.querySelector('#thirdVal');
let fourthVal = document.querySelector('#fourthVal');
let fifthVal = document.querySelector('#fifthVal');
let finalVal = document.querySelector('#total');


localStorage.setItem("firstVal", firstVal);
localStorage.setItem("secondVal", secondVal);
localStorage.setItem("thirdVal", thirdVal);
localStorage.setItem("fourthVal", fourthVal);
localStorage.setItem("fifthVal", fifthVal);
localStorage.setItem("finalVal", finalVal);
let firstVal = localStorage.getItem(('firstVal');
let secondVal = localStorage.getItem(('secondVal');
let thirdVal = localStorage.getItem(('thirdVal');
let fourthVal = localStorage.getItem(('fourthVal');
let fifthVal = localStorage.getItem(('fifthVal');
let finalVal = localStorage.getItem(('finalVal');

console.log(firstVal);
console.log(secondVal);
console.log(thirdVal);
console.log(fourthVal);
console.log(fifthVal);
console.log(finalVal);
<div class="bookingContainer">
    <div>
       <div class="booking-container-title">
          <p>Book a laundry service</p>
       </div>
    </div>
    <div class="first-booking-container">
       <p>What would you like to do ?</p>
       <select>
          <option class="middle">Dry Clean</option>
          <option class="middle">Wash</option>
          <option class="middle">Iron</option>
       </select>
       <FontAwesomeIcon class="select-icon" icon="chevron-down" />
    </div>
    <!-- First Value -->
    <div class="second-booking-container">
       <div>
          <div class="second-booking-container-image"><img 
             src="./img/shirt.png" /></div>
          <p class="second-booking-container-icon" name="product" 
             value="100" id="qnty_1">
             Shirt(s)
          </p>
          <select onchange='totalItem()' class="center" id="first">
             <option>0</option>
             <option>1</option>
             <option>2</option>
             <option>3</option>
          </select>
          <FontAwesomeIcon class="select-long-icon" icon="chevron- 
             down" />
          <p class="second-booking-container-text" id='firstVal' 
             name="price" max="3" min="1">&#8358;100</p>
       </div>
       <div>
          <div class="second-booking-container-image"><img 
             src="./img/trouser.png" /></div>
          <p class="second-booking-container-icon" name="product" 
             value="100" id="qnty_2">
             Trouser(s)
          </p>
          <select onchange='totalItem()' class="center" id="second">
             <option>0</option>
             <option>1</option>
             <option>2</option>
             <option>3</option>
          </select>
          <FontAwesomeIcon class="select-long-icon" icon="chevron- 
             down" />
          <p class="second-booking-container-text" id="secondVal" 
             name="price" max="3" min="1">&#8358;100</p>
       </div>
       <div>
          <div class="second-booking-container-image"><img 
             src="./img/skirt.png" /></div>
          <p class="second-booking-container-icon" name="product" 
             value="100" id="qnty_3">
             Skirt(s)
          </p>
          <select onchange='totalItem()' class="center" id="third">
             <option>0</option>
             <option>1</option>
             <option>2</option>
             <option>3</option>
          </select>
          <FontAwesomeIcon class="select-long-icon" icon="chevron- 
             down" />
          <p class="second-booking-container-text" id="thirdVal" 
             name="price" max="3" min="1">&#8358;100</p>
       </div>
       <div>
          <div class="second-booking-container-image"><img 
             src="./img/blouse.png" /></div>
          <p class="second-booking-container-icon" name="product" 
             value="100" id="qnty_4">
             Blouse(s)
          </p>
          <select onchange='totalItem()' class="center" id="fourth">
             <option>0</option>
             <option>1</option>
             <option>2</option>
             <option>3</option>
          </select>
          <FontAwesomeIcon class="select-long-icon" icon="chevron- 
             down" />
          <p class="second-booking-container-text" id="fourthVal" 
             name="price" max="3" min="1">&#8358;100</p>
       </div>
       <div>
          src="./img/jacket.png" />
       </div>
       <p class="second-booking-container-icon-long" name="product" 
          value="100" id="qnty_5">Suit/Jacket(s)
       </p>
       <select onchange='totalItem()' class="center" id="fifth">
          <option>0</option>
          <option>1</option>
          <option>2</option>
          <option>3</option>
       </select>
       <FontAwesomeIcon class="select-long-icon" icon="chevron- 
          down" />
       <p class="second-booking-container-text" id="fifthVal" 
          name="price" max="3" min="1">&#8358;100</p>
    </div>
 </div>
 <div class="third-booking-container">
    <p id="total">Total: <span>&#8358;0.00</span></p>
    <button>
       Set pick up date
       <FontAwesomeIcon class="second-container-button-right" 
          icon="angle-right" />
    </button>
 </div>
 </div>
 <script>
    let first = document.querySelector('#first');
    let second = document.querySelector('#second');
    let third = document.querySelector('#third');
    let fourth = document.querySelector('#fourth');
    let fifth = document.querySelector('#fifth');
    //invoke this function when the input changes on individual 
    // selected elements
    const totalItem = () => {

        let firstValue = `${first.options[first.selectedIndex].value}`
        let secondValue = `${second.options[second.selectedIndex].value}`
        let thirdValue =
            `${third.options[third.selectedIndex].value}`
        let fourthValue = `${fourth.options[fourth.selectedIndex].value}`
        let fifthValue = `${fifth.options[fifth.selectedIndex].value}`
        console.table(firstValue, secondValue, thirdValue, fourthValue,
            fifthValue)
        
        //call function for each cloths and pass 3 values(the selected 
        // number, the constant(₦100) and where to update)
        multiplySelectedwithConstVal(firstValue, firstValNo, firstVal);
        multiplySelectedwithConstVal(secondValue, secondValNo,
        secondVal);
        multiplySelectedwithConstVal(thirdValue, thirdValNo, thirdVal);
        multiplySelectedwithConstVal(fourthValue, fourthValNo,
        fourthVal);
        multiplySelectedwithConstVal(fifthValue, fifthValNo, fifthVal);

        //total addition of all values
        let selectedValArray = [];
        
        const total = () => {
            selectedValArray.push(
                parseInt(firstVal.innerHTML.replace("₦", "")),
                parseInt(secondVal.innerHTML.replace("₦", "")),
                parseInt(thirdVal.innerHTML.replace("₦", "")),
                parseInt(fourthVal.innerHTML.replace("₦", "")),
                parseInt(fifthVal.innerHTML.replace("₦", ""))
            );
            return selectedValArray.reduce((accu, currentVal) => accu +
                currentVal, 0);
        }
        var totalval = total();

        finalVal.innerHTML = `Total: <span>&#8358;${totalval}</span>`;
        localStorage.clear();  
        localStorage.setItem("firstVal",firstValNo);
        localStorage.setItem("secondVal", secondValNo);
        localStorage.setItem("thirdVal", thirdValNo);
        localStorage.setItem("fourthVal",  fourthValNo);
        localStorage.setItem("fifthVal",  fifthValNo);
        localStorage.setItem("firstValCount", firstValue);
        localStorage.setItem("secondValCount", secondValue);
        localStorage.setItem("thirdValCount",  thirdValue);
        localStorage.setItem("fourthValCount", fourthValue);
        localStorage.setItem("fifthValCount",  fifthValue);
        localStorage.setItem("finalVal", totalval);
    }

    
    //target elements that will be updated and
    let firstVal = document.querySelector('#firstVal');
    let secondVal = document.querySelector('#secondVal');
    let thirdVal = document.querySelector('#thirdVal');
    let fourthVal = document.querySelector('#fourthVal');
    let fifthVal = document.querySelector('#fifthVal');
    let finalVal = document.querySelector('#total');

    //convert ₦100 to number for multiplication
    //converted the innerhtml to number
    let firstValNo = parseInt(firstVal.innerHTML.replace("₦", ""));
    let secondValNo = parseInt(secondVal.innerHTML.replace("₦", ""));
    let thirdValNo = parseInt(thirdVal.innerHTML.replace("₦", ""));
    let fourthValNo = parseInt(fourthVal.innerHTML.replace("₦", ""));
    let fifthValNo = parseInt(fifthVal.innerHTML.replace("₦", ""));
    
    //multiply selected value with constant and update
    const multiplySelectedwithConstVal = (i, k, update) => {
        let result = parseInt(i) * k
        return update.innerHTML = `₦${result}`
    }
 </script>
<div class="summaryContainer">
    <div class="summaryNavBar"><p className="summaryTitle">Summary</p> 
</div>
    <div class="summaryContent">
    <p class="total" id="total">Total:</p>
    </div>

   <div class="summaryCard">
   <div class="summary-card-title">
       <div>Item</div>
      <div>Quantity</div>
   </div>
   <div class="summary-card-content">
       <div >Shirt(s)</div><div  id="
   first" class="summary-quantity"><button type="button" id="sub" 
   class="sub">−</button>
    <input type="text" id="firstVal" value="0" class="field" />
      <button type="button" id="add" class="add">+</button>   </div>
       </div>
   <div class="summary-card-content">

   <div>Trouser(s)</div>
    <div class="summary-quantity" id="second">
   <button type="button" id="sub" class="sub">−</button>
    <input type="text" id="secondVal" value="0" class="field" />
      <button type="button" id="add" class="add">+</button>
     </div>
   </div>
   <div class="summary-card-content" id="third">
   <div>Suit(s)</div><div class="summary-quantity"><button 
   type="button" id="sub" class="sub">−</button>
 <input type="text" id="thirdVal" value="0" class="field" />
      <button type="button" id="add" class="add">+</button>   </div>
   </div>

   <p class=" more">..more</p>
   </div>
   <div class="summaryButton">
    <button class="button-left"><span><FontAwesomeIcon 
  class="buttonLeft" icon="angle-left"/></span>Back</button>
  <button class="button-right">Proceed to payment<FontAwesomeIcon 
  class="buttonRight" icon="angle-right"/></button>

    </div>
  </div>
 </body>
</html>



<script>

var firstValue = localStorage.getItem('firstVal');
var secondValue = localStorage.getItem('secondVal');
var thirdValue = localStorage.getItem('thirdVal');
var finalValue = localStorage.getItem('finalVal');


var firstValueCount = localStorage.getItem('firstValCount');
var secondValueCount = localStorage.getItem('secondValCount');
var thirdValueCount = localStorage.getItem('thirdValCount');


var finalVal = document.querySelector('#total');

finalVal.innerHTML = `Total: <span>&#8358;${finalValue}</span>`;
document.getElementById('firstVal').value = firstValueCount ;
document.getElementById('secondVal').value = secondValueCount ;
document.getElementById('thirdVal').value = thirdValueCount ;
var first = document.querySelector('#first');
var second = document.querySelector('#second');
var third = document.querySelector('#third');
var fourth = document.querySelector('#fourth');
var fifth = document.querySelector('#fifth');
//invoke this function when the input changes on individual 
// selected elements
function calSum(el ,type){

  
    if(type == "add"){
      var id = (el.previousSibling.previousElementSibling.id);
      var count = parseInt(el.previousSibling.previousElementSibling.value);
      // increment count by one 
      var final_count =   (count + 1);
      el.previousSibling.previousElementSibling.value = final_count;

    }else{
      var id = (el.nextSibling.nextElementSibling.id);
      var count = parseInt(el.nextSibling.nextElementSibling.value);
      // decrement count by one 
      var final_count =   (count - 1);
      el.nextSibling.nextElementSibling.value = final_count;
    }
    var totalSum = parseInt(localStorage.getItem('finalVal'));
    var price = 100;
    if(id === 'firstVal'){   
        totalSum = (totalSum + (price  * final_count)) -(count *price) ;    
        localStorage.setItem("firstValCount", final_count);
        
    }else if(id === 'secondVal'){
        totalSum =  (totalSum + (price  * final_count)) -(count *price);
        localStorage.setItem("secondValCount", final_count);

    }else if(id === 'thirdVal'){
        totalSum = (totalSum + (price  * final_count)) -(count *price) ;    
        localStorage.setItem("thirdValCount", final_count);

    }   
    console.log(totalSum);
    localStorage.setItem("finalVal", totalSum);
    document.querySelector('#total').innerHTML = `Total: <span>&#8358;${totalSum}</span>`;
}


  var classname = document.getElementsByClassName("add");

  for (var i = 0; i < classname.length; i++) {
      
    classname[i].addEventListener('click', function(){
      calSum(this,'add');
    } , false);
  }

  var sub = document.getElementsByClassName("sub");

  for (var i = 0; i < sub.length; i++) {
      
    sub[i].addEventListener('click', function(){
      calSum(this,'sub');
    } , false);
  }


</script>

Comments
No Comments Right Now !

Boards Message :
You Must Login Or Sign Up to Add Your Comments .

Share : facebook icon twitter icon

How to pass looping data from html page to php page via AJAX


Tag : php , By : user98986
Date : March 29 2020, 07:55 AM
Any of those help How to send looping data from html page to php page using ajax. I am trying so hard but i don't get any way passing looping data into php page. , the [] should be append to the query string, not to the input name
var queryString = "?age[]=" + age1 + "&age[]=" + age2 + "&age[]=" + age3 ;
ajaxRequest.open("GET", "example.php" + queryString, true);

How to pass data from one HTML page to another HTML page using JQuery?


Tag : javascript , By : KingGuppy
Date : March 29 2020, 07:55 AM
I hope this helps . Warning: This will only work for single-page-templates, where each pseudo-page has it's own HTML document.
You can pass data between pages by using the $.mobile.changePage() function manually instead of letting jQuery Mobile call it for your links:
$(document).delegate('.ui-page', 'pageinit', function () {
    $(this).find('a').bind('click', function () {
        $.mobile.changePage(this.href, {
            reloadPage : true,
            type       : 'post',
            data       : { myKey : 'myVal' }
        });
        return false;
    });
});

Get HTML data attribute or ID value from one page and pass to another page as PHP variable


Tag : php , By : Rb.Ridge
Date : March 29 2020, 07:55 AM
I wish this help you If you are using thickbox you can do something like example 4a on http://dinbror.dk/bpopup/
$('element_to_pop_up').bPopup({
        contentContainer:'.content',
        loadUrl: 'somepage.php?id='+$('.edit_track').attr('id') //Uses jQuery.load()
});

How to pass Array of JSON Data from one html page to other html page?


Tag : javascript , By : Mistere
Date : March 29 2020, 07:55 AM
should help you out I am creating profile page for user. I have two html page: page1: login.html and page2:profile.html. From one page:1 we login, after successfully login, it will redirect to userProfile page:2. I am sending the user info from page1 to page2, like Name, Address, Mobile Number, Email-Id etc, in form of JSON,
var userData = {
 storeUserDataInSession: function(userData) {
     var userObjectString = JSON.stringify(userData);
     window.sessionStorage.setItem('userObject',userObjectString)
 },
 getUserDataFromSession: function() {
     var userData = window.sessionStorage.getItem('userObject')
     return JSON.parse(userData);
 }
}
userData.storeUserDataInSession(response);
userData.getUserDataFromSession()

how can I render an HTML page with express and at the same time pass json data to that HTML?


Tag : angularjs , By : beebob
Date : March 29 2020, 07:55 AM
I wish this helpful for you Here is a sample project to achieve this
Consider the following project structure
www/          
  questions.html  // questions angular template
  solutions.html  // solutions angular template
  script.js       // angular code
app.js            // main entry point
api.js            // the api endpoint
db-mock.js        // a mongo db mock for demo purpose
package.json      // app dependencies
$ npm init
$ npm install --save express serve-static
var express = require('express');
var router = express.Router();
var db = require('./db-mock');

router.get('/questions', function(req, res) {
    var questions = db.questions.find();
    res.setHeader('Content-Type', 'application/json');
    res.send(JSON.stringify(questions));
});

router.get('/solutions', function(req, res) {
    var solutions = db.solutions.find();
    res.setHeader('Content-Type', 'application/json');
    res.send(JSON.stringify(solutions));
});

module.exports = router;
var express = require('express');
var serveStatic = require('serve-static');
var api = require('./api');
var app = express();
var port = process.env.PORT || 8080;

// Serve API
app.use('/api', api);

// Serve static files (our client-side code)
app.use(serveStatic('www'));

// Start server
app.listen(port, function() {
    console.log('Server listening on port %d', port);
});
// Mock Mongo db
var db = {
    questions: {
        find: function() {
            return [
                {id: 1, name: "Why ?"},
                {id: 2, name: "How do I do this ?"},
                {id: 3, name: "What's up ?"},
                {id: 4, name: "Siri, tell me a joke"},
                {id: 5, name: "Are we alone ?"}
            ]
        }
    },
    solutions: {
        find: function() {
            return [
                {id: 1, name: "Triswarm"},
                {id: 2, name: "U-bam"},
                {id: 3, name: "Betacore"},
                {id: 4, name: "Qvotrax"},
                {id: 5, name: "Homezuning"}
            ]
        }
    }
}

module.exports = db;
angular.module('app', []);

angular
    .module('app')
    .controller('SolutionsController', ['$scope', '$http', function ($scope, $http) {
        $http.get('/api/solutions')
             .then(function(res) {
                 $scope.solutions = res.data;
             });
    }])
    .controller('QuestionsController', ['$scope', '$http', function ($scope, $http) {
        $http.get('/api/questions')
             .then(function(res) {
                 $scope.questions = res.data;
             });
    }]);
<!doctype html>
<html lang="en" ng-app="app">
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js"></script>
  <script src="script.js"></script>
</head>
<body ng-controller="QuestionsController">
  <h1>Questions</h1>
  <ul>
    <li ng-repeat="question in questions">{{question.name}}</li>
  </ul>
</body>
</html>
<!doctype html>
<html lang="en" ng-app="app">
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js"></script>
  <script src="script.js"></script>
</head>
<body ng-controller="SolutionsController">
  <h1>Solutions</h1>
  <ul>
    <li ng-repeat="solution in solutions">{{solution.name}}</li>
  </ul>
</body>
</html>
$ node app 
$npm install ejs --save
views/
  solutions.ejs
<!DOCTYPE html>
<html lang="en">
<head>
    <title><%= pageTitle %></title>
</head>
<body>
    <h1><%= pageTitle %></h1>
    <ul><% for(var i=0; i<solutions.length; i++) { %>
        <li><%= solutions[i].name %></li>
    <% } %></ul>
</body>
</html>
// Declare /solutions route
app.get('/solutions', function(req, res) {
    var solutions = db.solutions.find();
    // Use `solutions.ejs` template to render
    res.render('solutions.ejs', {pageTitle: "Solutions", solutions: solutions});
});
Related Posts Related QUESTIONS :
  • Javascript newbie stuck with XMLHttpRequest return data
  • How to add obj to to state in my example Redux React
  • Loading "grunt-karma.js" tasks...ERROR >> SyntaxError: Unexpected identifier
  • Why do I get log is not defined
  • get the multiple index of the same string
  • How can I iterate over an Array object by using For IN or FOR OF
  • Launch local executable from web browser
  • How to prepare array of json objects to d3 hierarchical tree structure
  • VueJS - event emitted - show HTML before other calculations
  • Export SASS/SCSS variables to Javascript without exporting them to CSS
  • How to attach an event handler only once continuously
  • How to make button open a link in new tab in JavaScript?
  • Find range from the javascript object
  • How can I use my jQuery code as JavaScript?
  • How to show 5 images in a 2 row slider with bxslider
  • How to convert stream into variables in typescript
  • Three.js custom shader error on Chrome GL_INVALID_OPERATION: Active draw buffers with missing fragment shader outputs
  • My JavaScript doesn't work. How can I solve this problem?
  • Why is this async function is running synchronously?
  • Get updated variable from within react hook before return
  • I want to show all image preview but whenever I upload a new one the old one is gone
  • Would I be able to give access to specific electron APIs safely?
  • Why several clicks fire for each instance of a Class?
  • cant grab value from div using attr()
  • Make web service not accessible by browser?
  • Select DOM elements within template
  • How to customize angular ui-grid row background color?
  • Binding data in two respective $scope in AngularJS, how?
  • react put some props after import class
  • Variable is distributed among same components
  • switch class in jQuery/JavaScript for active/inactive state
  • How To Track Outbound Clicks Using Javascript
  • How to get total seconds elapsed since the beginning of the month?
  • Protractor: Stale element reference at "browser.wait(EC.visibilityOf(confDial), FIFTY_SECONDS);"
  • Access to an array inside an object
  • Reseting an JavaScript Interval with different value?
  • Learning Angular for the first time - version 2 or 4?
  • Rendering RSS feed (XML) in React with jquery, why do object values parsed from the feed seem empty?
  • Node.js xml2js http.request tag matching
  • applying texture to custom plane geometry in Threejs
  • How do I pass an Event as a function parameter in HTML written inside JavaScript variable?
  • Interface of object parameter with default value and default property
  • Does using try / catch rather than `.catch` observable operator with XHR requests reduce performance?
  • In IE11 background colors not working on printing
  • TypeScript interface signature "(): string"
  • Is synchronous XMLHttpRequest supported in Internet Explorer 10 and 11?
  • Axios function not returning any values with js
  • How to use firestore TIMESTAMP to create time-stamp in JavaScript
  • Instantiate subclass without constructing
  • Outputing a created object in javascript to a server side JSON file
  • Transition the numeric labels in a bar chart
  • createBottomTabNavigator: hide just one tab from the tabBar
  • iife vs simple statement behavior with document.title
  • showDialogPopup Refresh Page after Click
  • Child component does not set the initial value passed from the parent: ReactJS
  • Nodejs javascript added to button not responding
  • Trying to define a promise.all
  • Python GEE to extract featurecollection timeseries from Landsat imageries
  • How to write negative binary number?
  • Unable to set property of individual object
  • shadow
    Privacy Policy - Terms - Contact Us © scrbit.com