Hey guys please help me with this problem I want to onchange the new added select tag. Here is my code
<div id="ugh">
<select onchange="handicap">
<option id=c1> Example (5)</option>
<option id="c2"> Example (10)</option>
</select>
<input id="cap" type="text">
</div>
<a id="sigepa" class="fa fa-clone" style="font-size:30px"></a>
<script>
$('#sigepa').click(function(){
var ako = '';
ako += '<select onchange="handicap();">';
ako += '<option id="c1"> Example (5)</option>';
ako += '<select id="c2"> Example (10)</option>';
ako += '</select>';
ako += '<input id="cap" type="text">';
$('#ugh').append(ako);
});
</script>
<script>
function handicap()
{
var cap1 = document.getElementById('c1');
var cap2 = document.getElementById('c2');
if(cap1.selected)
{
document.getElementById('cap').value = 5;
}
else
{
document.getElementById('cap').value = 10;
}
}
</script>
please help me with this problem. i want that when i add new select tag the onchange will apply.
Here is my solution. I did change some ids and added a new div.
<div id="ugh">
<div class="container">
<select class="handicap">
<option value="5"> Example (5)</option>
<option value="10"> Example (10)</option>
</select>
<input class="cap" type="text">
</div>
The new cloned elements are not identified by Javascript is because that are not in the DOM tree. So you will have to access them like this.
Also I used value attribute in select options rather than individual ids, which helps to reduce a lot of unnecessary code.
<script type="text/jajvascript">
$('#sigepa').click(function(){
// this is not in DOM
var ako = '';
ako += '<div class="container">';
ako += '<select class="handicap">';
ako += '<option value="5"> Example (5)</option>';
ako += '<option value="10"> Example (10)</option>';
ako += '</select>';
ako += '<input class="cap" type="text">';
ako += '</div>';
$('#ugh').append(ako);
});
$(document).on("change", ".handicap", function () {
var value = $(this).val();
// selecting the closest input element
$(this).closest('.container').find('.cap').val(value);
});
</script>
Instead of creating a string, try making a new element directly.
ako = document.createElement("select");
You can then add the onChange listener by setting the attribute for it.
ako.setAttribute("onchange", function(){handicap()});
The second parameter of the setAttribute function needs to be wrapped in a function so that it doesn't evaluate your handicap function right away.
You can try to build elements with jQuery. You can 'Run code snippet' to see demo.
$(document).ready(function () {
$("#sigepa").click(function () {
// Check already added select and input, return and do nothing
if ($("#cap").length > 0) return;
// build select element
var select = $("<select>")
.append($("<option>").prop("id", "c1").text("Example (5)"))
.append($("<option>").prop("id", "c2").text("Example (10)"))
.attr('onchange', 'handicap()');
// build input element
var input = $("<input>").prop("id", "cap").prop("type", "text");
// append built items to #ugh
$("#ugh").append(select).append(input);
});
handicap = function () {
var cap1 = document.getElementById("c1");
var cap2 = document.getElementById("c2");
if (cap1.selected) {
document.getElementById("cap").value = 5;
} else {
document.getElementById("cap").value = 10;
}
};
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="ugh">
</div>
<a id="sigepa" class="fa fa-clone" style="font-size:30px">sigepa</a>
<script>
</script>
<script>
</script>