JavaScript reset populated field in PHP/AJAX

Question

I have some jQuery that uses AJAX and JSON to populate a UL tag with data.

This is the jQuery code:

 $('#pSearch').on('click', function()
 {
   var partnername = $('#pNameSearch').val();
   if($.trim(partnername) != '')
   {
     $.post('api/pNameSearch.php', {partnername: partnername}, function(data)
     {
       var obj = JSON.parse(data);
       $('#pName').empty();
       var htmlToInsert = obj.map(function (item)
       {
         return '<li>' + item.datestamp + ' - ' + item.comment + ' - ' + item.username + '</li>';
       }).join('');
       $('#pNames').html(htmlToInsert);
     });
   };
 });

The code above populates a UL field called pNames. It fills LI tags with parsed JSON data retrieved from a PHP script.

What I need to do now is clear the pNames field.

In the search window that prints the data, I have an HTML RESET button.

 <input type="reset" class="btn btn-sm btn-default" id="pReset" name="pReset" value="reset" />

Please note the TYPE in the input field, which I have set to 'reset', will clear out the FORM field, but it will not clear out the UL field that populated the data.

Here is the JavaScript I attempted to use to clear out the field:

 $('#pReset').on('click', function () 
 {
   document.getElementById('#pName').val("");
 });

What can I try next?

halfer · Accepted Answer · 2022-10-31 13:38:03Z

1

Update

Since you didn't post your code, let's go with this simplified example:

HTML:

<h3><code>pNames</code></h3>
<ul id="pNames">
</ul>
<div>
    <button id="get-pnames">Get pNames</button>
    <input type="reset" id="pReset" value="Reset pNames" />
    <input type="reset" id="pClear" value="Clear pNames" />
</div>

JS

var yourOriginalAjaxCallbackLogic = function (obj) {
    var htmlToInsert = obj.map(function (item) {
        //console.log(
         return '<li>' + item.datestamp + ' - ' + item.comment + ' - ' + item.username + '</li>';
       }).join('');
       $('#pNames').html(htmlToInsert);
};

$('#get-pnames').on('click', function (e) {
    e.preventDefault();
    // your additional logic for grabbing 
    // the pName and what not would go here

    // note the last argument to $.post - this allows us to let jQuery
    // take care of converting the json response
    $.post('api/pNameSearch.php', {partnername: partnername}, function (data) {
        yourOriginalAjaxCallbackLogic(data);
    }, 'json');
});

// This version just removes the content of the LI items.
$('#pReset').on('click', function (e) {
    e.preventDefault();
    $('#pNames li').html('');
});

// This version removes all the LI items
$('#pClear').on('click', function (e) {
    e.preventDefault();
    $('#pNames').empty();
});

You can see a working fiddle here: http://jsfiddle.net/qhrmh3o1/1/

.val is only for form inputs. These are li elements so you would use $('li').html('');

$('#pReset').on('click', function () {
   $('#pName li').html('');
});

You may need to modify that selector because I'm not 100% positive what the selector should be for the li items you want to clear (or if you really want to remove them or their ul from the DOM).

edited Oct 31, 2022 at 13:38

halfer

20.2k20 gold badges110 silver badges207 bronze badges

answered Jan 16, 2015 at 14:43

prodigitalson

60.6k10 gold badges106 silver badges118 bronze badges

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

3 Comments

John Beasley Over a year ago

No luck. I get the same results: the INPUT field is cleared, but the UL pNames still retained the data. Any thoughts?

prodigitalson Over a year ago

Im confused about your structure and what you want to do exactly. Do you want to 1.) remove ul#pNames from the DOM, 2.) only remove the ul#pNames li from the DOM or 3.) Just clear the contents of the ul#pNames li? Cna you tell me which of those 3 is the desired behavior and post the relevant portion of your html (the ul#pNames and its content after the ajax call)?

John Beasley Over a year ago

Please forgive me. I'm am trying to get better with jquery, ajax, and javascript as a whole. To answer your question, number 3: just clear the contents of the ul#pNames li . When the user clicks the RESET button, it needs to clear the field where the JSON data was populated, which is pNames.

John Beasley · Accepted Answer · 2015-01-16 15:34:55Z

0

So, I placed the UL tag inside of a DIV, called masterdiv.

I updated my javascript as follows:

$('#pReset').on('click', function () 
{
  $('#masterdiv ul').text("");
});

This worked on clearing out the UL field called pNames.

answered Jan 16, 2015 at 15:34

John Beasley

3,09911 gold badges55 silver badges104 bronze badges

Collectives™ on Stack Overflow

JavaScript reset populated field in PHP/AJAX

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related