从php变量下拉调用javascript函数

Question

Problem Outline: I have a couple php pages scraping data from a web page and they perform calculations with this data and assign it to a variable. I am then assigning those php variables to javascript variables. I then have a drop down list. The variable produced from each page is then to be linked to each value on the drop down list. After selecting a value on the list and clicking the "Calculate" button, the value will then be outputted to the textfield. What is happening is that there is no output. The scraper pages are included within the page.

My HTML code:

<form>
  <select id="term" name="terms">
    <option value="">Select an Investment length:</option>
    <option value="1">Short Term</option>
    <option value="2">Medium Term</option>
    <option value="3">Long Term</option>
  </select>
<input type="text" id="text" name="text" size="18" value = "0">
<button onclick="sOutput(text)">Calculate</button>
</form>

My Javascript contained within an external document:

function sOutput(e1){

    var shortTerm = <?php echo json_encode($term1); ?>;
    var mediumTerm = <?php echo json_encode($term2); ?>;
    var longTerm = <?php echo json_encode($term3); ?>;

    var term=document.getElementById("term").value;

    if(term=="Short Term"){
        return e1.value = shortTerm;
    }
    else if(term=="Medium Term"){
        return e1.value = mediumTerm;
    }
    else if(term=="Long Term"){
        return e1.value = longTerm;
    }
    else if(term=="Select an investment length:"){ 
        return e1.value = '0';
    }
    else return false;

}

It was working when I simply replaced the == with an = for some reason only to the extent that it would only output one of the $term variables. Though with this current code it will not output anything and the text text field remains with "0".

Answer 1

A couple of points:

1. The value of term is "1", "2", "3" or "" respectively, not the text between the option begin and end tags. That is why changing it to = worked, as then the condition evaluates to true.

2. Your function doesn't need to return anything. However, you might want to replace its call with sOutput(text); return false or some equivalent to prevent the form from submitting.

3. A minor point, but the id and name of select should be the same.

4. You pass text as an object to the function, but a neater way would be to pass the id "text", and retrieve e1 the same way as term, by using document.getElementById.

The first two points should be enough to make it all work though, depending on how finicky your browser is.