We Keep Coding

Refreshing css after adding element with jQuery

I'm having problem loading custom css (twitter bootstrap) on radio input when I try to add that element using jQuery.
Here's a screenshot:
When I refresh the page the css of the radio input is loaded (next to the green arrow) but when I click to Add new sequence.
Here is the jQuery code:
$('#btn_addseq').on('click', function (e) {
e.preventDefault();
var newitem = 'some tags' +
'<input type="radio" name="is_default" value="new_' + size + '"> Default</input>' +
'some tags' ;
$("#list_sequences").append(newitem);
};
Edit:
My html for the working one:
<label class="mt-radio mt-radio-line" style="margin-top: 6px">
<input type="radio"
name="is_default" value="old_{{ $sequence->id }}" {{ $sequence->is_default ? 'checked' : '' }}>
Default
What I see in inspection:
And this is the code of the item I'm trying to add:
var newitem = '<div class="col-md-4">' +
'<div class="mt-radio-list">' +
'<label class="mt-radio mt-radio-line" style="margin-top: 6px">' +
'<input type="radio" name="is_default" value="new_' + size + '"> Default</input>' +
'</label>'+
'<a class="delete_new_seq" data-id="' + size + '"><i class="fa fa-remove" style="color: red;cursor: pointer;"></i> </a>'
'</div>' +
'</div>' ;

The rules that govern what an element looks like rely on a particular structure of HTML, in this case it looks like the css rules you use rely on either
The radio being inside a <div class="radio"> element. or;
The radio being inside a <label class="mt-radio mt-radio-line"> element.
(My guess would be the former, however its hard to know for sure without seeing all your css)

Your new control doesn't have the class specified. Add the class property to the tags like this:
var newitem = 'some tags' +
'<input type="radio" name="is_default" class="----" value="new_' + size + '"> Default</input>' +
'some tags' ;

Jquery inner quotes adding a variable

Hi I have browsed stack over flow and have not come up with a solution that seems to fix my issue so I am resorting to asking this fine community.
var feild = '<div style="margin-top: 0.75%;" class="input-group input-group-lg fields urlInputOne">' +
'<span class="input-group-addon glyphicon glyphicon-cog" id="basic-addon1"></span>' +
'<input type="text" class="form-control" id="urlField" placeholder="Extra GitHub repository URL" aria-describedby="basic-addon1">' +
'</div>';
In the input tag I want to add a variable to the id, how can i do this? I have tried a few different options but kept getting errors in the browser.
so i want it to be
id="urlfeild"+1 as an example.
thanks

You can simply concatenate your string and add your variable this way:
var yourVar = 1;
var feild = '<div style="margin-top: 0.75%;" class="input-group input-group-lg fields urlInputOne">' +
'<span class="input-group-addon glyphicon glyphicon-cog" id="basic-addon1"></span>' +
'<input type="text" class="form-control" id="urlField' + yourVar + '" placeholder="Extra GitHub repository URL" aria-describedby="basic-addon1">' +
'</div>';

Onclick on normal button is submitting form

SCENARIO
I have a java JSP view with a long form. This was working nice. I can submit my form by pressing enter in any input field or with submit button.
NEW REQUIREMENT
In a part, I must add buttons to replace some <label> for <input> to allow editing, nothing hard.
WHAT I TRIED
This part of the view is created dinamically, cause number of lines depends of the data introduced by user, this parts creates each line:
resultadoHTML += " <div class='row col-lg-12 col-xs-12' style='margin-bottom: 30px;text-align: left;'>";
resultadoHTML += " <label class='col-lg-3 col-xs-12 control-label' >" + nomCalidad + "</label>";
resultadoHTML += " <div class='col-lg-5 col-xs-8'>";
resultadoHTML += " <input type='text' class='form-control' value='"+valor+"' id='calidadCatId' maxlength='30' required='true' />";
resultadoHTML += " </div>";
resultadoHTML += " <div class='col-lg-2 col-xs-3' id='ccc" + parts[1] + "'>";
resultadoHTML += " <label class='control-label' id='unidadCCC" + parts[1] + "' >" + parts[4] + "</label>";
resultadoHTML += " </div>";
resultadoHTML += " <div class='col-lg-2 col-xs-1'>";
resultadoHTML += " <button id='eCCC" + parts[1] + "' class='btn btn-default'><span class='glyphicon glyphicon-plus-sign'></span></button>";
resultadoHTML += " </div>";
resultadoHTML += " </div>";
Resulting HTML of the button
<button id="eCCC5" class="btn btn-default"><span class="glyphicon glyphicon-plus-sign"></span></button>
PROBLEM
When I use onclick to define a function in the new button, this function is called, but after, the click event of the submit button is ALSO called and I dont know why... But as you can see in the code, even when i DON'T catch any event in the button the click event of the form is called.
OTHER INFO
FORM/BUTTON DEFINITION
<form:form class="form-horizontal" role="form" method="post"
commandName="contratMercan" action="../contratos/contratosubmit"
name="formulario" id="edicionContrato">
<button type="submit" class="btn btn-primary" id="edicionContrato">
<spring:message ... /> // omitted info
</button>
SUBMIT FUNCTION
$("#edicionContrato").submit(function(e){
e.preventDefault();
var form = this;
// checks and workarounds...
form.submit();
});
Any idea why could happen? Maybe dinamically introduced HTML code has some mistake and brokes javascript or html after?

When you use the <button> element without specifying a type, it defaults to type="submit". You need to specify it as type="button" to stop it submitting the form:
<button type="button" id="eCCC5" class="btn btn-default">
<span class="glyphicon glyphicon-plus-sign"></span>
</button>

If you have button with attribute type="submit", clicking on submit will send whole form. I think if you add attribute type="button" or just delete it. Form probably won't send if you click on button or push ENTER being in input.

Another option is to place the button element outside the FORM would help but it depends on your requirements. If you need to put that button inside the FORM then you've to mention type="button"

Add button inside textbox

I have this form which allows people to add addresses depending on how many ever they need and it is controlled by two buttons, one that is "add address" and another that is "remove". I was wondering if anyone could help me remove the "remove" button and instead place an "x" in the right corner of the text box that acts as a button to remove that box. I have placed the code related to the form below. Thanks again beforehand for all your help, I appreciate all your help.
jquery
<script>
$(window).load(function(){
$("#add-address").click(function(e){
e.preventDefault();
var numberOfAddresses = $("#form1").find("input[name^='data[address]']").length;
var label = '<label for="data[address][' + numberOfAddresses + ']"></label> ';
var input = '<input type="text" name="data[address][' + numberOfAddresses + ']" id="data[address][' + numberOfAddresses + ']" placeholder= "Address ' + (numberOfAddresses+1) + '"/>';
var removeButton = '<button class="remove-address">Remove</button>';
var html = "<div class='address'>" + label + input + removeButton + "</div>";
$("#form1").find("#add-address").before(html);
});
$(document).on("click", ".remove-address",function(e){
e.preventDefault();
$(this).parents(".address").remove();
//update labels
$("#form1").find("label[for^='data[address]']").each(function(){
//$(this).html("Address " + ($(this).parents('.address').index() + 1));
$(this).next("input").attr("placeholder","Address " + ($(this).parents('.address').index() + 1));
});
});
});
</script>
html
<form id="form1" method="post" action = "h.php">
<div class="address">
<!--<label for="data[address][0]">Address 1</label>-->
<input type="text" name="data[address][0]" id="data[address][0]" placeholder = "Address 1" />
</div>
<button id="add-address">Add address</button>
<input type="submit" value="Submit" />
</form>

You can do this simply using css, display:inline-block, and a negative margin-left
HTML
<div class="address">
<!--<label for="data[address][0]">Address 1</label>-->
<input type="text" name="data[address][0]" id="data[address][0]" placeholder = "Address 1" />
<div class="inputRemove">×</div>
</div>
CSS
.inputRemove{
display:inline-block;
margin-left:-20px;
cursor:pointer;
}
.address input[type=text] {
padding-right:25px;
}
The .address input[type=text] styling will make it so text inputed will not display under the close x
JSFiddle Demo

Just use position absolute the 'x'
.container " position relative
textarea " psotion absolute
.closeBtn " position absolute
notice i put the .closeBtn after the textarea element, so you dont need to specify the z-index in css. the later element will be above the previous element by default.

How to apply javascript to element created with append()?

I have a form that appears by append(). The form contains input that need to be adjusted with with js (autocomplete function).
Here is it:
function addForm() {
<!-- function code here-->
...
html += ' <table class="form">';
html += ' <tr>';
html += ' <td>Entry product</td>';
html += ' <td><input type="text" name="product" value="" /></td>';
html += ' </tr>';
html += ' <tr>';
html += ' <td> </td>';
html += ' <td><div id="featured-product" class="scrollbox">';
html += ' </div>';
html += ' <input type="hidden" name="featured_product" value="" /></td>';
html += ' </tr>';
html += ' </table>';
$('#form').append(html);
}
$('input[name=\'product\']').autocomplete({
<!-- function code here-->
}
But autocomplete function doesn't work in this way. As I understand it is because of append(html) doesn't store the html to DOM. It works fine with usual html form, but i can't go this way. I need to create forms as described. So the questions are:
How can i apply js to element that are not in DOM? Or how can I execute this elemnt to DOM with js?
Maybe I need to use smth another like append()?
Thanks.

Put this code:
$('input[name=\'product\']').autocomplete({
<!-- function code here-->
});
after the code that appends the html. The problem is that when this bind is attempted the DOM does not contain these elements
You could also use the .on functionality to apply this:
$('input[name=\'product\']').on("autocomplete",function(){
<!-- function code here-->
});