Replace a select input with javascript/jquery

Question

I have a page with a form where I have 2 selections, and when you select value X on the first selection, it will change the second selection.
I tried doing this with:

<script language="JavaScript" type="text/JavaScript">
function makeRequestObject() {
    var xmlhttp = false;
    try {
        xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
    } catch (e) {
        try {
            xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
        } catch (E) {
            xmlhttp = false;
        }
    }
    if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
        xmlhttp = new XMLHttpRequest();
    }
    return xmlhttp;
}

function replace2(id) {
    var xmlhttp = makeRequestObject();
    var file = 'http://example.com/index.php/result/new_select/'
    xmlhttp.open('GET', file + id, true);
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            var content = xmlhttp.responseText;
            if (content) {
                document.getElementById('replace').innerHTML = content;
                //$( "div.test" ).replaceWith(content);
            }
        }
    }
    xmlhttp.send(null)
}
</script>

And in the form I have this:

<th id="replace">
    <?php
    $fruit_options = array();
    $fruit_options[-1] = 'Select ALL';
    foreach ($tests as $fruit) {
        $fruit_options[$fruit->ID] = $fruit->Nume;
    }
    echo form_dropdown('test', $fruit_options, $fruit->ID, $fruit->Nume);
    ?>
</th>

Everything works, when I select the first dropdown, the second selection will be modified (I call it with: echo form_dropdown('test1', $fruit_options, -1, 'onchange="replace2(this.value)"');)

But when I press "Submit", the controller will not see the value of post test.

In result/new_select/id I have something like this:

<?php
$fruit_options = array();
$fruit_options[-1] = 'Select ALL';
foreach ($tests as $fruit) {
    $fruit_options[$fruit->ID] = $fruit->Nume;
}
echo form_dropdown('test', $fruit_options, $fruit->ID, $fruit->Nume);
?>

Does anybody know why my code doesn't work, or what a better way to do this would be?

LE

        <form action="http://example.com/index.php/test/query" method="post" accept-charset="utf-8">    
<table>                    
        <th>
            <select name="test1" onchange="replace2(this.value)">
                <option value="-1" selected="selected">Select ALL</option>
                <option value="515">515</option>
                <option value="252">252</option>
                <option value="327">327</option>
                <option value="409">409</option>
            </select>                        
        </th>
        <th id="replace">
            <select name="test" 315>
                <option value="-1">Select ALL</option>
                <option value="1">1</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="315" selected="selected">315</option>
            </select>                        
        </th>
        <th>
            <input type="submit" name="mysubmit" value="Search!"  />                            
        </th>
</table>
    </form>

In controller i see value for test1 but i can't see value of test.

Given that the vast majority of browsers in use support XMLHttpRequest, it would be much better to try that first, then do the MS try..catch thing. Please post sample HTML received by the browser, not the server code that generates it. — RobG
– RobG, Commented Oct 1, 2015 at 13:14
you need to provide all your HTML so that we can see where you are placing these select , the reason may be because they are not inside the form tags. — CodeGodie
– CodeGodie, Commented Oct 1, 2015 at 13:21
why are you placing this inside <th> tags? I think you want to do <tr> and wheres your closing </form> tag? — CodeGodie
– CodeGodie, Commented Oct 1, 2015 at 13:29
Also why is there a 315 as an attribute of your select : <select name="test" 315> ? this might break your code. — CodeGodie
– CodeGodie, Commented Oct 1, 2015 at 13:30

CodeGodie · Accepted Answer · 2015-10-01 14:08:40Z

1

The problem here seems to be your table structure. You are forgetting that tables need rows <tr> and columns <td>, therefore when JS appends any HTML, it places them outside the form thus your form request not sending the right POST info.

Restructure your table like this:

<form method="post">
    <table>
        <tr>
            <td>
                <?php
                $fruit_options = array();
                $fruit_options[-1] = 'Select ALL';
                foreach ($tests as $fruit) {
                    $fruit_options[$fruit->ID] = $fruit->Nume;
                }
                echo form_dropdown('test1', $fruit_options, -1, 'onchange="replace2(this.value)"');
                ?>
            </td>
        </tr>
        <tr>
            <td id="replace">
            </td>
        </tr>
        <tr>
            <td>
                <input type="submit"/>
            </td>
        </tr>
    </table>
</form>

edited Oct 1, 2015 at 14:08

answered Oct 1, 2015 at 14:03

CodeGodie

12.2k6 gold badges40 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Replace a select input with javascript/jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related