7

Tome este ejemplo de demostración jsfiddle, cómo referencia u guía para añadir efectos y mostrar mensaje de error.

Logre el mismo efecto, pero la validación del mensaje de error no, al insertar una etiqueta duplicada o una etiqueta no permitida muestra el mismo mensaje de error "No se puede añadir etiqueta duplicada" ahora al eliminar la etiqueta el mensaje de error permanece no desaparece.

Código completo en ejecución:

https://jsfiddle.net/39m2nukg/

//var arr_db = [];
var arr_db = ["html", "css", "jquery", "javascript", "php"];
var usuario_tags = [];
 
$(function(){
  $.ajax({
    url: 'tags.php',
    success: function(result) {
      var returnedData = JSON.parse(result);
      var total = returnedData.length;
      for(var i = 0; i < total; i++) {
        arr_db.push(returnedData[i]);
      }
    }
  });
 
  // ::: TAGS BOX

  $("#tags input").on({
    focusout : function() {
    var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig,''); // allowed characters
    var control = agregar_tags(txt.toLowerCase(), usuario_tags);
    var verifica_tags = control_tags(txt.toLowerCase(), arr_db);
 
    if(txt && control == false && verifica_tags == true) {
     $('#message').hide();
      $("<span/>",
      {
        text: txt.toLowerCase(), 
        insertBefore:this
      });
    } else {
      $('#message').show();
    }
 
    this.value = "";
  },
 
  keyup : function(ev) {
  // if: comma|enter (delimit more keyCodes with | pipe)
  if(/(188|13)/.test(ev.which)) $(this).focusout();
}
});
 
  $('#tags').on('click', 'span', function() {
    $(this).remove();
    quitar_tags(usuario_tags, $(this).text());
  });
});
 
function agregar_tags(tag, arrtags) {
  var index = -1;
  var resultado = control_tags(tag, arrtags);
 
  for(var i = 0; i < arrtags.length; i++) {
    if(arrtags[i] === tag) {
      index = i;
    }
  }
 
  if(index > -1) {
    arrtags[index] = tag;
  } else {
    arrtags.push(tag);
  }
   return resultado;
}
 
function control_tags(needle, haystack) {
  var length = haystack.length;
  for(var i = 0; i < length; i++) {
    if(typeof haystack[i] == 'object') {
      if(arrayCompare(haystack[i], needle)) return true;
    } else {
      if(haystack[i] == needle) return true;
    }
  }
  return false;
}
 
function quitar_tags(array, element) {
  const index = array.indexOf(element);
  array.splice(index, 1);
}
#tags{float:left;border:1px solid #ccc;padding:5px;font-family:Arial;} #tags > span{cursor:pointer;display:block;float:left;color:#fff;background:#789;padding:5px;padding-right:25px;margin:4px;} #tags > span:hover{opacity:0.7;} #tags > span:after{position:absolute;content:"×";border:1px solid;padding:2px 5px;margin-left:3px;font-size:11px;} #tags > input{background:#eee;border:0;margin:4px;padding:7px;width:auto;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form method="post">

   <label>Título<br/>
  <input type="text" name="titulo" maxlength="255" />
   </label><br/>

   <label>Noticia<br/>
 <textarea name="novedad"></textarea>
   </label><br/><br/>

<div id="tags">
  <input type="text" value="" placeholder="Add a tag" />
</div>
<p id="message" style="display:none">No se puede añadir una etiqueta duplicada.</p><br/><br/><br/>

<button type="submit">Publicar noticia</button>
</form>

Estoy aplicando mal los parámetros o las variables en el código jQuery es muy diferente a php, me podrían guiar que debo tomar en cuenta para aplicar correctamente estos mensajes de errores.

¿Cómo aplico correctamente éstos mensaje de errores al código jQuery?

Ejemplo:

Mostrar mensaje de error al añadir una etiqueta duplicada.

introducir la descripción de la imagen aquí

Mostrar mensaje de error al intentar añadir una etiqueta no permitida, las etiquetas tags permitidas se toman desde esta variable directa o desde una base de datos var arr_db = [];

introducir la descripción de la imagen aquí

Limitar el máximo de etiquetas y a la vez mostrar un mensaje de error. introducir la descripción de la imagen aquí

