Reputation: 644
I am getting following error when ii try to run the code I know the error is in the append function I don't know how to handle with escape characters
function check()
{
if(usertype==null)
{
alert('please select user type');
}
else
{
$('#registerusers').hide();
if(usertype=='individual')
{
$('#agent').html();
$('#vendor').html();
$('#service').html();
$('#'+usertype).append('<div class="tab">Name: <p><input placeholder="First name..." oninput="this.className = ''"></p> <p><input placeholder="Last name..." oninput="this.className = ''"></p> </div> <div class="tab">Contact Info: <p><input placeholder="E-mail..." oninput="this.className = ''"></p> <p><input placeholder="Phone..." oninput="this.className = ''"></p> </div> <div class="tab">Birthday: <p><input placeholder="dd" oninput="this.className = ''"></p> <p><input placeholder="mm" oninput="this.className = ''"></p> <p><input placeholder="yyyy" oninput="this.className = ''"></p> </div> <div class="tab">Login Info: <p><input placeholder="Username..." oninput="this.className = ''"></p> <p><input placeholder="Password..." oninput="this.className = ''"></p> </div> <div style="overflow:auto;"> <div style="float:right;"> <button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button> <button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button> </div> </div> <!-- Circles which indicates the steps of the form: --> <div style="text-align:center;margin-top:40px;"> <span class="step"></span> <span class="step"></span> <span class="step"></span> <span class="step"></span> </div> ');
$('#'+usertype).removeClass('hid');
}
else if(usertype=='agent')
{
$('#individual').html();
$('#vendor').html();
$('#service').html();
$('#'+usertype).html('<h2> as</h2>');
$('#'+usertype).removeClass('hid');
}
alert(usertype);
}
}
Upvotes: 0
Views: 57
Reputation: 330
Try this :
function check()
{
if(usertype==null)
{
alert('please select user type');
}
else
{
$('#registerusers').hide();
if(usertype=='individual')
{
$('#agent').html();
$('#vendor').html();
$('#service').html();
$('#'+usertype).append('\
<div class="tab">\
Name: <p><input placeholder="First name..." oninput="this.className = '+""+'"></p>\
<p><input placeholder="Last name..." oninput="this.className = '+""+'"></p> \
</div> \
<div class="tab">\
Contact Info: <p><input placeholder="E-mail..." oninput="this.className = '+""+'"></p> \
<p><input placeholder="Phone..." oninput="this.className = '+""+'"></p> \
</div> \
<div class="tab">\
Birthday: <p><input placeholder="dd" oninput="this.className = '+""+'"></p> \
<p><input placeholder="mm" oninput="this.className = '+""+'"></p> \
<p><input placeholder="yyyy" oninput="this.className = '+""+'"></p>\
</div> \
<div class="tab">\
Login Info: <p><input placeholder="Username..." oninput="this.className = '+""+'"></p> \
<p><input placeholder="Password..." oninput="this.className = '+""+'"></p> \
</div> \
<div style="overflow:auto;"> \
<div style="float:right;"> \
<button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button> \
<button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button> \
</div> \
</div> <!-- Circles which indicates the steps of the form: --> \
<div style="text-align:center;margin-top:40px;"> \
<span class="step"></span> \
<span class="step"></span> \
<span class="step"></span> \
<span class="step"></span> \
</div> \
');
$('#'+usertype).removeClass('hid');
}
else if(usertype=='agent')
{
$('#individual').html();
$('#vendor').html();
$('#service').html();
$('#'+usertype).html('<h2> as</h2>');
$('#'+usertype).removeClass('hid');
}
alert(usertype);
}
}
Upvotes: 1
Reputation: 27051
You have to escape the ''
in your code:
Like this: oninput="this.className=\'\'"
Look at the solution below:
var usertype = "individual"
function check() {
if (usertype == null) {
alert('please select user type');
} else {
$('#registerusers').hide();
if (usertype == 'individual') {
$('#agent').html();
$('#vendor').html();
$('#service').html();
$('#' + usertype).append('<div class="tab">Name: <p><input placeholder="First name..." oninput="this.className=\'\'"></p><p><input placeholder="Last name..." oninput="this.className=\'\'"></p> </div> <div class="tab">Contact Info: <p><input placeholder="E-mail..." oninput="this.className=\'\'"></p> <p><input placeholder="Phone..." oninput="this.className=\'\'"></p> </div> <div class="tab">Birthday: <p><input placeholder="dd" oninput="this.className=\'\'"></p> <p><input placeholder="mm" oninput="this.className="></p> <p><input placeholder="yyyy" oninput="this.className=\'\'"></p> </div> <div class="tab">Login Info: <p><input placeholder="Username..." oninput="this.className=\'\'"></p> <p><input placeholder="Password..." oninput="this.className=\'\'"></p> </div> <div style="overflow:auto;"> <div style="float:right;"> <button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button> <button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button> </div> </div> <!-- Circles which indicates the steps of the form: --> <div style="text-align:center;margin-top:40px;"> <span class="step"></span> <span class="step"></span> <span class="step"></span> <span class="step"></span> </div> ');
$('#' + usertype).removeClass('hid');
} else if (usertype == 'agent') {
$('#individual').html();
$('#vendor').html();
$('#service').html();
$('#' + usertype).html('<h2> as</h2>');
$('#' + usertype).removeClass('hid');
}
alert(usertype);
}
}
check()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="individual"></div>
Upvotes: 1