how to get value from selected (checkbox) listview and uplaod to server jquery mobile

Question

how to get value from selected (checkbox) listview and uplaod to server jquery mobile

914 Views Asked by Gaurav At 18 August 2017 at 10:00

I just want to upload particular selected value (checked) in listview on server. There are any values in list with checkbox so I want to select few of them and wants to upload to server. //below code using to set chekcbox on listview

var ajax = {  
        parseJSON:function(result){  
            movieInfo.result = result.entries;
            $.each(result.entries, function(i, row) {
                //console.log(JSON.stringify(row));

                $('#movie-list').append('<li>'+'<h3>' +'Store Name  : '+ row.STORE_NAME + '</h3><p9>' +'Store Id : '+ row.STORE_ID + '</p9> <p2><br>Store Visit Date : '+ row.STORE_VISIT_DATE + '</p2><p2><br>Comment: '+ row.COMMENTS + '</p2><p>' +'Store Issue : '+ row.ISSUE + '</p><p>'+'User : '+ row.USER_NAME + '</li>');
            });

            $('#movie-list').listview('refresh');
        }
    }

/// below script i use to upload data to server // So I just want to get selected valu from ui and uplaod

$(document).ready(function () {
    $("#uploadbutton").click(function () {
        var S_NO = $("#crm_serialnumber").val();

        var USER_NAME = localStorage.getItem("PMUsername");

        $.ajax({
            type: "POST",

            url: "https://c.jsp",

           /* url: "https://d="+filename + "&store_name=" + filename2+ "&ph_no="+filename3,*/
            data: {

                "S_NO" : S_NO,

                "USER_NAME" : USER_NAME
            },
            /*
            data: "store_id ="+ filename + "&store_name =" +filename2 + "&ph_no =" + filename3 ,
            */
            success: function (msg,String,jqXHR) {
                window.location='home.html';

                $("#result").html(msg,String,jqXHR)
               alert("Data Uploaded: ");
            }
        });
    });
});

//Please help me to solve this problem as I am learning . Thanks

Original Q&A

There are 1 best solutions below

**deblocker** · Answer 1 · 2017-08-18T12:18:52.300000

First of all, when you populate your list, i believe you should assign an identifier to your list items, so you can get it later, when you need to post the selection back.

To do that, you can simply set your own custom data-attribute to each list item, the same way you are assigning the text and captions to your paragraphs and headings.

After that, you can filter the checked checkboxes and retrieve the list item which are belonging to:

function getChecked() {
  $("#movie-list :checkbox:checked").each(function(index) {
    // retrieve the list item
    var listItem = $(this).closest("li");
    // get the data associated
    var identifier = listItem.data("identifier");
    var storeName = listItem.data("store-name");
    console.log(index, identifier, storeName);
  });
}

#movie-list > li{
  padding: 0 !important;
}

#movie-list .ui-checkbox {
  margin: 0 !important;
}

#movie-list .ui-checkbox .ui-btn {
  border-width: 0 !important;
  border-radius: inherit !important;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
  <div id="page-list" data-role="page">
    <div role="main" class="ui-content">
      <button class="ui-btn ui-mini" onclick="getChecked()">Get checked items</button>
      <br>
      <ul id="movie-list" data-role="listview">
        <li data-identifier="1" data-store-name="store-1">
          <input type="checkbox" name="checkbox-1" id="checkbox-1" />
          <label for="checkbox-1">
            <h2>Stephen Weber</h2>
            <p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
            <p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
          </label>
        </li>
        <li data-identifier="2" data-store-name="store-2">
          <input type="checkbox" name="checkbox-2" id="checkbox-2" />
          <label for="checkbox-2">
            <h2>jQuery Team</h2>
            <p><strong>Boston Conference Planning</strong></p>
            <p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
          </label>
        </li>
        <li data-identifier="3" data-store-name="store-3">
          <input type="checkbox" name="checkbox-3" id="checkbox-3" />
          <label for="checkbox-3">
            <h2>Avery Walker</h2>
            <p><strong>Re: Dinner Tonight</strong></p>
            <p>Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight. Can't wait!</p>
          </label>
        </li>
      </ul>

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

how to get value from selected (checkbox) listview and uplaod to server jquery mobile

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in AJAX

Related Questions in JQUERY-MOBILE

Related Questions in HYBRID-MOBILE-APP

Related Questions in JQUERY-MOBILE-LISTVIEW

Trending Questions

Popular # Hahtags

Popular Questions