How to use javascript to activate the button when checkbox is checked?

Question

I need for this php file a modification but I don't know javascript. This makes it really hard for me how to do it.

I want to do this: If checkbox is checked than activate my submit button else don't activate them (default).

I already did some modifications: I added the checkbox with id= checkbox and I added the parameter disabled="disabled" to my button.

This is working. Now I need only to activate the button when checkbox is checked.

But I have now 2 problems:

I don't know where to put the javascript code to my file
I don't know to I can call or activate javascript in my code

Would be really nice if someone could help me.

<?php
if(isset($_POST['photo-name'])){
    $photo_name = $_POST['photo-name'];
}
if(isset($_POST['photo-title'])){
    $photo_title = $_POST['photo-title'];
}
if(isset($_POST['photo-description'])){
    $photo_description = $_POST['photo-description'];
}

if(empty($photo_name)){
    $photo_name = '';
}
if(empty($photo_description)){
    $photo_description = '';
}
$sql= $wpdb->get_results("SELECT name,id FROM ".$wpdb->prefix."u_gallery_cat ORDER BY name ASC");

$html .= '<div><label for="photo-name"><strong>'.__('Caption:','user-gallery').'</strong></label></div>';
$html .= '<div class="contest-input"><input type="text" name="photo-name" id="photo-name" value="'.$photo_name.'" /></div>';
$html .= '<div><label for="photo-content"><strong>'.__('Description:','user-gallery').'</strong> <span class="contest-small-font-2">'.__('(Optional)','user-gallery').'</span></label></div>';
$html .= '<div class="contest-input"><textarea class="photo-description-textarea" name="photo-description" id="photo-description">'.$photo_description.'</textarea></div>';
if(!empty($sql)){
    $html .= '<div><label for="photo-category"><strong>'.__('Category:','user-gallery').'</strong></label></div>';

    $html .= '<select name="photo-category" id="photo-category">';
    foreach($sql as $item){   
        $html .= '<option value="'.$item->id.'">'.$item->name.'</option>';
    }
    $html .= '</select>';
}
if ($photo_limit == 100000000){
    $html .= '<div><label for="user-photo"><strong>'.__('Select image:','user-gallery').'</strong></label></div>';
}else{
    $html .= '<div><label for="user-photo"><strong>'.__('Select image: (max.','user-gallery').' '.$p_limit.')</strong></label></div>';
}
$html .= '<div class="contest-input"><input type="file" name="user-photo" id="user-photo" size="50"  accept="image/*" onchange="loadFileU(event)" class="selimg"></div>';
$html .= '<img id="coutput"/>';
$html .= '<div class="ug-clear"></div>';
$html .= '<input type="hidden" name="user_id" />';
$html .= '<input type="hidden" name="action" value="new_post" />';
$html .= '<div class="contest-button-div">';
$html .= '<div class="contest-button"><input type="checkbox" name="chk" id="chk" value="yourvalue" class="checkbox"></div>';
$html .= '<div class="contest-button"><input type="submit" value="'.__('Add Photo','user-gallery').'" id="submit" disabled="disabled" name="submit" class="ug-styled-button tooglebutton" /></div>';
$html .= '<div class="ug-clear"></div>';
$html .= '</div>';
$html .= '<div class="ug-clear"></div>';
$html .= '</form>';
$html .= '<div class="ug-clear"></div>';
$html .= '</div>';
}

?>

jQuery is good for this: http://stackoverflow.com/questions/901712/how-to-check-if-a-checkbox-is-checked-in-jquery — Patrick Mlr, Sep 02 '16 at 12:00

Nirnae · Answer 1 · 2016-09-02T12:17:25.360

Without using Jquery :

On your checkbox add a onchange() event to trigger Javascript:

<div class="contest-button"><input type="checkbox" name="chk" id="chk" value="yourvalue" class="checkbox" onchange="openSubmit()"></div>

Then for your script :

<script type="text/javascript">

function openSubmit(){  // This function is called by the checkbox click
  if(document.getElementById('chk').checked == true){ // If it is checked
    document.getElementById('submit').disabled = false; // Then we remove the disable attribute
}
</script>

Using Jquery :

$('#chk').change(function(){ // You put an event on your checkbox here
  if($(this).is(':checked')){ // If statut of checkbox is checked
    document.getElementById('submit').disabled = false; // Then we remove the disable attribute
  }
});

You can put this script at the bottom of your file after your PHP.

You didn't mention that this code needs `jQuery`. Please elaborate your answer. — Rohit416, Sep 02 '16 at 12:04

How to use javascript to activate the button when checkbox is checked?

1 Answers1