enviar variable a bd usando ajax (funciona cuando quiere)

[tuvieja]

hola solucionadores masivos! soy un malo con javascript y necesito enviar 2 variables a una base de datos siempre y cuando se cumpla una condición, a la vez quiero que se vea bien y no se recargue asi que me decidí liarme un poco más y usar ajax...

bajé y modifiqué un script que hace el envio a el archivo php, donde yo le doy las instrucciones sobre los datos que tiene que actualizar y WHERE sea necesario...

el tema está en que el script solo funciona si clickeo repetidas veces (4 o 5 veces) en el botón que hace el envío, y obviamente me gustaría que lo haga a la primera...

las variables que necesito enviar son $cuenta y $cajero; al archivo process.php


formulario html

Código HTML:

 <form name="contact" method="post" action="">
      <input type="hidden" name="cajero" id="cajero" value='<?php echo "$cajero";?>'/>      
      <input type="hidden" name="cuenta" id="cuenta" value='Pagado'/>
	  <input type="submit" name="submit" class="button" id="submit_btn" value="COBRAR" />
  </form> 

este formulario en el head carga 2 archivos js que son los siguientes:

runonload.js

Código:

function runOnLoad(f) {
    if (runOnLoad.loaded) f();
    else runOnLoad.funcs.push(f);
}

runOnLoad.funcs = [];
runOnLoad.loaded = false;

runOnLoad.run = function() {
    if (runOnLoad.loaded) return;

    for(var i = 0; i < runOnLoad.funcs.length; i++) {
        try { runOnLoad.funcs[i](); }
        catch(e) {
    }
    
    runOnLoad.loaded = true;
    delete runOnLoad.funcs;
    delete runOnLoad.run;
};

if (window.addEventListener)
    window.addEventListener("load", runOnLoad.run, false);
else if (window.attachEvent) window.attachEvent("onload", runOnLoad.run);
else window.onload = runOnLoad.run;

y tutorial.js

Código:

$(function() {
  $('.error').hide();
  $('input.text-input').css({backgroundColor:"#FFFFFF"});
  $('input.text-input').focus(function(){
    $(this).css({backgroundColor:"#FFDDAA"});
  });
  $('input.text-input').blur(function(){
    $(this).css({backgroundColor:"#FFFFFF"});
  });

  $(".button").click(function() {
  $('.error').hide();
		
	  var cajero = $("input#cajero").val();

		var cuenta = $("input#cuenta").val();
		
		
		
		var dataString = 'cajero='+ cajero + '&cuenta=' + cuenta;
		
		$.ajax({
      type: "POST",
      url: "bin/process.php",
      data: dataString,
      success: function() {
        $('#contact_form').html("<div id='message'></div>");
        $('#message').html("<h2>Datos enviados!</h2>")
        .append("<p>...</p>")
        .hide()
        .fadeIn(10, function() {
          $('#message');
        });
      }
     });
    return false;
	});
});
runOnLoad(function(){
  $("input#cajero").select().focus();
});

no me parece necesario pegar el codigo php que inserta los datos en la db ya que imagino que el problema está en uno de estos 2 archivos js... al ser un código modificado, hay lineas que estan de más que hacen que se generen esos conflictos al intentar enviar en el primer intento, lo hace cuando se clickea seguidamente sobre el botón, ustedes al conocer el lenguaje seguramente sabran darme la solución facilmente, espero una fácil explicación porque no conozco de JS :D gracias...