CODEWITHSUNDEEP
javascriptjqueryhtmlcss
vinay
vinay

Reputation: 25

How to toggle font awesome icon in pure javascript

Below is my html and js codes for enabling and disabling the text box on button click. It's working perfectly, but now I need to keep fontawesome icons for button on edit or save.

HTML

<form name="qtyEdit">
    <input type ="text" id ="textBox1" value="7" readonly>
    <input type="button" id="qtyBtnEdit" onClick="enableDisable()" value="Edit">
</form>

JS

function enableDisable() {
    var form = document.qtyEdit;
    if(form.qtyBtnEdit.value=="Edit"){
        form.textBox1.readOnly = false;
        form.qtyBtnEdit.value="Save"
    }
    else{
        form.textBox1.readOnly = true;
        form.qtyBtnEdit.value="Edit"
    }
}

Thanks in Advance

Upvotes: 0

Views: 3950

Answers (2)

fdomn-m
fdomn-m

Reputation: 28621

Make the input a button so that you can add content inside:

<input type="button" id="qtyBtnEdit" onClick="enableDisable()" value="Edit">

becomes

<button type="button" id="qtyBtnEdit" onClick="enableDisable()">Edit</button>

add the fa icon:

<button type="button" id="qtyBtnEdit" onClick="enableDisable()"><i class='fa fa-fw fa-pencil'></i>Edit</button>

to toggle this between edit/save (I've used jquery as the question was tagged jquery):

function enableDisable() {
    if ($("#qtyBtnEdit i").hasClass("fa-pencil")) {
        // Is edit, so change
        $("#qtyBtnEdit").text("Save");
    }
    else {
        // Back to edit
        $("#qtyBtnEdit").text("Edit");
    }
    $("#qtyBtnEdit i").toggleClass("fa-pencil fa-floppy-io")
}

If you want just an icon and no text, remove the text from the button and code:

<button type="button" id="qtyBtnEdit" onClick="enableDisable()"><i class='fa fa-fw fa-pencil'></i></button>

and

function enableDisable() {
    $("#qtyBtnEdit i").toggleClass("fa-pencil fa-floppy-io")
}

Upvotes: 0

Aaron Mahlke
Aaron Mahlke

Reputation: 337

Try the classList.toggle function:

function enableDisable() {
  var form = document.qtyEdit;
  var icon = document.getElementById("icon");
  if(form.qtyBtnEdit.value=="Edit"){
    form.textBox1.readOnly = false;
    form.qtyBtnEdit.value="Save";
    icon.classList.toggle('fa-pencil');
    icon.classList.toggle('fa-floppy-o');
  }
  else{
    form.textBox1.readOnly = true;
    form.qtyBtnEdit.value="Edit";
    icon.classList.toggle('fa-floppy-o');
    icon.classList.toggle('fa-pencil');
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" type="text/css">
<form name="qtyEdit">
  <input type ="text" id ="textBox1" value="7" readonly>
  <input type="button" id="qtyBtnEdit" onClick="enableDisable()" value="Edit">
  <i id="icon" class="fa fa-pencil"></i>
</form>

Upvotes: 2

Related Questions