Question

I have a problem when I use select on change – my variables are lost… In header is:

function reassignPrescreen(prescreen, closer) {
var prescreen = $('input[name=prescreen]');
var closer = $('input[name=closer]');
var data = 'prescreenid=' + prescreen.val() + '&closer=' + closer.val();
alert(data);
$.ajax({
    type: "GET",
    url: "reassign-prescreen.php",
    data: data,
    success: function (html) {
        alert(html);
    }
});
}

And I have multiple forms in body:

<form action="reassign-prescreen.php" class="psreassign">
<input type="hidden" name="prescreen" value="1">
<SELECT class="chzn-select medium-select select" name="closer" onchange='reassignPrescreen()' data-placeholder="Choose a Closer">
    <OPTION VALUE=""></OPTION>
    <OPTION VALUE="59785">Ron </OPTION>
    <OPTION VALUE="59786">Paul </OPTION>
    <OPTION VALUE="74236">Jack </OPTION>
</SELECT>
</form>
<form action="reassign-prescreen.php" class="psreassign">
<input type="hidden" name="prescreen" value="2">
<SELECT class="chzn-select medium-select select" name="closer" onchange='reassignPrescreen()' data-placeholder="Choose a Closer">
    <OPTION VALUE=""></OPTION>
    <OPTION VALUE="59785">Ron </OPTION>
    <OPTION VALUE="59786">Paul </OPTION>
    <OPTION VALUE="74236">Jack </OPTION>
</SELECT>
</form>

....ETC...

Now I always get prescreen as 1 and closer as UNDEFINED value ??

Answer 1

Modified code. closer is a select box not input. jsfiddle

function reassignPrescreen(self){

    var form = $(self).parents("form:first");
    var prescreen = $('input[name=prescreen]', form );
    var closer = $('select[name=closer]', form);
    var data = 'prescreenid=' + prescreen.val() + '&closer=' + closer.val();
    alert(data);
    $.ajax({
        type: "GET",
        url: "reassign-prescreen.php",
        data: data,
        success: function (html) {
            alert(html);
        }
    });
}