Actualmente estoy trabajando en un proyecto escolar, pero me he encontrado con un problema que no sé cómo resolver.

Mi grupo y yo estamos trabajando en un banco de recetas donde los usuarios pueden cargar sus propias recetas. Quiero que el usuario cargue la receta en etapas. Algo como

  1. Hierve un poco de agua.
  2. Pon los huevos en el agua hirviendo
  3. deje hervir por 5-6 minutos ".

El html:

<form action="handler.php" method="POST" enctype="multipart/form-data" name="recipe">
    <p><input type="text" name="name "placeholder="name"/></p>
    <p><div class="recipe_showing"></div></p>
    <textarea name="recipe_data"  class="recipe_data" style="display:none;"></textarea>
    <p><input type="text" class="recipe_part" placeholder="part of the recipe"/>
    <input type="button" class="recipe_enter" value="enter"/></p>
<more form tags and etc>

Sé el uso excesivo de las etiquetas <p>. Actualmente estamos trabajando en la funcionalidad del código, la optimización será la segunda.

Aquí está el código js que usamos

$(document).ready(function() {
    var recipe_logg_count=0;
    $(".recipe_enter").click(function() {
        if ($('.recipe_part').val() == null) {
            alert('please write down the first part of the recipe');
        }
        else {
            recipe_logg_count++;
            $('.recipe_showing').append(recipe_logg_count + '. ' + $('.recipe_part').val()+ '</br>');
            $('.recipe_data').append('<p>'+ recipe_logg_count + '. ' + $('.recipe_part').val()+'</p>');
        }
    });
});

No estoy mostrando el contenido del área de texto al usuario, estoy usando un div separado para eso. Como puede ver, estoy tratando de agregar simplemente los valores tomados de "cipe_part "al área de texto, pero esto no funciona.

He intentado eliminar la etiqueta <p> que agrego al principio, y que parece funcionar bien entonces. Pero necesito tener la etiqueta <p> para diseñar la receta en la página en la que se muestra.

¿Hay alguna forma de enviar el contenido del texto incluso si hay otras etiquetas html dentro de él?

1
Linus Johansson 10 may. 2016 a las 16:03

4 respuestas

La mejor respuesta

El append de jQuery cuando se aplica a un textarea parece ignorar silenciosamente el texto con etiquetas. Puede evitar esto usando $('textarea').text($('textarea').text() + ...) en su lugar, sin embargo, generalmente se desaconseja el envío de etiquetas html por parte del usuario ya que sin un saneamiento cuidadoso conducirá a ataques XSS.

0
Norgg 10 may. 2016 a las 13:26

No creo que pueda agregar texto dentro del área de texto. Debería poder agregar texto dentro del área de texto con val ();

Podría intentar usar la función .val ()

var textData =  $('.recipe_data').val();
var textShowing =  $('.recipe_showing').val();
$('.recipe_data').val(textData + recipe_logg_count + '. ' + $('.recipe_part').val()+"\n\r");
$('.recipe_showing').val(textShowing + recipe_logg_count + '. ' + $('.recipe_part').val()+"\n\r");

O bien, use js

var enterBtn = document.getElementById('recipe_enter');
var recipeData = document.getElementById('recipe-data');
var recipeShowing = document.getElementById('recipe-showing');
var recipeData_value = '';
var recipeShowing_value = '';
enterBtn.addEventListener('click', function(e){
    var rpart = document.getElementById('recipe_part').value;
    recipeData_value += recipe_log_count + '. ' + rpart + "\n\r";
    recipeShowing_value += recipe_logg_count + '. ' + rpart + "\n\r";
    recipeData.value = recipeData_value;
    recipeShowing.value = recipeShowing_value;
});

[JQuery] Guarde el texto anterior en variables fuera del alcance de la función y agregue estas variables y luego agregue estas variables como valores.

$(document).ready(function() {
var recipe_logg_count=0;

var recipe_data = '';
var recipe_showing = '';

$(".recipe_enter").click(function() {
    var recipe_part = $('.recipe_part').val();
    if (recipe_part == null) {
        alert('please write down the first part of the recipe');
    }
    else {
        recipe_logg_count++;
        recipe_data += recipe_logg_count + '. ' + recipe_part + "\n\r";
        recipe_showing += recipe_logg_count + '. ' + recipe_part +"\n\r";
        $('.recipe_data').val(recipe_data);
        $('.recipe_showing').val(recipe_showing);
    }
});
0
Nitin 10 may. 2016 a las 15:41

He probado algunas cosas ahora, y me di cuenta de que podía atacar el problema con php. Si me gusta esto:

"$('.recipe_data').append(recipe_logg_count + '. ' + $('.recipe_part').val()+ ':');"

Esto me permite agregar el valor. Después de eso, puedo hacer fácilmente

$recipe_parts = explode(':', $recipe_data);
foreach($recipe_parts as $part){
print "<p>".$part."<p/>";
}
0
Linus Johansson 10 may. 2016 a las 14:03

No insertaría párrafos dentro de un área de texto (no estoy seguro si es posible). En cambio, tendría 2 tablas dentro de la base de datos mysql, una llamada "recetas" y la otra llamada "pasos". Cada receta tiene una identificación de incremento automático, y cada paso está conectado a una receta por esa identificación. Mientras el usuario inserta pasos en cada envío de un paso, haría una llamada ajax que insertaría ese paso en una base de datos, mostrárselo al usuario dentro de este div adicional que está utilizando para la vista previa de la receta y vaciar la entrada para que el usuario pueda comience a insertar el siguiente paso.

0
Mario Plantosar 10 may. 2016 a las 13:20