How do I know I insert the onChange correctly into my form?

问题

I inserted a onChange trigger into my selection that generated by php. But my final result is not responding on the onChange function which runs perfectly in pure html and javascript format. How can I debug it so that I know the onChange function has been inserted correctly into my select tag?

THank You

MORE INFO

This is what actually looks like

<p class="<?php if (get_option('jr_submit_cat_required')!=='yes') : echo 'optional'; endif; ?>"><label for="job_cat"><?php _e('Job Category', 'appthemes'); ?> <?php if (get_option('jr_submit_cat_required')=='yes') : ?><span title="required">*</span><?php endif; ?></label> <?php
        $sel = 0;
        if (isset($posted['job_term_cat']) && $posted['job_term_cat']>0) $sel = $posted['job_term_cat']; 
        global $featured_job_cat_id;
        $args = array(
            'orderby'            => 'name', 
            'exclude'            => $featured_job_cat_id,
            'order'              => 'ASC',
            'name'               => 'job_term_cat',
            'hierarchical'       => 1, 
            'echo'               => 0,
            'class'              => 'job_cat',
            'selected'           => $sel,
            'taxonomy'           => 'job_cat',
            'hide_empty'         => false
        );
        $dropdown = wp_dropdown_categories( $args );
       $dropdown = str_replace('class=\'job_cat\'id=\'job_term_cat\' >','class=\'job_cat\' onchange="changeValue(this)"><option value="">'.__('Select a category&hellip;', 'appthemes').'</option>',$dropdown);
    ?></p>
echo $dropdown;

and here is the tile

<p><label for="job_title"><?php _e('Job title', 'appthemes'); ?> <span title="required">*</span></label> <input type="text" class="text"  id="job_title" name="job_title" ></p>

and here is the script

function changeValue(obj){ document.getElementById('job_title').value= obj[obj.selectedIndex].innerHTML;
}

Location of the script in the footer

<p class=""><label for="cat">Category <span title="required">*</span></label> <select name="a_cat" id="a_cat" class="cat">
<option class="level-0" value="86" selected="selected">1 a</option>
<option class="level-0" value="93">2 b</option>
<option class="level-0" value="125">3 c</option>
</select>
</p>



<div id="footer">
<script type="text/javascript">
function changeValue(obj){ document.getElementById('title').value= obj[obj.selectedIndex].innerHTML;
}
</script>
</div>

Above is the things generated and the footer, do you see anything wrong?

回答1:

In firefox or chrome you can use console.log('rock on!') to see if your onChange event is called.

You'll need Firebug in firefox or the console explorer in Chrome to see the result

Alternatively, you couls only use alert('here'); to see if your code runs.

来源：https://stackoverflow.com/questions/14343852/how-do-i-know-i-insert-the-onchange-correctly-into-my-form

标签

javascript

select

onchange