Page 1 of 1
Add div tag class='input-group px-0'
Posted: Sun Jun 16, 2024 11:25 pm
by lissa
hi,
I want to add an icon to the right of the username text with code like this:
code works successfully
$("#username").before("<div class='input-group px-0'><input type='text' name='username' id='username' autocomplete='username' value='' placeholder='User Name' class='form-control ew-form-control'><button type='button' class='btn btn-default ew-toggle-username rounded-end' data-ew-action='username '><i class='fa-solid fa-user'></i></button></div>");
but my username text displays two inputs.
how do I insert the input element below into a new div tag with class = 'input-group px-0'
because my input tag is still outside the div tag class = 'input-group px-0'
<input type="text" name="username" id="username" autocomplete="username" value="" placeholder="User Name" class="form-control ew-form-control">
Thank You
Re: add div tag class='input-group px-0' in username
Posted: Mon Jun 17, 2024 12:59 am
by lissa
My goal is to insert the input tag into class="input-group px-0" above the button
<div class="row gx-0">
<div class="input-group px-0">
<button type="button" class="btn btn-default ew-toggle-username rounded-end" data-ew-action="username"><i class="fa-solid fa-user"></i> </button>
</div>
<input type="text" name="username" id="username" autocomplete="username" value="" placeholder="User Name" class="form-control ew-form-control">
<div class="invalid-feedback">Please enter username</div>
</div>
become :
My goal is to insert the input tag into class="input-group px-0" above the button
<div class="row gx-0">
<div class="input-group px-0">
<input type="text" name="username" id="username" autocomplete="username" value="" placeholder="User Name" class="form-control ew-form-control">
<div class="invalid-feedback">Please enter username</div>
<button type="button" class="btn btn-default ew-toggle-username rounded-end" data-ew-action="username"><i class="fa-solid fa-user"></i> </button>
</div>
</div>
Re: add div tag class='input-group px-0' in username
Posted: Tue Jun 18, 2024 9:23 am
by arbei
lissa wrote:
$("#username").before("<div class='input-group px-0'>...</div>");
Your code added additional HTML before the existing input#username. You need to use jQuery to select the existing button so that it will be moved to before the existing input#username.
See jQuery(selector), not jQuery(html)
.
Re: add div tag class='input-group px-0' in username
Posted: Tue Jun 18, 2024 10:47 am
by lissa
thank you, it's solved
$("#username").wrap("<div class='input-group px-0'></div>" );
$("#username").parent().append('<button type="button" class="btn btn-default ew-toggle-username rounded-end" data-ew-action="username"><i class="fa-solid fa-user"></i></button>');