8
  • 1
    esta pregunta no la hiciste el otro dia? deja-vu Commented el 15 sept. 2016 a las 16:48
  • 1
    @rnd Sí esta pregunta la realice la otra vez, pero la anterior pregunta esperaba que escribieran el código por mi sin especificar que error muestra o que error se ejecutaba, en este caso trabaje en el código pero sin poder lograr que funcione correctamente, muestra el mensaje de error pero no en un orden preciso u correcto $('#message').hide();
    – Otto
    Commented el 15 sept. 2016 a las 16:55
  • Hola J. Doe, he realizado una reversión de la pregunta a su estado anterior cuándo la recompensa ya se activó debido al cambio substancial realizado en la pregunta. Piensa que al modificar tanto la pregunta inicial las respuestas que había pueden (y así ha sido) quedar invalidadas o no tener sentido debido a la edición. Si las respuestas actuales te han ayudado a avanzar y tienes otra pregunta, lo mejor es realizar una pregunta separada. Commented el 22 sept. 2016 a las 6:48
  • 1
    @MiquelColl no cuestionó pero antes de haber realizado los cambios a mi pregunta te hubiese tomado la molestia de observar las respuestas si observas ninguna respuesta se basa a la pregunta que hice todas son diferentes aunque en realidad se basaron más al cambio que hice a mi pregunta las recomendaciones fueron aceptadas por ello edite mi pregunta.
    – Otto
    Commented el 22 sept. 2016 a las 9:14
  • J. Doe, antes de realizar la edición he mirado las respuestas, te lo aseguro. Que sean distintas se debe a que la pregunta en sí es ámplia pero las respuestas (al menos todas menos 1) hacen referencia a la pregunta tal y cómo está planteada ahora y ninguna de ellas tenía sentido con la actualización a la pregunta que hiciste, por eso la reversión. Si quieres podemos hablarlo en el chat y te animo a crear una nueva pregunta con lo que comentabas :) Commented el 22 sept. 2016 a las 9:18

4 respuestas 4

8

Doe.

Primero que nada te invito usar un código más claro y con variables más descriptivas para que sea más legible, simple y eficaz. De esta manera no solo sabrás más fácil donde se encuentran los errores, sino también llevar un mejor control del código por más grande que este sea. Comenzar a usar una guía de estilo podría ser un buen paso.

En cuánto a lo que intentas hacer, me parece que el código podría llegar a ser incluso más simple. Una base para ello podría ser el siguiente ejemplo funcional:

NOTA: Lo único que tendrías que hacer para terminarlo sería agregar la consulta, adición y eliminación de estas etiquetas mediante ajax en sus respectivos métodos.

(function() {
  var allowedTags = ['html', 'css', 'javascript', 'php', 'java', 'mysql'];
  var tags = {};
  var input = $('#input');
  var errors = {
    invalid: 'La etiqueta no es válida.',
    duplicated: 'No es posible agregar etiquetas duplicadas.',
    noMoreTags: 'No posible agregar más de 4 etiquetas.'
  };

  $('.allowed_tags').text(allowedTags.toString());

  input.blur(function() {
    var tag = $(this).val().trim();
    if (!tag) return;
    if (Object.keys(tags).length >= 4) return throwErr(errors.noMoreTags);
    if (!isValidTag(tag)) return throwErr(errors.invalid);
    if (tagExists(tag)) return throwErr(errors.duplicated);

    addTag(tag.toLowerCase());
    $(this).val('');
  });

  input.focus(function() {
    $('.error').text('');
  });

  $('.tags').on('click', '.tag', function() {
    removeTag($(this).text().toLowerCase());
  });

  function isValidTag(tag) {
    return allowedTags.indexOf(tag) > -1;
  }

  function tagExists(tagName) {
    return tags.hasOwnProperty(tagName);
  }

  function addTag(tagName) {
    var tag = $('<span>', { class: 'tag', text: tagName });
    tag.name = tagName;
    $('.container .tags').append(tag);
    tags[tagName] = tag;
  }

  function removeTag(tagName) {
    if (tags.hasOwnProperty(tagName)) {
      tags[tagName].remove();
      delete tags[tagName];
    }
  }

  function throwErr(message) {
    $('.error').text(message);
    input.val('');
  }
})();
.container {
    margin-top: 10px;
    display: inline-block;
    position: relative;
    border: 1px solid #ccc;
    padding: 0.5em;
  }

  .container .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .container .wrapper .tags span.tag {
    padding: .5em .8em;
    background: #16a085;
    color: #fff;
    text-align: center;
    margin-right: 0.2em;
    border-radius: 3px;
    cursor: pointer;
  }

  input[type=text] {
    padding: .5em;
  }

  .error {
    display: inline-block;
    color: #c0392b;
  }
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
</head>
<body>
  <div>
    Etiquetas válidas: 
    <span class="allowed_tags"></span>
  </div>
  <div class="container">
    <div class="wrapper">
      <div class="tags"></div>
      <input type="text" id="input" placeholder="Nueva etiqueta">
    </div>
  </div>
  <div class="error"></div>
  <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
