Transmit console log data to a PHP webpage

Is there a way to pass the values collected from a Bootstrap table using console.log to a URL via POST method upon button click?

    var $table = $('#table');
    var $button = $('#button');
    function getRowSelections() {
      return $.map($table.bootstrapTable('getSelections'), function(row) {
        return row;
      })
    }

    $('#button').click(function() {
      var selectedRows = getRowSelections();
      var selectedItems = '\n';
      $.each(selectedRows, function(index, value) {
        selectedItems += value.magento_id + '\n';
      });

      console.log(selectedItems);
    });
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bddfd2d2c9cec9cfdccd90c9dcdfd1d8fd8c938c889388">[email protected]</a>/dist/bootstrap-table.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b8c8d7c8c8ddca96d2cbf88996898e9688">[email protected]</a>/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="caa8a5a5beb9beb8abbae7beaba8a6af8afbe4fbffe4ff">[email protected]</a>/dist/bootstrap-table.min.js"></script>

<div id="toolbar">
  <button id="button" class="btn btn-primary" type="button">Show Selected Rows</button>
</div>
    <table id="table" data-toolbar="#toolbar" data-toggle="table" data-maintain-meta-data="true">
      <thead>
        <tr>
          <th data-field="state" data-checkbox="true"></th>
          <th data-field="id">Item ID</th>
          <th data-field="name" data-sortable="true">Product Name</th>
          <th data-field="magento-id" data-sortable="true">Magento id</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td></td>
          <td>1</td>
          <td>Chair</td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td>2</td>
          <td>Sofa</td>
          <td>$500</td>
        </tr>
        <tr>
          <td></td>
          <td>3</td>
          <td>Desk</td>
          <td>$300</td>
        </tr>
        <tr>
          <td></td>
          <td>4</td>
          <td>Rug</td>
          <td>$200</td>
        </tr>
      </tbody>
    </table>

Answer №1

To enhance the functionality of your code, consider storing your data in a string variable instead of just printing it to the console. You can then update your HTML by adding an additional form with a hidden field, setting the value of that field to the content of your string variable. It's also a good idea to include an empty IFRAME with a specified name or ID, and then specify the target attribute of the new form to this IFRAME to prevent a page reload when submitting the auxiliary form. Once you have completed these steps, you can proceed to POST the form.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How do I incorporate an external template in Mustache.js?

Welcome, I am a beginner in using Mustache.js. Below is the template and JS code that I have: var template = $('#pageTpl').html(); var html = Mustache.to_html(template, data); $('#sampleArea').html(html); Here is the template ...

Designing an image transformation page by segmenting the image into fragments

Does anyone have insight into the creation process of websites like this one? Are there any plugins or tools that can assist in building something similar? ...

Error Styling: Using CSS to Highlight Invalid Checkboxes within a Group

Is there a way to create a bordered red box around checkboxes that are required but not selected? Here is the code I currently have: <div class="fb-checkbox-group form-group field-checkbox-group-1500575975893"> <label for="checkbox-group-15005 ...

Ways to create a fixed button positioned statically at the bottom of a page

Currently, I am utilizing tailwind CSS to create a webpage with Next and Back buttons for navigation. However, an issue arises when there is minimal content on the page as the button adheres to the top. For visual reference, please view the image linked be ...

Steps for importing a json file into Chrome

Inside my file named data.json, there is a JSON object structure: { "k": : "..some object...", "a": [ "...", "bbb" ] } When working with Node.js, I can easily import this data into a variable using: let data = require("./data.json"); However, how can I ...

Exploring the utilization of type (specifically typescript type) within the @ApiProperty type in Swagger

Currently, I am grappling with a dilemma. In my API documentation, I need to include a 'type' in an @ApiProperty for Swagger. Unfortunately, Swagger seems to be rejecting it and no matter how many websites I scour for solutions, I come up empty-h ...

Error: Encountered an unexpected asterisk symbol while trying to import a Sequelize model from the

Currently, I am developing an application that requires me to connect and run queries on an SQL server using Sequelize. I have set up migrations, seeders, and models by utilizing sequelize init. However, when attempting to generate model objects with const ...

ReactJs CSS - This file type requires a specific loader for processing. There are currently no loaders configured to handle this file

I've noticed that this issue has been raised multiple times before. Despite going through all the questions, I still can't seem to resolve it. The transition from Typescript to Javascript went smoothly until I reached the implementation of CSS. U ...

Is the text in bold format or not detectable in contenteditable mode?

I am currently working on developing a custom text editor using the built-in contenteditable feature in HTML. I am trying to figure out how to determine whether the selected text is bold or not within the editor. This is what my current setup looks like: ...

What is the method to identify the test case name as passed or failed in Puppeteer?

I am currently working on integrating the puppeteer-jest test framework with TestRail using TestRail API. To accomplish this task, I need to identify which tests have failed and which tests have passed. Despite searching through the official GitHub Reposi ...

The value chosen by the user is not retained by the Select function

Having some trouble with a simple select issue in Angular that is causing my select options to disappear after clicking on them. Here's my code: var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { $scope.searchFilt ...

Encountering an Internal Server error with Mongoose in Node.js

My latest project is a web application designed for photo sharing. One particular route in the app is responsible for retrieving and displaying photos from all users in the following array. This is the route: router.get('/getphotos',function(r ...

Ways to retrieve slider value when button is clicked?

I am currently working on a range-slider that has two ranges and I need to retrieve the slider value in my javascript code. Here is my approach so far: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.cs ...

JavaScript Function Not Executed in Bottom Section

I've implemented AngularJS includes in my project. Below is the code snippet from my index.html: <!DOCTYPE html> <html ng-app=""> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> ...

Is it possible to display Google pie charts when clicking on text or an image?

Having trouble setting up a link that triggers an onClick() action to generate a Google pie chart? Check out this example on JSFiddle. <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="piech ...

The combination of Nest, Fastify, Fastify-next, and TypeOrm is unable to locate the next() function

In my attempt to set up Nest with Fastify and Next using the fastify-next plugin, everything went smoothly until I added TypeOrm for MongoDB integration. Upon loading the AppModule, Nest throws an error indicating that the .next() function cannot be found ...

"Utilize Javascript to upload a picture and showcase it on your website

<!DOCTYPE html> <html> <head> <title>Unique Webpage!</title> <meta charset=utf-8 />                       <link rel="stylesheet" href="styles/customcss.css" /> <script src="j ...

Having trouble with a dropdown menu that allows for multi-select options?

var expanded = false; function showCheckboxes() { var checkboxes = document.getElementById("checkboxes"); if (!expanded) { checkboxes.style.display = "block"; expanded = true; } else { checkboxes.style.display = "none"; expanded = fa ...

Unable to host Express app on Firebase functions emulator due to a port conflict with error code EADDRINUSE: address already in use :::3000

Testing the deployment of an express app on Firebase using Firebase functions has presented a challenge for me. Upon running the command firebase serve, I encountered the error EADDRINUSE: address already in use :::3000. Below is my index.js file: const fu ...

Connect the scroll wheel and then proceed to scroll in the usual way

There are two div elements with a height and width of 100%. One has the CSS property top:0px, while the other has top 100%. I have implemented an animation that triggers when the mousewheel is used to scroll from one div to the other. The animation functi ...