This is my code, so basically on click of button I want to call this method addpoc() which creates a block of input boxes and a dropdown. I want to call a method showmail() on selection of dropdown option but it throws error. How can i fix it ?
function addpoc() {
let el;
el = '<div class="clearfix"><div class="name"><label for="fname">First name:</label><br><input type="text" id="fname" name="fname" placeholder="Ricky"></div><div class="name"><label for="lname">Last name:</label><br><input type="text" id="lname" name="lname" placeholder="Ju"></div></div><div class="parent" style="width: 100%;"><div id="one"><select id="contact method" onchange="' showMail() '"><option value="workmail" selected>Work email </option><option value="personalmail">Personal Email</option></select></div><div id="two" style="display: none;"><input type="email" name="email" placeholder="Work email"></div><div id="three" style="display: none;"><input type="email" name="email" placeholder="Personal email"></div></div>'
$('#addelement').append(el);
}
function showMail() {
let selecteop = document.getElementById("contact method");
if (selecteop.value == "workmail") {
$("#two").show();
$("#three").hide();
}
else {
$("#three").show();
$("#two").hide();
}
} <div>
<div id="addelement"></div>
<button id="addbtn" onclick="addpoc()">Add another point of contact</button>
</div>CodePudding user response：
the problem was in the el = '<div cla ... you were calling the showMail function before the whole element being inserted in the dom so selecteop was not created yet.
function addpoc() {
let el;
el = '<div class="clearfix"><div class="name"><label for="fname">First name:</label><br><input type="text" id="fname" name="fname" placeholder="Ricky"></div><div class="name"><label for="lname">Last name:</label><br><input type="text" id="lname" name="lname" placeholder="Ju"></div></div><div class="parent" style="width: 100%;"><div id="one"><select id="contact method" onchange="showMail()"><option value="workmail" selected>Work email </option><option value="personalmail">Personal Email</option></select></div><div id="two" style="display: none;"><input type="email" name="email" placeholder="Work email"></div><div id="three" style="display: none;"><input type="email" name="email" placeholder="Personal email"></div></div>'
$('#addelement').append(el);
}
function showMail() {
let selecteop = document.getElementById("contact method");
if (selecteop.value == "workmail") {
$("#two").show();
$("#three").hide();
} else {
$("#three").show();
$("#two").hide();
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div id="addelement"></div>
<button id="addbtn" onclick="addpoc()">Add another point of contact</button>
</div>CodePudding user response：
Just change your function addpoc() function as per below. Instead of calling function showMail() at the time of html creation just pass function reference to onChange like onchange="' showMail '" Just remove braces.
Also, initialize el to '' empty. Otherwise, it will always start with undefined. This will solve all your issues.
function addpoc() {
let el='';
el = '<div class="clearfix"><div class="name"><label for="fname">First name:</label><br><input type="text" id="fname" name="fname" placeholder="Ricky"></div><div class="name"><label for="lname">Last name:</label><br><input type="text" id="lname" name="lname" placeholder="Ju"></div></div><div class="parent" style="width: 100%;"><div id="one"><select id="contact method" onchange="' showMail '"><option value="workmail" selected>Work email </option><option value="personalmail">Personal Email</option></select></div><div id="two" style="display: none;"><input type="email" name="email" placeholder="Work email"></div><div id="three" style="display: none;"><input type="email" name="email" placeholder="Personal email"></div></div>'
$('#addelement').append(el);
}