</body>
</html>

1
  • Los comentarios no deben usarse para discusiones extendidas; esta conversación ha sido trasladada a un chat. Commented el 21 sept. 2016 a las 9:27
7

Dejo el ejemplo hecho sin usar jQuery, no es tan elegante como el de @MauroAguilarBustamante pero cumple la función que pide.

Pongo los prototipos de las funciones que acabo de programar.

  • function esDuplicado(texto)
  • function esEtiquetaValida(texto,contiene)
  • function borrar(texto)
  • generarBaseDatos()
  • function agregarEtiqueta()

Además, se añaden correctamente los mensajes de estado.

  • "Etiqueta duplicada."
  • "Listo."
  • "Escribiendo..."
  • "Etiqueta no válida."

Código final:

function esDuplicado(texto)
{
	var devuelve=false
	var lista=etiquetas.getElementsByTagName("a")
	for(var i=0;i<lista.length;i++)
	{
		if(lista[i].textContent==texto+" x; ")
		{
			devuelve=true;
			break;
		}
	}
	return devuelve
}
function esEtiquetaValida(texto,contiene)
{
	var devuelve=false 
	var etiquetasValidas = ["html", "css", "javascript", "php", "java", "mysql"]
	var longitudTexto = texto.length
	for(var i=0;i<etiquetasValidas.length;i++)
	{
		var condicion
		if( contiene=="contiene" )
		{
			cortado=etiquetasValidas[i].slice(0,longitudTexto)
			condicion = cortado==texto
		}
		else
		{
			condicion=etiquetasValidas[i]==texto
		}
		if(condicion)
		{
			devuelve=true;
			break;
		}
	}
	return devuelve
}
function generarBaseDatos()
{
	baseDatos=[]
	var etiquetasTags=etiquetas.getElementsByTagName("a")
	for(var i=0;i<etiquetasTags.length;i++)
	{
		var texto=etiquetasTags[i].innerText.split(" x;")[0]
		baseDatos[baseDatos.length]=texto
	}
	baseDeDatos.innerHTML="baseDatos="
	baseDeDatos.innerHTML+=JSON.stringify(baseDatos)
}
function borrar(texto)
{
	var eti=etiquetas.getElementsByClassName("eti_"+texto)[0];
	eti.parentNode.removeChild(eti);
	generarBaseDatos()
	entrada.select()
}
function agregarEtiqueta()
{
	var valor=entrada.value
	var estado_texto
	if( esEtiquetaValida(valor,"contiene") )
	{
		var condicion_1 = !esDuplicado(valor)
		var condicion_2 = esEtiquetaValida(valor,"es")
		if( condicion_1 && condicion_2 )
		{
			var texto=""
			texto+="<a class=eti_"
			texto+=valor
			texto+=">"
			texto+=valor
			texto+=" <button onclick=borrar(\""
			texto+=valor
			texto+="\")>x</button>; </a>"
			etiquetas.innerHTML+=texto
			
			estado.innerHTML="Etiqueta añadida."
			generarBaseDatos()
			
			entrada.value=""
		}
		else
		{
			if(condicion_2)
			{
				estado_texto="Etiqueta duplicada."
				entrada.value=""
				estado.innerHTML=estado_texto
			}
			if( valor=="" && !condicion_2 )
			{
				estado_texto="Listo."
				estado.innerHTML=estado_texto
			}
			if( valor!="" && !condicion_2 )
			{
				estado_texto="Escribiendo..."
				estado.innerHTML=estado_texto
			}
		}
	}
	else
	{
		estado_texto="Etiqueta no válida."
		entrada.value=""
		estado.innerHTML=estado_texto
	}
}
<body>
	<p>Etiquetas validas: "html", "css", "javascript", "php", "java", "mysql"</p>
	<p>
		<input
			id="entrada"
			placeholder="Escriba la etiqueta."
			onkeyup="agregarEtiqueta()"
		></input> <a>Estado: <a id=estado>Listo.</a></a>
	</p>
	<p>Etiquetas: <a id=etiquetas></a></p>
	<p>
		Base Datos:
		<button onclick=generarBaseDatos()>Generar</button>
		<button
	onclick="baseDeDatos.innerHTML='baseDatos=[]';baseDatos=[]">
			Vaciar
		</button>
		<div id=baseDeDatos>baseDatos=[]</div>
	</p>
