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>

The hard coded example will clear the correct data. Whereas, the code that passes Parameters doesn't not clear the data. — ChaseHardin
– ChaseHardin, Commented May 7, 2015 at 13:41
Can you check the console logs for errors?....Works for me..Check this jsfiddle.net/ucj3mpdv — Rakesh_Kumar
– Rakesh_Kumar, Commented May 7, 2015 at 13:45

JGV · Accepted Answer · 2015-05-07 13:41:51Z

4

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>

answered May 7, 2015 at 13:41

JGV

5,2079 gold badges57 silver badges101 bronze badges

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

Comments

Quentin · Accepted Answer · 2015-05-07 13:43:58Z

3

$('.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("");

answered May 7, 2015 at 13:43

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Comments

Kenneth Salomon · Accepted Answer · 2016-01-05 20:31:24Z

2

$('.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.

edited Jan 5, 2016 at 20:31

answered May 7, 2015 at 13:43

Kenneth Salomon

1,39811 silver badges18 bronze badges

Comments

max · Accepted Answer · 2015-05-07 14:08:45Z

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.

maioman · Accepted Answer · 2015-05-07 13:41:59Z

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>

Collectives™ on Stack Overflow

JavaScript Function Call With OnClick

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related