Calling javascript functions from drop down with php variables

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".

score 0 · Accepted Answer · answered Jun 15 '13 at 13:10

0

A couple of points:

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.
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.
A minor point, but the id and name of select should be the same.
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.

answered Jun 15 '13 at 13:10

Jer

391
1
5

That does help a lot, thankyou @Jer, however the page then refreshes and the value is simply an addition to the link `?terms=3&text=6.92836551772` and the textfield is then back to "0". How can I properly pass this data through without losing it? Something to do with the `
`?
– deco20 Jun 15 '13 at 14:00
That is the point 2 that I mentioned. You may have to remove the returns from the function, but normally changing ` – Jer Jun 15 '13 at 14:13
You're welcome. And I didn't pay much attention to the button tag itself, but according to [this answer](http://stackoverflow.com/a/10836076/2470440), you may add `type="button"` to it, if it keeps submitting. – Jer Jun 15 '13 at 14:23
So far so good with the current one I have, but may chuck that bit in there just in case, I greatly appreciate your insight and help. – deco20 Jun 15 '13 at 14:30

score 0 · Answer 2 · answered Jun 15 '13 at 14:10

you can use this code to perform this task.

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"){
    document.getElementById(e1.value = shortTerm;
}
else if(term=="Medium Term"){
    document.getElementById(e1).value = mediumTerm;
}
else if(term=="Long Term"){
    document.getElementById(e1).value = longTerm;
}
else if(term=="Select an investment length:"){ 
    document.getElementById(e1).value = '0';
}
return false;

}

Calling javascript functions from drop down with php variables

2 Answers2