</body>

1
4
+100

PHP: Así es como lo guardas en un sólo registro:

$sentencia->bind_param('is', $id, $tags);
$sentencia->execute();

JavaScript: prueba con el siguiente código (sólo ha sido modificado Js), este ya lo he modelado para seguir con el paradigma de programación orientada a objetos (POO), la documentación ya viene incluída en el código:

$(function() {
  'strict mode';

  /**
   * Creamos un nuevo tipo de error para manejarlo más adelante.
   * @param {string} msg
   */
  var InvalidTag = function (msg) {
    this.message = msg;
    this.stack = (new Error()).stack;
  }
  InvalidTag.prototype = Object.create(Error.prototype);
  InvalidTag.prototype.name = 'InvalidTag';

  /**
   * Tags es creado para ser manejado como objeto (POO).
   * 
   * @type {Object}
   * 
   * @property {Array<string>} allowed  Etiquetas permitidas.
   * @property {number} maxAllowed      Número máximo permitido de etiquetas.
   * @property {Object} errors          Contiene los objetos de errores.
   * @property {Object} container       Es creado de `null` para que no herede un prototipo.
   */
  var Tags = {
    allowed: ['html', 'css', 'javascript', 'php', 'java', 'mysql'],
    maxAllowed: 4,
    errors: {
      invalid: new InvalidTag('The tag is invalid.'),
      duplicated: new InvalidTag('You can not add duplicate labels.'),
      noMoreTags: new InvalidTag('Can not add more than 4 tags.')
    },

    container: Object.create(null),

    /**
     * Aquí van las reglas para normalizar la cadena de texto que representa la
     * etiqueta.
     * 
     * @param  {string} tag
     * @return {string}
     */
    normalize: function(tag) {
      return tag.toLowerCase().trim();
    },

    /**
     * Añade una etiqueta a la propiedad `container` de este objeto y al elemento
     * en el DOM.
     * 
     * @param {string} tag
     * @param {Boolean} normalize
     */
    add: function (tag, normalize) {
      tag = normalize ? this.normalize(tag) : tag;

      if (Object.keys(this.container).length >= this.maxAllowed)
        throw this.errors.noMoreTags;

      if (!this.isValid(tag)) throw this.errors.invalid;
      if (Tags.exists(tag)) throw this.errors.duplicated;

      this.container[tag] = $('<span>', { class: 'tag', text: tag });
      $('.container .tags').append(this.container[tag]);
    },

    /**
     * Remueve una etiqueta en la propiedad `container` de este objeto y el elemento
     * en el DOM.
     * 
     * @param {string} tag
     * @param {Boolean} normalize
     */
    remove: function(tag, normalize) {
      tag = normalize ? this.normalize(tag) : tag;

      if (this.exists(tag)) {
        this.container[tag].remove();
        delete this.container[tag];
      }
    },

    /**
     * Devuelve un booleano en función de que la etiqueta (tag) se encuentre dentro
     * de las etiquetas permitidas (this.allowed).
     * 
     * @param  {string}  tag
     * @return {Boolean}
     */
    isValid: function (tag) {
      return this.allowed.indexOf(tag) > -1;
    },

    /**
     * Valida que la etiqueta ya exista dentro del contenedor (container).
     * 
     * @param  {string} tag
     * @return {Boolean}
     */
    exists: function (tag) {
      return (tag in this.container);
    },

    /**
     * Devuelve un los textos de las etiquetas separadas por coma (,).
     *
     * @see {@link https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/join}
     * @return {string}
     */
    toString: function () {
      return Object.keys(this.container).join();
    }
  };

  /**
   * Este evento se ejecutará cada que el usuario presione «Enter» debido a que
   * el evento está a la espera de un `submit`.
   *
   * Descomentar estas líneas siguientes para habilitar el envío de datos.
   * Está comentada para funcionar en StackOverflow Español.
   */
  /**
  $('.AjaxForm').on('submit',function(e) {
    var data = {};
    data.tags = Tags.toString();

    $.ajax({
      method: 'POST',
      url: 'post.php',
      data: data,
      success: function(response) {
        console.log(response);
      }
    });

    e.preventDefault();
    e.stopPropagation();
  });*/

  $('.allowed_tags').text(Tags.allowed.toString());

  $(document).on({
    /**
     * Función que se encargará de añadir las etiquetas.
     * 
     * @param  {Event} e
     */
    keyup: function handler (e) {
      if (e.type !== 'blur' && e.type !== 'keyup') return;
      if (e.type === 'keyup' && $(this).val().indexOf(',') === -1) return;
      if ($(this).val() === '') return;

      try {
        Tags.add( $(this).val().replace(',', ''), true );
      } catch (ex) {
        if (ex instanceof InvalidTag) $('.error').text(ex.message);
        else throw ex;
      } finally {
        $(this).val('');
      }
    },

    focus: function() {
      $('.error').text('');
    }
  }, '#input');

  $('.tags').on('click', '.tag', function() {
    Tags.remove( $(this).text(), true );
  });

});
.container {
  margin-top: 10px;
  display: inline-block;
  position: relative;
  border: 1px solid #ccc;
  padding: 0.5em;
}

