How to use the br tag in jquery?

Navigation
0

I start by telling you that I have no experience with jquery and at this moment I just want to give a space each time I add an input but I can not find the form, I have put the label here and it does not work: 

$(container).append('<input type=text required="required" name ="fields[]" class="input" id=tb' + iCnt + ' ' +
'placeholder="Producto ' + iCnt + '" />   ');

I leave my full code: 

<script>

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

// Crear un elemento div añadiendo estilos CSS
var container = $(document.createElement('div')).css({
padding: '5px', margin: '20px', width: '170px', border: '1px dashed',
borderTopColor: 'blue', borderBottomColor: 'blue',
borderLeftColor: 'blue', borderRightColor: 'blue'
});

$('#btAdd').click(function() {
if (iCnt <= 10) {

iCnt = iCnt + 1;

// Añadir caja de texto.
$(container).append('<input type=text required="required" name ="fields[]" class="input" id=tb' + iCnt + ' ' +
'placeholder="Producto ' + iCnt + '" />   ');


if (iCnt == 1) {

var divSubmit = $(document.createElement('div'));
$(divSubmit).append('<input type=submit name="btn-add" onclick="GetTextValue()"' +
'id=btSubmit value=Enviar />');

}

$('#main').after(container, divSubmit);
}
else { //se establece un limite para añadir elementos, 20 es el limite

$(container).append('<label>Limite Alcanzado</label>');
$('#btAdd').attr('class', 'bt-disable');
$('#btAdd').attr('disabled', 'disabled');

}
});

$('#btRemove').click(function() { // Elimina un elemento por click
if (iCnt != 0) { $('#tb' + iCnt).remove(); iCnt = iCnt - 1; }

if (iCnt == 0) { $(container).empty();

$(container).remove();
$('#btSubmit').remove();
$('#btAdd').removeAttr('disabled');
$('#btAdd').attr('class', 'bt')

}
});

$('#btRemoveAll').click(function() { // Elimina todos los elementos del contenedor

$(container).empty();
$(container).remove();
$('#btSubmit').remove(); iCnt = 0;
$('#btAdd').removeAttr('disabled');
$('#btAdd').attr('class', 'bt');

});
});

// Obtiene los valores de los textbox al dar click en el boton "Enviar"
var divValue, values = '';

function GetTextValue() {

$(divValue).empty();
$(divValue).remove(); values = '';

$('.input').each(function() {
divValue = $(document.createElement('div')).css({
padding:'5px', width:'200px'
});
values += this.value + '<br />'
});

$(divValue).append('<p><b>Tus valores añadidos</b></p>' + values);
$('body').append(divValue);

}




</script>
    
asked by Daniel Treviño 29.08.2017 в 00:51
source

4 answers

1

is very good what he proposes @ dengue8830, I would do: 

$('<input>').attr({
    type: 'text',
    required: 'required',
    name: 'fields[]',
    class: 'input',
    id: 'tb' + iCnt,
    placeholder: 'Producto' + iCnt
}).appendTo( container );

And then the class 

.input{
    margin-right: 10px;
}
    
answered by 29.08.2017 / 03:56
source
0

You can try with 

$(container).append('<input type=text required="required" name ="fields[]" class="input" id=tb' + iCnt + ' ' +
'placeholder="Producto ' + iCnt + '" />&nbsp;');

To add a space at the end or 

$(container).append('<input type=text required="required" name ="fields[]" class="input" id=tb' + iCnt + ' ' +
'placeholder="Producto ' + iCnt + '" /><br/>');

To give an enter

    
answered by 29.08.2017 в 00:58
0

This solution creates a label br below the input. 

$(document).ready(function(){

  var input =$('<input type="text"></input>');
  var br = $('<br/>');
  var parrafo = $('<p>Hola tengo un br arriba</p>');
  $("body").append(input);
  input.after(br);
  br.after(parrafo);

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
answered by 29.08.2017 в 20:01
0

The cleanest solution is to use CSS. If you use other HTML elements (such as br) to achieve a specific style then it will be difficult to improve or correct, not to mention how unresponsive your view will be.

You already have the input class, so the CSS to add a space could be something like this: 

.input {
    margin-right: 10px;
}

You would be adding a space to the right of each input

    
answered by 29.08.2017 в 02:34
How to redirect to the same page after deleting a record? convert timespan to datetime and add to a datetimerpicker