JavaScript Function Call With OnClick

Question

I have a simple function that works when it is hard coded, but when I try to pass a second parameter into it, it doesn't work. I am calling the function with the onclick and using the id => thumbnail to get the value. Any suggestions?

Hard Coded Example (Works)

<script>
  function clearFileInputField(tagId) {
     document.getElementById(tagId).innerHTML = document.getElementById(tagId).innerHTML;
     $('.thumbnail').val("");
  }
</script>

<div id="thumbnail_div" class="row">
    <?php echo $form->labelex($model,'thumbnail'); ?>
    <?php echo $form->textfield($model,'thumbnail', array(placeholder => "No file chosen", readonly => true, 'class' => 'thumbnail')); ?><br>
    <?php echo $form->filefield($model,'thumbnail'); ?>
    <?php echo $form->error($model,'thumbnail'); ?>

    <input type="checkbox" onclick = "clearFileInputField('thumbnail_div')" href="javascript:noAction();"> Remove Thumbnail
</div>

Parameters Passed (Not Working)

 <script>
   function clearFileInputField(tagId, div) {
      document.getElementById(tagId).innerHTML = document.getElementById(tagId).innerHTML;
      $('.div').val("");
    }
    </script>

    <div id="thumbnail_div" class="row">
        <?php echo $form->labelex($model,'thumbnail'); ?>
        <?php echo $form->textfield($model,'thumbnail', array(placeholder => "No file chosen", readonly => true, 'id' => 'thumbnail')); ?><br>
        <?php echo $form->filefield($model,'thumbnail'); ?>
        <?php echo $form->error($model,'thumbnail'); ?>

        <input type="checkbox" onclick = "clearFileInputField('thumbnail_div', 'thumbnail')" href="javascript:noAction();"> Remove Thumbnail
    </div>

Answer 1

You are almost there. In your code, the paramenter div is converted to string. Instead of that, try the code given below,

<script>
       function clearFileInputField(tagId, div) {
                document.getElementById(tagId).innerHTML = 
                              document.getElementById(tagId).innerHTML;
                    $('.'+div).val("");        
                }
        </script>

Answer 2

$('.div').val("");
  ^^^^^^

That's a string, not a variable. You're trying to find elements that have class="div" .

You need to concatenate the variable with a string containing the dot.:

$('.' + div).val("");

Answer 3

$('.div').val(""); 

That part is close but not going to work as you might have intended. You instead should have it one of two ways,

$('.'+div).val("");

or,

$(div).val("");

With option 1, you are using a string for the period and concatenating it with the value of the variable div

With option 2, you will need to change the passed parameter to include a period before it.

Answer 4

You could easily get rid of your inline handler and just create a simple event handler.

 jQuery(function(){ // Bind a handler to any button with the class remove_thumbnail $('.remove_thumbnail').change(function(){ if (this.checked) { $(this) // go up to parent row .parents('.row') // find the thumbnail .find('.thumbnail') .val(""); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="thumbnail_div" class="row"> <input type="text" class="thumbnail" value="foo"> <input type="checkbox" class="remove_thumbnail"> Remove Thumbnail </div> 

The advantages here are that you separate content and behavior and do not introduce functions into the global scope.

Answer 5

try this (with script placed underneath the markup):

<div id="thumbnail_div" class="row">
    <?php echo $form->labelex($model,'thumbnail'); ?>
    <?php echo $form->textfield($model,'thumbnail', array(placeholder => "No file chosen", readonly => true, 'id' => 'thumbnail')); ?><br>
    <?php echo $form->filefield($model,'thumbnail'); ?>
    <?php echo $form->error($model,'thumbnail'); ?>

    <input type="checkbox" onclick = "clearFileInputField('thumbnail_div', 'thumbnail')" href="javascript:noAction();"> Remove Thumbnail
</div>

 <script>
        function clearFileInputField(tagId, div) {
            document.getElementById(tagId).innerHTML = document.getElementById(tagId).innerHTML;
            $('.'+div).val("");

        }
</script>