.container .wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.container .wrapper .tags span.tag {
  padding: .5em .8em;
  background: #16a085;
  color: #fff;
  text-align: center;
  margin-right: 0.2em;
  border-radius: 3px;
  cursor: pointer;
}

input[type=text] {
  padding: .5em;
}

.error {
  display: inline-block;
  color: #c0392b;
}
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <div>
      Etiquetas válidas: 
      <span class="allowed_tags"></span>
    </div>
    <div class="container">
      <div class="wrapper">
        <div class="tags"></div>
        <form action="" method="POST" class="AjaxForm">
          <input type="text" id="input" placeholder="Nueva etiqueta">
          <input type="submit" value="Add tags">
        </form>
      </div>
    </div>
    <div class="error"></div>
    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
  </body>
</html>

8
  • 1
    Lo puedes trabajar normal, sólo que ahora llámalo como: Tags.allowed. Ya solucioné lo de las mayúsculas.
    – Chofoteddy
    Commented el 22 sept. 2016 a las 3:36
  • 1
    @J.Doe Ahora el código es compatible con teléfonos móviles y ya no tiene añade las etiquetas tras perder el focus.
    – Chofoteddy
    Commented el 22 sept. 2016 a las 15:38
  • De ser así, no hagas explode() y quita el foreach a como lo tenías inicialmente.
    – Chofoteddy
    Commented el 22 sept. 2016 a las 23:01
  • Ya se guardan con la coma en un sólo registro. Si una de las respuestas que tienes ya te ha funcionado calificala como tal.
    – Chofoteddy
    Commented el 23 sept. 2016 a las 18:05
  • 1
    no funciona, o es mi navegador?
    – hubman
    Commented el 12 feb. 2017 a las 2:25
3

Considerando que no puedes enviar un array asi como tal por post a php pensé en transformar a json ó separar las palabras claves por comas, utilizando la ultima opción el PHP también debe ser modificado y usar un explode en vez de un implode para separar en array las comas, y con un foreach en php :

// insert en la base
    $sentencia = $mysqli->prepare("INSERT INTO $tabla (id,addtags) VALUES (?, ?)");
    foreach ($tags as $key => $value) {
        if($value!=''){
            $sentencia->bind_param("is",$id, $value);
            $sentencia->execute();
        }
    }

CODIGO COMPLETO PHP:

    <?php
