Question

I have a javascript related question. I have a form with multiple comboboxes being generated while loading:

<select id="email_adrs" class="input-medium">
<option>-Ontvanger-</option>
<?php while ($veri = mysql_fetch_array($verwijzer)) { ?>
   <option value="<?php echo $veri['email'];?>"><?php echo $veri['aanvrager']; ?></option>
<?php 
   }
?>
</select>

When the submit button is clicked, the following code is executed:

<input onclick="sendmail('<?php echo $plist['patient_id']; ?>');" class="submit-green" type="submit" value="Versturen"   name="form_submit" />

The sendmail function is defined as:

function sendmail(pid)
{
    var email = document.getElementById('email_adrs').value;
    var xmlhttp1=new XMLHttpRequest();
    xmlhttp1.onreadystatechange=function()
    {
        if(xmlhttp1.readyState==4 && xmlhttp1.status==200)
        {
            MailNotification();
        }
    }
    xmlhttp1.open('GET','html2pdf/examples/email.php?id='+pid+'&email='+email,true);
    xmlhttp1.send();
}

The problem I am facing is that if I restrict myself to the first record generated, the email is sent. If I select any other record and its corresponding combobox, I get the notification that the mail is sent, however while troubleshooting I found out that there is no value being passed for the email address. It appears to me that the code is not able to detect which combobox was selected.

Please help!

Regards,

Babu

Answer 1

You should change your input to

<input onclick="sendmail(this, '<?php echo $plist['patient_id']; ?>');" class="submit-green" type="submit" value="Versturen"   name="form_submit" />

And your function to

function sendmail(clickedElement, pid)
{
    var formElem = clickedElement.parentElement; // (1)
    var selectElem = formElem.getElementsByTagName("select")[0]; // (2)
    var email = selectElem.value;

    /*
      [Ajax call here]
    */
}

(1): You have to apply as many .parentElement as neded to reach the form, depending on your layout.
(2): If you have more than 1 select element, use the appropiate index of the array.

If you are using JQuery, then you can do the same with

var email = $(clickedElement).closest("form").find("#email_adrs").val();