CODEWITHSUNDEEP
javascriptjqueryhtml
Ramzan Mahmood
Ramzan Mahmood

Reputation: 1901

Clear text area on radio button click and get text instead of value jquery

Here i am able to clear data but when i push value from other radio button its load again previous data which i don't want.

I want textarea data should be clear permanently on radio button click and should not load with any other.

Here is my code

    <div class="portlet-body">
@foreach($students as $student)
    <div>
        <input type="radio" value="{{$student->id}}" name="student_lists[]" onclick="getdata( {{ $student->id }} )"/>
        {{$lists->name}}
        <span></span>
    </div>
    <div id="students-data"></div>
@endforeach
</div>

script

    <script>
function getdata(id)
{
    $('#textbx').val(null);
    $.ajax({
        url: '/students/'+id,
        type: "POST",
        success: function (data) {
        $('#students-data').html(data);
        }
    });
}

Controller method to get HTML

public function loadData($id)
{
  $students = DB::table('students')->select('name' , 'id')->where('user_id' , $id)->get();
  $data = '';
    $data .= '<div class="form-group">
                      <label class="control-label col-md-1">
                      </label>
                      <div class="col-md-8">
                          <label class="">';
                          foreach ($students as $student) {
                              $data .= "<input type='checkbox' class='chkbx' name='custom' onclick='push()' value='{$student->name}'/> {$student->name}
                                <span></span>";
                              }
                 $data .='</label>
                      </div>
                  </div>';
              return $data;
  }

Script to push data in text area

<script>
    function push()
    {
    $checks = $(".chkbx:checkbox");
    $checks.on('change', function() {
        var data = $checks.filter(":checked").map(function(i,v){
            return this.value;
        }).get().join("\n");

        $('#textbx').val(data);
    });
    }
</script>

Textarea where i push values

<textarea name="fields" id="textbx" class="form-control" rows="8" ></textarea>

Please help how can i hard reset textarea value.

Upvotes: 0

Views: 428

Answers (2)

madalinivascu
madalinivascu

Reputation: 32354

Remove the push function, keep the change event and delegate it so you can trigger the code on the dynamically added elements, select the checkboxes relative to your clicked checkobx

   $(function(){
        $('body').on('change',".chkbx:checkbox", function() {
            var data = $(this).parent().find(':checkbox:checked').map(function(i,v){
                return $(v).val();
            }).get().join("\n");

            $('#textbx').val(data);
        });
   });

if you have student->id as a value and want student->name to be apppended to the textarea then you need to alter your html as follows

add a custom attribute called data-name with the student name

 $data .= "<input type='checkbox' class='chkbx' name='custom' data-name=' {$student->name}' value='{$student->name}'/> {$student->name}
                                <span></span>";

and the js map to return:

return $(v).attr('data-id');

Upvotes: 1

Samrat Munde
Samrat Munde

Reputation: 36

At beginning before looping statement initialize your student-data variables to 0 or null. All the variables you want to display should be initialized to 0 or NULL, so that every time function is called first the values will be set to null then for loop stores its values.

Upvotes: 0

Related Questions