if (isset($_POST['tags']) && !empty($_POST['tags'])) {
    // Datos recibidos
    $tags = explode(',', $_POST['tags']);
    //Datos de conexión a la base
    $host = "localhost";
    $usuario = "root";
    $clave = "";
    $basedatos = "tags";
    $tabla = "tags";

    // Conectar a la base
    //  la variable $myslqi contendrá el objeto con la conexión
    $mysqli = mysqli_connect($host, $usuario, $clave, $basedatos);
    if (mysqli_connect_errno($mysqli)) {
        die( "Error al conectar a MySQL: " . mysqli_connect_error() );
    }

    // insert en la base
    $sentencia = $mysqli->prepare("INSERT INTO $tabla (id,addtags) VALUES (?, ?)");
    foreach ($tags as $key => $value) {
        if($value!=''){
            $sentencia->bind_param("is",$id, $value);
            $sentencia->execute();
        }
    }

    // Cerrar la conexión
    $sentencia = null;
    $mysqli = null;

    // Devolver una respuesta a JavaScript
    echo "Se grabó la etiqueta tags";
} 
?>

CODIGO COMPLETO HTML:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
</head>
<style type="text/css">
.container {
    margin-top: 10px;
    display: inline-block;
    position: relative;
    border: 1px solid #ccc;
    padding: 0.5em;
  }

  .container .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .container .wrapper .tags span.tag {
    padding: .5em .8em;
    background: #16a085;
    color: #fff;
    text-align: center;
    margin-right: 0.2em;
    border-radius: 3px;
    cursor: pointer;
  }

  input[type=text] {
    padding: .5em;
  }

  .error {
    display: inline-block;
    color: #c0392b;
  }
</style>
<body>
  <div>
    Etiquetas válidas: 
    <span class="allowed_tags"></span>
  </div>
  <div class="container">
    <div class="wrapper">
      <div class="tags"></div>
      <form action="" method="POST" class="AjaxForm">
        <input type="text" id="input" placeholder="Nueva etiqueta">
        <input type="submit" value="Add tags">
      </form>
    </div>
  </div>
  <div class="error"></div>
  <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
  <script type="text/javascript">
$(document).ready(function() {
  var allowedTags = ['html', 'css', 'javascript', 'php', 'java', 'mysql'];
  tags = [];
  var input = $('#input');
  var errors = {
    invalid: 'The tag is invalid.',
    duplicated: 'You can not add duplicate labels.',
    noMoreTags: 'Can not add more than 4 tags.'
  };


  $('.AjaxForm').on('submit',function(e) {
    var datos = Object.keys(tags);
    var d = '';
    $.each(datos,function(key,value){
      d+=value+',';
    });
    var url = 'recordbd.php';
    $.ajax({
      method: 'POST',
      url: url,
      data:{tags:d},
      success: function(response) {
        console.log(response);
      }
    });
    return false;
  });


  $('.allowed_tags').text(allowedTags.toString());


  input.blur(function() {
    var tag = $(this).val().trim();
    if (!tag) return;
    if (Object.keys(tags).length >= 4) return throwErr(errors.noMoreTags);
    if (!isValidTag(tag)) return throwErr(errors.invalid);
    if (tagExists(tag)) return throwErr(errors.duplicated);

    addTag(tag.toLowerCase());
    $(this).val('');
  });

  input.focus(function() {
    $('.error').text('');
  });

  $('.tags').on('click', '.tag', function() {
    removeTag($(this).text().toLowerCase());
  });

  function isValidTag(tag) {
    return allowedTags.indexOf(tag) > -1;
  }

  function tagExists(tagName) {
    return tags.hasOwnProperty(tagName);
  }

  function addTag(tagName) {
    var tag = $('<span>', { class: 'tag', text: tagName });
    tag.name = tagName;
    $('.container .tags').append(tag);
    tags[tagName] = tag;
  }

  function removeTag(tagName) {
    if (tags.hasOwnProperty(tagName)) {
      tags[tagName].remove();
      delete tags[tagName];
    }
  }

  function throwErr(message) {
    $('.error').text(message);
    input.val('');
  }

});
  </script>
</body>
</html>

Esto resuelve enviar datos a php para ser guardados en una base de datos.

1
  • Hola, transformar a json te refieres al código Ajax o al código PHP amigo.
    – Otto
    Commented el 21 sept. 2016 a las 23:42

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.