PHP - Onchange reload page with value of select

Question

I am working on PHP. I have three dynamic dropdown boxes. On the basis of first selected value I change the content of second select box and same case for the third. I have achieved this functionality through javascript. The problem I am having is my code works perfectly on localhost but when I upload the code on the online server the page keeps on reloading. Let me first share my code so that you can have an idea of what I am talking about

javascript

<script>
    var valnew = <?php echo $cat3; ?> ;

    function reload() {

        var val = form.cat.options[form.cat.options.selectedIndex].value;
        var text = form.cat.options[form.cat.options.selectedIndex].text;
        self.location = 'douglas-college.php?cat=' + val + '&text=' + text
    }

    function reload3(form) {
        var val = form.cat.options[form.cat.options.selectedIndex].value;
        val2 = form.subcat.options[form.subcat.options.selectedIndex].value;
        self.location = 'douglas-college.php?cat=' + val + '&cat3=' + val2;
    }

    function reload4(form) {
        var val3 = form.subcat3.options[form.subcat3.options.selectedIndex].value;
        var text = form.subcat3.options[form.subcat3.options.selectedIndex].text;
        self.location = 'course-title.php?inst_id=' + val3 + '&coursecode=' + valnew;
    }
</script>





 <?php
$query1 = mysql_query("SELECT * FROM course");
echo "<select name='cat' class='input-large form-control' onchange=\"reload(this.form)\">";
if (!isset($_GET['cat'])) {
    echo '<option>Select one</option>';
    while ($row = mysql_fetch_array($query1)) {
        echo '<option value="' . $row['courseID'] . '">' . $row['courseName'] . '</option>';
    }
} else {
    while ($row = mysql_fetch_array($query1)) {
        echo '<option value="' . $row['courseID'] . '">' . $row['courseName'] . '</option>';
    }
}
echo "</select>";
?>

I have added only one selectbox php code right now. I can share the whole code upon request. I have checked the page by using only one dropdown but still page keeps on refreshing. Means the page is keep on reloading again and again

Please, [stop using `mysql_*` functions](http://stackoverflow.com/questions/12859942/why-shouldnt-i-use-mysql-functions-in-php). They are no longer maintained and are [officially deprecated](https://wiki.php.net/rfc/mysql_deprecation). Learn about [prepared statements](http://en.wikipedia.org/wiki/Prepared_statement) instead, and use [PDO](http://jayblanchard.net/demystifying_php_pdo.html). Check your browser's console for JavaScript errors. — Jay Blanchard, Apr 21 '15 at 21:23
can you share the page that is happening or somehow do jsfiddle so we can take a look on runing code? — Kresimir Pendic, Apr 21 '15 at 21:26

Kristapsv · Accepted Answer · 2015-04-21T22:36:42.813

0

The real problem is that in : http://smithdeveloper.com/test/js/sitefunction.js

$('select').change(function() {
    $('option').css('background', 'white');
    $('option:selected').css('background', '#ff87c3');
}).change();

U trigger .change() on all select elements. So thats why onchange events are called immediately after page load. So every time page loads u call change event and listen to change event and fire reload() function

edited Apr 21 '15 at 22:36

answered Apr 21 '15 at 22:06

Kristapsv

558
5
15

cannot add comments to other posts, but here is the solution – Kristapsv Apr 21 '15 at 22:43

score 0 · Answer 2 · answered Apr 21 '15 at 22:10

first ditch the inline onchange="" events inside select tags..

Than remove your script from begining of the file and save this in file that you include in the end of the page, sitefunction.js inside document.ready hook.

Here is mine jsfiddle and I changed your functions a bit..

$('[name=cat]').on('change', function(){
    var val1 = form.cat.options[form.cat.options.selectedIndex].value;
    var txt1 = form.cat.options[form.cat.options.selectedIndex].text;
    self.location = 'http://smithdeveloper.com/test/douglas-college.php?cat=' + val1 + '&text=' + txt1
});

$('[name=subcat]').on('change', function(form) {
    var val2 = form.cat.options[form.cat.options.selectedIndex].value;
    var txt3= form.subcat.options[form.subcat.options.selectedIndex].value;
    self.location = 'http://smithdeveloper.com/test/douglas-college.php?cat=' + val2 + '&cat3=' + txt3;
});

$('[name=subcat3]').on('change', function(form) {
    var val3 = form.subcat3.options[form.subcat3.options.selectedIndex].value;
    var text = form.subcat3.options[form.subcat3.options.selectedIndex].text;
    self.location = 'course-title.php?inst_id=' + val3 + '&coursecode=' + valnew;
});

http://jsfiddle.net/mkdizajn/wLz2g3sw/

hth, cheers, k

Thank you for your time and solution. kristaps actually indefined the issue and I resolved it now — JohnDOeHappy, Apr 22 '15 at 02:06

PHP - Onchange reload page with value of select

2 Answers2