How should i make a new checkbox on button click by ajax?

Question

<div class="form-group">
  <label class="control-label col-md-3 col-sm-3 col-xs-12">Add Skill</label>
  <div class="col-md-6 col-sm-3 col-xs-12">
    <input  type='text' id='others' name='others' class="form-control col-md-7 col-xs-3"/>
    <button type='submit' onclick='btn2' value='Add' class="btn btn-success"></button>
  </div>
</div>

This is my code i want that when i click on the button it makes a new chekbox

Not clear enough. Do you want to create checkboxes depending on the response from ajax? — Sougata Bose
– Sougata Bose, Commented Jan 9, 2017 at 6:05
please paste your JS or ajax code also or better make js fiddle — Bilal Zafar
– Bilal Zafar, Commented Jan 9, 2017 at 6:06
i don't have a JS or ajax code nor btn2 function i don't know about ajax @BilalZafar John Christian — Afzal Khan
– Afzal Khan, Commented Jan 9, 2017 at 6:10

Rohan Kumar · Accepted Answer · 2017-01-09 09:22:31Z

6

You have to add checkbox at runtime on success callback of your AJAX Request

Try this:

 $.ajax({
      url : 'fila path',
      type: 'POST',
      data: data,
      success : function(response){ 
           $('#list').append("<input type='checkbox' name='checkboxname'/><br>");
      }
  });

edited Jan 9, 2017 at 9:22

Rohan Kumar

40.7k11 gold badges81 silver badges111 bronze badges

answered Jan 9, 2017 at 6:31

Sujal Patel

6342 gold badges6 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rohan Kumar · Accepted Answer · 2017-01-09 06:48:41Z

1

You need to use ajax success callback function to add the checkbox.

$(function() {
  $('#btn2').on('click', function() {
    // paste the below code in your success callback
    $('<input type="checkbox" name="chkItem" />').insertBefore(this);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label class="control-label col-md-3 col-sm-3 col-xs-12">Add Skill</label>
  <div class="col-md-6 col-sm-3 col-xs-12">
    <input type='text' id='others' name='others' class="form-control col-md-7 col-xs-3" />
    <button type='button' id='btn2' value='Add' class="btn btn-success">Add</button>
  </div>
</div>

Above snippet will help you to add checkbox. I've added the checkbox on a simple button click, you can modify it with your ajax code. Hope this will help you.

Updated with ajax code,

$(function() {
    $('#btn2').on('click', function() {
       var self=this;
       $.ajax({
           url:'your_server_url',
           type:'POST', // let it is POST method
           success:function(response){
              $('<input type="checkbox" name="chkItem" />')
                    .insertBefore(self); // insert before your clicked button
           }
       });
    });
});

edited Jan 9, 2017 at 6:48

answered Jan 9, 2017 at 6:10

Rohan Kumar

40.7k11 gold badges81 silver badges111 bronze badges

8 Comments

Sougata Bose Over a year ago

OP wants the checkboxes to be created depending on ajax response.

Afzal Khan Over a year ago

when i write php in textbox, how will it become a name of that chekbox ?

Rohan Kumar Over a year ago

@SougataBose Did you read "You need to use ajax success callback function to add the checkbox." in my answer.

Sougata Bose Over a year ago

Yes. But OP doesn't even know how to use ajax.

Rohan Kumar Over a year ago

This is SO, only for helping in your code not a Freelance site(can you write a code for me).

|

Tausif Anwar · Accepted Answer · 2017-01-09 07:30:50Z

1

$("#addCheckBox").on("click",function(){
    $.ajax({
            url : 'Url to get the ajax response',
            dataType: "json",
            method: 'post',
        data: {
           data: data,
        },
         success: function( response ) {
         $('#others').append("<input type='checkbox' name="checkboxCreated"/>");
        }
        });
});

answered Jan 9, 2017 at 7:30

Tausif Anwar

1,2471 gold badge10 silver badges22 bronze badges

Collectives™ on Stack Overflow

How should i make a new checkbox on button click by ajax?

3 Answers 3

Comments

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related