jquery onchange form submit lost variables

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 ??

score 1 · Answer 1 · answered Oct 11 '12 at 13:52

1

  var closer = $('input[name=closer]');

should be

  var closer = $('select[name=closer]');

answered Oct 11 '12 at 13:52

user1695032

1,112
6
10

Anoop · Accepted Answer · 2012-10-11T14:32:24.310

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);
        }
    });
}

edited Oct 11 '12 at 14:32

answered Oct 11 '12 at 13:52

Anoop

23,044
10
62
76

This does return closer value - thanks, but in all cases (I have multiple forms) my prescreen value is 1 ... ? – Peter Oct 11 '12 at 14:03
@Peter if you have multiple form in same document then you should use one more level of selector. eg $('form[name='formname'] .input[name='inputname']'). – Anoop Oct 11 '12 at 14:06
Since this is generated with php - I don't know how many forms I will have and I can't name them upfront, so is there a way to do it regardless of the form selector (or use class "psreassign")? – Peter Oct 11 '12 at 14:24
@Peter I modified my code. now it will take values from same form. – Anoop Oct 11 '12 at 14:33
@Peter I modified my code but you have to pass this inside reassignPrescreen function. so that function can recognize form associated with select box. if not possible let me know we can use jQuery change method. – Anoop Oct 11 '12 at 14:38

score 0 · Answer 3 · answered Oct 11 '12 at 13:50

0

search element by name using form id and put the name in ""

so

$('#id-of-form input[name="closer"]')

answered Oct 11 '12 at 13:50

Senad Meškin

13,597
4
37
55

Nelson · Answer 4 · 2012-10-11T14:08:19.197

Add the this parameter to your onchange calls, like this:

onchange='reassignPrescreen(this)'

and then replace your following code:

function reassignPrescreen() {
   var prescreen = $('input[name=prescreen]');
   var closer = $('input[name=closer]');

for this one:

function reassignPrescreen(elem) {
   var prescreen = $(elem).siblings('input[name=prescreen]');
   var closer = $(elem).val();

that will do the right thing in the context of the concrete 'select' where the onchange event fired.

score 0 · Answer 5 · answered Oct 11 '12 at 13:55

Firstly... the method declaration comes with 2 variables...

function reassignPrescreen(**prescreen, closer**) {

You are immediately overriding the variable "prescreen" when you define that variable again, the next line down, meaning that what you passed, is gone...

var prescreen = $('input[name=prescreen]');

Your function should be -

function reassignPrescreen(prescreen, closer) {
var _prescreen = $(prescreen);
var _closer = $(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);
    }
});
}

If that isn't the behaviour that you want, and you don't need to pass variables, then you should use this.

function reassignPrescreen() {
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);
    }
});
}

EDIT: Yes, based on what you have in the "onchange" event in your html, you should use the second method mentioned above. reassignPrescreen()

jquery onchange form submit lost variables

5 Answers5