输入字段值在点击功能中不会改变

In my previous code I have used two separate input fields % and $ value. % value code:

<td>
    <input name="propertytaxpc" type="text" size="8" maxlength="8" value="<?php echo $dproperty_tax; ?>" onChange="javascript:propertyTaxPcChanged(true)" />
    %
</td>

$ value code:

<td> 
    $ 
    <input name="propertytaxamt" type="text" size="8" maxlength="8" onChange="javascript:propertyTaxAmountChanged(true)"  />
</td>

In my new code I have input fields changed the two fields to one field. % and $ values both load single input fields loan. I have set % and $ icon on click. Now input fields default % icon also %. When the user changes icon % to $ the value also needs to change.

<div class="col-md-3 padding-rht">
    <input name="propertytaxpc" class="txt" type="text" size="8" maxlength="8" value="<?php echo $dproperty_tax;?>" onChange="javascript:propertyTaxPcChanged(true)" />


</div>

<div class="col-md-1 padding-lft">
    <img src="Content/Images/percent.png" onclick="changeColor(event,this.src)" style="cursor:pointer"/>
</div>

function changeColor(event, _src) {
    var fname = _src;
    var ImageName = fname.substring(fname.lastIndexOf('/') + 1);
    //alert(ImageName);
    if (ImageName == "percent.png") {
        $(event.target).attr("src", "Content/Images/RedDoller.png");
    }
    else {
        $(event.target).attr("src", "Content/Images/percent.png");
   }
}

Can any one take look? I have tried many methods, but they're not working? Thanks in advance.

Your question is not very clear, but if I understand correctly I think what you're trying to achieve is for the percent and amount fields to switch visibility according to the $/% image, right?

If so, what you need to do is toggle the two input fields' visibilty, along with changing the image source. Try the code below:

HTML/PHP:

<div class="col-md-3 padding-rht">
    <input id="pct" name="propertytaxpc" class="txt" type="text" size="8" maxlength="8" value="<?php echo $dproperty_tax;?>" onChange="javascript:propertyTaxPcChanged(true)" />

    <input id="amt" name="propertytaxamt" class="txt" type="text" size="8" maxlength="8" onChange="javascript:propertyTaxAmountChanged(true)"  />
</div>

<div class="col-md-1 padding-lft">
    <img id="change" src="Content/Images/percent.png" onclick="changeColor(event,this.src)" style="cursor:pointer"/>
</div>

Javascript:

$(document).ready(function() {
    $("#amt").hide();

    $("#change").click(function() {
        changeColor(this);
    });
});

function changeColor(elem) {
    var $elem = $(elem);
    var ImageName = $elem.attr("src");
    ImageName = ImageName.substring(ImageName.lastIndexOf('/') + 1);
    if (ImageName == "percent.png") {
        $elem.attr("src", "Content/Images/RedDoller.png");
    } else {
        $elem.attr("src", "Content/Images/percent.png");
    }
    $("#pct, #amt").toggle();
}

An example JS fiddle demonstrating the technique is here: https://jsfiddle.net/ds8txa1j/

This way it works to me. No jquery or extra lib used. There some alert just to check it works...

  <div class="col-md-3 padding-rht">
    <input name="propertytaxpc" class="txt" type="text" size="8" maxlength="8" value="aaa" onChange="javascript:propertyTaxPcChanged(true)" />

    <input name="propertytaxamt" class="txt" type="hidden" size="8" maxlength="8" onChange="javascript:propertyTaxAmountChanged(true)"  />
</div>

<div class="col-md-1 padding-lft">
    <img src="Content/Images/percent.png" onclick="javascript:changeColor1(this);" style="cursor:pointer"/>
</div>


    <script type="text/javascript">

function changeColor1(elem) {
    var fname = elem.src;
    var ImageName = fname.substring(fname.lastIndexOf('/') + 1);
    alert(ImageName);
    if (ImageName == "percent.png") {
        elem.src = "Content/Images/RedDoller.png";
    }
    else {
        elem.src = "Content/Images/percent.png";
   }
   alert(elem.src);
}
</script>