2017-01-24 6 views
0

私はunordered listをいくつかの項目が含まれているボタンをクリックして私は最初にそれらの値を3つの文字列に分割するループ& kgを削除し、データベース(phpmyadmin)を3つの異なる列に格納する方法終わり?リストの例の 1:どのようにこの程度この文字列を3つの値に分割する方法は?

function AddNewOrder() 
    { 
    var ul = document.getElementById("OrderDetails"); 
    var items = ul.getElementsByTagName("li"); 
    for (var i = 0; i < items.length; ++i) 
    { 
     var s=items[i].firstChild.data; 
     var splits = s.split(',', 3); 
    } 
    } 
+1

あなたはJqueryを使用しているブートストラップを使用しています。質問がjqueryでタグ付けされていない理由はありますか? –

答えて

0

、まだあなたが「キロ」を削除する必要が

splits[splits.length-1] = splits[splits.length-1].split(" ",1).toString(); 
0

Bananas,Dry,20 Kg

function AddNewOrder() 
    { 
    var ul = document.getElementById("OrderDetails"); 
    var items = ul.getElementsByTagName("li"); 
    for (var i = 0; i < items.length; ++i) 
    { 
     var s=items[i].firstChild.data; 
     var splits = s.split(',', 3); 
     splits[2] = splits[2].replace("kg", ""); 
    } 
    } 

このコードは、kgを空白の文字列に置き換えます。あなたはそれをうまく分割

0

あなたは分割され、サーバーにAJAXで結果を送信するために正規表現を使用することができます。

$("#send").click(function(e) { 
 
    AddNewOrder(); 
 
}); 
 

 
function sendRequest(url, postData, callback) { 
 
    var req = new XMLHttpRequest(); 
 
    if (!req) 
 
     return; 
 
    var method = (postData) ? "POST" : "GET"; 
 
    req.open(method,url,true); 
 
    if (postData) 
 
     req.setRequestHeader('Content-type','application/x-www-form-urlencoded'); 
 
    req.onreadystatechange = function() { 
 
     if (req.readyState != 4) 
 
      return; 
 
     if (req.status != 200 && req.status != 304) { 
 
      return; 
 
     } 
 
     callback(req); 
 
    } 
 
    if (req.readyState == 4) 
 
     return; 
 
    req.send(postData); 
 
} 
 

 
function extractData(str) { 
 
    var res = []; 
 

 
    var regex = /((\w+)(kg?,?)?)/g; 
 
    while ((m = regex.exec(str)) !== null) { 
 
    // This is necessary to avoid infinite loops with zero-width matches 
 
    if (m.index === regex.lastIndex) { 
 
     regex.lastIndex++; 
 
    } 
 

 
    // The result can be accessed through the `m`-variable. 
 
    if (res.length < 3) { 
 
     // We only retrieve the three first results, but the regex is made to support an undefined amount or comma-separated values. 
 
     res.push(m[0]); 
 
    } 
 
    } 
 
    return res; 
 
} 
 

 
function AddNewOrder() { 
 
    // If you're using Twitter's Bootstrap, better use jQuery to work on DOM 
 
    var $ul = $("#OrderDetails"); 
 
    var $items = $ul.find("li"); 
 
    var ord = []; 
 
    // For each items 
 
    $items.each(function(key, val) { 
 
    //Spliting and storing in array 
 
    var data = $(this).children().html(); 
 
    ord.push(extractData(data)); 
 

 
    }); 
 

 
    /* 
 
    ord = [ 
 
    ['Bananas','Dry','20'], 
 
    ['Potatoes','Rolling','42'], 
 
    ['Apples','Dry','20'], 
 
    ['Strawberries','Dry','20'], 
 
    // etc... 
 
    ] 
 
    */ 
 

 
    // Send Ajax data : 
 
    alert("Sending data to server"); 
 
    return; // Because ↓ this ↓ is not configured to work in this snippet 
 
    var url = '[YOUR SERVER SCRIPT LOCATION HERE]' 
 
    sendRequest(url, {orders: ord}, function(response) { 
 
    /* etc... */ 
 
    }) 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<ul id="OrderDetails"> 
 
    <li>Bla bla bla <span class="data">Bananas,Dry,20 Kg</span> 
 
    </li> 
 
    <li>Bla bla bla <span class="data">Potatoes,Rolling,42 Kg</span> 
 
    </li> 
 
    <li>Bla bla bla <span class="data">Apples,Dry,20 Kg</span> 
 
    </li> 
 
    <li>Bla bla bla <span class="data">Strawberries,Dry,20 Kg</span> 
 
    </li> 
 
    <li>Bla bla bla <span class="data">Pineapples,Dry,20 Kg</span> 
 
    </li> 
 
    <li>Bla bla bla <span class="data">Tomatos,Dry,20 Kg</span> 
 
    </li> 
 
</ul> 
 

 
<button id="send" class="btn btn-primary">Send</button>

そして、サーバー側では、AJAXクエリのデータを受け取ってintを挿入する独自のスクリプト(PHPと思います)を作成する必要がありますo mysql

<?php 
// Connect to your database first : http://php.net/manual/en/mysqli.quickstart.connections.php 

$orders = $_POST['orders'] 


foreach ($orders as $key => $order) { 
    $catName = addslashes($order[0]); 
    $catType = addslashes($order[1]); 
    $amount = addslashes($order[2]); 
    $sql = "INSERT INTO `Orders` VALUES('$catName', '$catType', '$amount');"; 
    mysqli::query($sql); 
    // etc... 
} 
+0

..完璧な... PHPファイルのSQL部分はどうですか?あなたもそれで私を助けることができますか? –

+0

それらのデータを格納するためのテーブルがデータベースにすでにありますか? –

+0

はい、テーブル: 'Orders'、列:' Category_Name'、 'Category_Type'、Amount' –

関連する問題