alguien que me ayude o guie php botton agregar

geshiro · 17 Junio 2015, 02:02 AM

como puedo hacer para que mi botton de add kids ya funcione con php oh bien quien me lo haga seria util necesito saber como hacerlo uno

Código (html4strict) [Seleccionar]


<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Admin</title>
	 <meta name="viewport" content="width=device-width, initial-scale=1.0">
	 <link rel="stylesheet" href="css/bootstrap.css">
	 <link rel="stylesheet" href="css/login.css">
</head>
<body>
	<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Daycare</a>
    </div>
    <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user">Profile</span><span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#"><span class="glyphicon glyphicon-cog"></span>Settings</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-edit"></span>Edit</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-repeat"></span>Change your password</a></li>
            <li class="divider"></li>
            <li><a href="#"><span class="glyphicon glyphicon-off">Sign out</span></a></li>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-flag">Reports</span><span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Top seller list</a></li>
            <li><a href="#">Top seller list</a></li>
          </ul>
        </li>
      </ul>
      <ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-home">Parents</span></a></li>
        <li><a href="#"><span class="glyphicon glyphicon-home">Category</span></a></li>
      <ul>
</nav>
     <div class="container">
    <div class="row">
        <div class="col-md-3">
            <ul class="nav nav-pills nav-stacked">
                <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span>Home</a></li>
                <li><a href="#">Home</a></li>
                 <li><a href="#">Home</a></li>
                  <li><a href="#">Home</a></li>
                   <li><a href="#">Home</a></li>
                    <li><a href="#">Home</a></li>
                     <li><a href="#">Users</a></li>
            </ul>
        </div>
        <div class="col-md-9 well">
           <div>
              <form class="navbar-form navbar-left" role="search">
                <input type="submit" id="add" class="btn btn-success" value="add kids">
                <input type="text" class="form-control" placeholder="search">
           </div>
           </div>
        </div>
    </div>
</div>

	  <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

Código (css) [Seleccionar]


*
{
  /*#5cb85c*/
	margin: 0%;
	padding: 0%;
}

html,body
{
	
}
nav
{
	display:block;
}

.navbar-default
{
	background-color: #5cb85c;
	border-color:#e7e7e7;
}

.navbar-collapse
{
	border-color:red;
}
.navbar-default .navbar-brand
{
	color:white;
}

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus 
{
  color: #3498db;
  background-color: transparent;
}

.navbar-default .navbar-nav > li > a {
  color: white;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #3498db;
  background-color: transparent;
}
.container {
  padding-right: -7%;
  padding-left: -7%;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 80%;
  }
}

@media (min-width: 2560px) {
  .container {
    width: 80%;
  }
}

@media (min-width: 1024px) {
  .container {
    width: 80%;
  }
}
  
.row {
  margin-right: 6%;
  margin-left: -10%;
}

@media (min-width: 992px) {
   .col-md-3
  {
    float: left;
  }

  .col-md-3
  {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-md-3 {
    width: 25%;
  }

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus{
  color: #fff;
  background-color: #5cb85c;
}

.form-control {
  display: block;
  width: 100%;
  height: 6%;
  padding: 4px 12px;
  font-size: 14px;
  margin-left: 10em;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.well {
  min-height: 5%;
  padding: 0.7%;
  margin-bottom: 5%;
}

me falta como hacer el script para agregar y me vaya desplegando uno por uno como tabla

Usuario Invitado · 17 Junio 2015, 21:00 PM

Haces una petición ajax al controlador o archivo php para que lo registre en la BBDD. Si registró, devuelve el mismo objeto enviado (json). Una vez devuelto, lo conviertes a tr (fila de tabla) y lo agregas a la tabla.

Supongamos que tu fichero registerkid.php, tiene el siguiente aspecto:

Código (php) [Seleccionar]


<?php
// retrieved is json
$retrieved = json_decode($_POST['data']);
$status = DB->create($retrieved);
if($satus) {
	echo json_encode($retrieved);
} else {
	echo json_encode(DB->errors());
}

Entonces haríamos la llamada:

Código (javascript) [Seleccionar]


var http = new XMLHttpRequest();
http.onreadystatechange = function() {
	if(http.readyState === 4 && http.status === 200) {
		var table = document.querySelector('table');
		var lastChild = table.lastChild;
		var newKid =  json2trow(JSON.parse(http.responseText));
		if(lastChild) {
			insertAfter(lastChild, newKid);
		} else {
			table.appendChild(newKid);
		}
	} else if(http.readyState === 4 && http.status >= 400) {
		// hacer algo con los errores devueltos
	}
};
var data = {}; // your form data
http.open('POST', 'registerkid.php', true);
http.send('data='data); // send kid info

// insert a element after another
function insertAfter(element, toadd) {
	element.parentNode.insertBefore(toadd, element.nextSibling);
}
// converts json to table row
function json2trow(json) {
	var tr = document.createElement('tr');
	for(var key in json) {
		var td = document.createElement('td');
		var text = document.createTextNode(json[key]);
		td.appendChild(text);
		tr.appendChild(td);
	}
	return tr;
}

Ahora asocias el evento click del botón Add Kid al código anterior:

Código (javascript) [Seleccionar]

var addkid = document.querySelector('#add');
addkid.addEventListener('click', function(e) {
  e.preventDefault(); // evita submit del forumulario
  /* AQUÍ COLOCA EL CÓDIGO ANTERIOR */
});

Vas a enviar la información del nuevo kid en formato JSON, así que debes de serializar el formulario y crear el JSON. Si no tienes experiencia en JS, usa JQuery.

Saludos.

Test Foro de elhacker.net SMF 2.1

alguien que me ayude o guie php botton agregar

geshiro

Usuario Invitado