javascript one function triggering is triggering another unintended function

Question

In form validation, on blur, a data validation gets triggered. IN this form, I have 3 different onblur possible triggers. But if one triggers, I get two alert boxes, which means, two funcitons were triggered.

The form (html code):

<form id="processpayment" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<table class="paypal">
<tbody>
<tr>
<td class="etiqueta" width="50%"><label>Nombre</label></td>
</tr>
<tr>
<td><input id="nombre" class="requerido" type="text" name="nombre" value="" /></td>
</tr>
<tr>
<td class="etiqueta"><label>Forma de comunicación</label></td>
</tr>
<tr>
<td><span id="medio" class="requerido">Skype</span></td>
</tr>
<tr>
<td class="etiqueta"><label id="label_medio_id">Usuario de Skype</label></td>
</tr>
<tr>
<td><input id="medio_id" class="requerido" type="text" name="medio_id" value="" /></td>
</tr>
<tr>
<td class="etiqueta"><label id="confirm:label_medio_id">Verifica usuario de Skype </label></td>
</tr>
<tr>
<td><input id="confirm:medio_id" class="requerido" onblur="confirm_data(this.id);" type="text" name="confirm:medio_id" value="" /></td>
</tr>
<tr>
<td class="checkbox" colspan="2"><input id="warningpaypalverified" class="requerido" type="checkbox" name="warningpaypalverified" value="payment constraints acknowledged" /><label class="alerta">Pagos de tarjeta de crédito son procesados inmediatamente.<br /><br /> En caso de que use su cuenta PayPal, es necesario ser verificado por PayPal con anterioridad.<br /><a id="explain" class="explain" onclick="explain('La conversación inmediata tiene como característica el comunicarse con alguien inmediatamente.\n\nCuando PayPal no ha verificado su cuenta estos pagos toman mas de 24 horas.\n\nSi desea una conversación inmediata, pague con tarjeta de crédito.')">Por que es esto necesario</a></label></td>
</tr>
<tr>
<td id="paypal" colspan="2"><input type="hidden" name="notify_url" value="http://root.com/process/listener.php" /> <input type="hidden" name="locale.x" value="es_XC" /> <input class="alldata" type="hidden" name="custom" value="" /> <input type="hidden" name="cmd" value="_s-xclick" /> <input type="hidden" name="image_url" value="http://root.com/images/root_logo.png" /> <input type="hidden" name="hosted_button_id" value="THISANDTHAT" /> <input class="paypal" type="image" name="submit" src="https://www.paymentobjects.com/es_XC/i/btn/btn_buynowCC_LG.gif" alt="PayPal, la forma más segura y rápida de pagar en línea." /> <img src="https://www.paymentobjects.com/es_XC/i/scr/pixel.gif" border="0" alt="" width="1" height="1" /></td>
</tr>
</tbody>
</table>
</form>

I have following javascript code:

function clear_fields(fieldid, confirm_fieldid){
        document.getElementById(fieldid).value = "";
        if (typeof(confirm_fieldid) !== 'undefined'){ document.getElementById(confirm_fieldid).value = ""; }
        document.getElementById(fieldid).focus();
        return false; 
    }

function validate_email(email_field_id){

        email = typeof(email_field_id) != 'undefined' ? document.getElementById(email_field_id) : function(){alert('Parameter error when calling Validate Email. Check your form'); return;}();

        var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

        if( reg.test(email.value) == false ) {

            alert('El email que ingresaste no es correcto. Por favor, intenta nuevamente siguiendo este formato [email protected]');

            return clear_fields(email_field_id);

        } else { return true; }

    }

function confirm_email( confirm_email_field_id ){

        var confirmemail = typeof(confirm_email_field_id) != 'undefined' ? document.getElementById(confirm_email_field_id) : function(){alert('Parameter error when calling javascript function confirm_email(). Check your form, and make sure input field for confirm email calls the function confirm_email("confirm:email_id");'); return;}();

        var confirmemailarray = confirmemail.id.split(':'); 

        var email = document.getElementById(confirmemailarray[1]);

        if( email.value === confirmemail.value ) {    

            return true;

        } else { 

            alert("ERROR: \"Email\" no coincide con \"Confirmar Email\". \n Agrega tu \"Email\" y CONFIRMA este Email")

            return clear_fields(email.id, confirmemail.id);

        }

    }

function confirm_data(confirm_data_field_id){

        if( typeof(confirm_data_field_id) == 'undefined'){

            alert('Parameter error when calling javascript function confirm_data. Check your form, and make sure input field to confirm data calls the function confirm_data("confirm:data_field_id");'); 

            return;

        } else {

            var confirmidarray = confirm_data_field_id.split(':'); 

            thedata = document.getElementById(confirmidarray[1]);

            confirmthedata = document.getElementById(confirm_data_field_id);

            if( thedata.value == confirmthedata.value ) return true;
            else {

                thedatalabel = document.getElementById('label_' + thedata.id);
                confirmthedatalabel = document.getElementById('confirm:label_' + thedata.id);

                alert('ERROR: Los datos que ha ingresado en los campos de informacion \n\n' + thedatalabel.innerHTML + '\n' + confirmthedatalabel.innerHTML + '\n\n NO COINCIDEN. \n\n Para proceder con su pago agregue la informacion correcta.' );

                return clear_fields( confirmidarray[1], confirmidarray[0] + ':' + confirmidarray[1] );

            }

        }

    }

Why is this happening?

What changes do I need to do?

Thank you

jfriend00 · Accepted Answer · 2011-12-04 04:21:38Z

1

In some browsers, an alert() can trigger focus events (because focus goes to the alert box and then back to the page afterwards). When debugging this kind of issue, it's better to use console.log() which doesn't mess with focus to record what's going on and you can then just look at the log to see what really happened without having changed the behavior.

answered Dec 4, 2011 at 4:21

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

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

6 Comments

IberoMedia Over a year ago

This is only happening in mobile website, windows phone, iPhone, etc... If I change onblur to onchange, I am not getting double or tripple alerts. What is the difference of onchange to onblur when focus has not changed?

jfriend00 Over a year ago

Did you understand my comment that putting up an alert() causes focus to change so it can trigger blur events in some browsers? That particular behavior varies by browser so it would not surprise me if you see it in some places, but not others. Putting up an alert on onblur is a bad design for browsers because of this issue.

IberoMedia Over a year ago

Well, I did not quite understand at first, but after your comment I've had to carefully think of what happens with onblur alerts... yes, I get it now... I assume that all fields with the onblur will be affected by the focus, and since only one will be the chosen one, the alert will be seamlessly triggered? thus the extra alert boxes? THANK YOU. By the way, I do not use the console.log()... I am a newby... is there a page or somewhere where I could get some info in how to use this utility (which is available in Chrome, Firefox and some other browsers)? Thank you again

jfriend00 Over a year ago

To use console.log, you simply put console.log("xxxx") into your code. The view the log in Chrome, you simply right click in the browser, choose Inspect Element, then pick the console icon at the top of the window that opens. You will also see all javascript errors in that same window which is an absolute necessity when troubleshooting javascript code. Other browsers have similar functionality.

IberoMedia Over a year ago

What would the xxxx stand for? THANK YOU

|

Collectives™ on Stack Overflow

javascript one function triggering is triggering another unintended function

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related