I'm creating a form inside a foreach loop. What actually I want is that... how can I clear the value of a particular input field on click of an image. Following is the code which is inside loop. It has many more form fields. But I want to clear a particular input field, because I'm fetching the data from database, making changes and then saving it again.

<a onclick="clearField("<?php echo "field_id".$language["language_id"]; ?>")" 
  href="javascript:noAction();"><img src="view/image/delete.png">
</a>

<input type="text" 
  id="<?php echo 'field_id'.$language['language_id']; ?>" 
  name="file_name[<?php echo $language['language_id']; ?>]" 
  value="<?php echo isset($document_description[$language['language_id']]) ? $document_description[$language['language_id']]['file'] : ''; ?>" 
  readonly="readonly"/>

Following is the javascript which is used for above function--

<script>
function clearField(input,val) {
      if(input.value == val)
         input.value="";
};
</script>

EDITED :- there is one more problem with the following statement -- all quotes which are used inside this statement are not proper. i mean to say that the code do not gets parsed due to some missing or some additional quotes. So please tell me how to correct this.

<a onclick="clearField("<?php echo "field_id".$language["language_id"]; ?>")" 
  href="javascript:noAction();"><img src="view/image/delete.png">
</a>

I'm creating a form inside a foreach loop. What actually I want is that... how can I clear the value of a particular input field on click of an image. Following is the code which is inside loop. It has many more form fields. But I want to clear a particular input field, because I'm fetching the data from database, making changes and then saving it again.

<a onclick="clearField("<?php echo "field_id".$language["language_id"]; ?>")" 
  href="javascript:noAction();"><img src="view/image/delete.png">
</a>

<input type="text" 
  id="<?php echo 'field_id'.$language['language_id']; ?>" 
  name="file_name[<?php echo $language['language_id']; ?>]" 
  value="<?php echo isset($document_description[$language['language_id']]) ? $document_description[$language['language_id']]['file'] : ''; ?>" 
  readonly="readonly"/>

Following is the javascript which is used for above function--

<script>
function clearField(input,val) {
      if(input.value == val)
         input.value="";
};
</script>

EDITED :- there is one more problem with the following statement -- all quotes which are used inside this statement are not proper. i mean to say that the code do not gets parsed due to some missing or some additional quotes. So please tell me how to correct this.

<a onclick="clearField("<?php echo "field_id".$language["language_id"]; ?>")" 
  href="javascript:noAction();"><img src="view/image/delete.png">
</a>

• javascript
• php
• html

• 1 document.getElementById(input).value = '', and change your double quotes for single in the clearField(....) bit. – putvande Commented Dec 2, 2013 at 13:36
• you're not passing second parameter to clearField() – Dhaval Marthak Commented Dec 2, 2013 at 13:37
• ^^ you have to get the element, and you don't pass a value, so that will always be undefined, and the condition will always fail – adeneo Commented Dec 2, 2013 at 13:37
• Is it suppose to clear the input with any value, or just if it has the defaulf value ? – adeneo Commented Dec 2, 2013 at 13:38

4 Answers 4

You can do this very easily in javascript

HTML code

<img src="http://www.mricons./store/png/45804_11386_128_button_cancel_icon.png" height="35" width="35" onclick ="change()" />
<input type="text" name="name" value="name" id="ghd" />

JAVASCRIPT code

function change(){
    var ab = document.getElementById('ghd').value;
    document.getElementById('ghd').value = "";
    $('#ghd').val('dsds');
}

Following is the link to jsfiddle also---

http://jsfiddle/nnRV5/

Hope it helps you!!

Try Following

<img src="view/image/delete.png" onclick="clearInput();">

<script>
function clearInput(){
document.getElementById('input_id').value = '';
}
</script>

Rather than using an anchor you could just listen for the click event on the image itself, like this:

<img id="clickable_image" src="delete.png" alt="Clear input text" />

<input id="the_input_to_clear" ... other attribs here ... />

<script>

(function(){
    var image = document.getElementById('clickable_image'),
        inputField = document.getElementById('the_input_to_clear'),
        clickHandler = function() {
            inputField.value = '';
        };
    if (image.addEventListener) {
        // this attaches the event for most browsers
        image.addEventListener("click", clickHandler, false);
    } else {
        // this attaches the event for IE...
        image.attachEvent("onclick", clickHandler);
    }
})();

</script>

From an accessibility perspective a clickable image that controls a form field is not good practice, but at least you're not having to worry about having an anchor that goes nowhere. If you want to improve the accessibility you might like to use a button element, and style it with a background image something like: http://jsfiddle/3vPpt/3/

The Javascript in my example dynamically attaches the click event to the image rather than specifying the function in the element's onclick attribute. This is to separate presentation from behaviour logic and is considered best practice.

The funky (function(){})(); notation executes the script immediately, but does not leak the variables created (image, inputField, clickHandler) into the global scope. This is also a best practice thing, and will prevent your script interfering with other code on the page.

Try this:

<script>
  function clearField(input,val) {
  if(document.getElementById(input).value == val){
     document.getElementById(input).value = '';//This will clear the field
 }
</script>