CODEWITHSUNDEEP
javascriptjqueryhtml
Vivek Modi
Vivek Modi

Reputation: 39

how to remove autofocus attrib

i want to get more input field by onfoucus event

function new_option() {
  var tot_opt = parseInt($('#tot_opt').val());
  $('#otp' + tot_opt).unbind('onfocus', "new_option");
  tot_opt++;
  $('#tot_opt').val(tot_opt);
  var opt = "<br><input onfocus='new_option()' id='otp" + tot_opt + "' placeholder='Options" + tot_opt + "' type='text' name='options' class='form-control'>"
  $('#new_opt').append(opt);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered">
  <tr>
    <th colspan="2">Create Voter Pool</th>
  </tr>
  <tr>
    <th>Question</th>
    <th><textarea name="question" class="form-control">
				
			</textarea></th>
  </tr>
  <tr>
    <th>Options</th>
    <td>
      <input type="text" placeholder="Options1" id="opt1" class="form-control" name="options"><br>
      <input type="text" onfocus="new_option()" id="opt2" placeholder="Options2" class="form-control" name="options">
      <span id="new_opt"></span>
      <input type="hidden" id="tot_opt" value="2">
    </td>
  </tr>
</table>

i want onfocus attribute only on last input and want to remove onfoucs attribute from remain

Upvotes: 1

Views: 212

Answers (1)

Andrew L
Andrew L

Reputation: 5486

Before you add the new input you can remove the onfocus attribute form all the other inputs.

The below will query for inputs with the onfocus attribute and loop through each element removing the attribute. Then I append the last input with the onfocus attribute. This ensures only the last input will be able to add another input.

function new_option() {
  var tot_opt = parseInt($('#tot_opt').val());
  $('#otp' + tot_opt).unbind('onfocus', "new_option");
  tot_opt++;
  $('#tot_opt').val(tot_opt);
  var opt = "<br><input onfocus='new_option()' id='otp" + tot_opt + "' placeholder='Options" + tot_opt + "' type='text' name='options' class='form-control'>"
  // remove onfocus from all previous inputs (that have the onfocus attribute)
  document.querySelectorAll("input[onfocus]").forEach(function(element, index) {
    element.removeAttribute("onfocus");
  });

  $('#new_opt').append(opt);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered">
  <tr>
    <th colspan="2">Create Voter Pool</th>
  </tr>
  <tr>
    <th>Question</th>
    <th><textarea name="question" class="form-control"></textarea></th>
  </tr>
  <tr>
    <th>Options</th>
    <td>
      <input type="text" placeholder="Options1" id="opt1" class="form-control" name="options"> <br>
      <input type="text" onfocus="new_option()" id="opt2" placeholder="Options2" class="form-control" name="options">
      <span id="new_opt"></span>
      <input type="hidden" id="tot_opt" value="2">
    </td>
  </tr>
</table>

Upvotes: 1

Related Questions