value lost in submit

[frafas]

Hello.
first of all thanks for everything.
i am trying to register some users data using intl-tel-input for telephone numbers. when i submit the form i lose the field value if i add the scripts. I tried without and it arrives at the second page.
this is the code:

input type="tel" name="mobile" id="mobile" size="20" />
span id="valid-msg" class="hide">✓ Valid
span id="error-msg" class="hide">Invalid number

script>
var telInput = $("#mobile"),
errorMsg = $("#error-msg"),
validMsg = $("#valid-msg");

// initialise plugin
telInput.intlTelInput({
  validationScript: "telefono/lib/libphonenumber/build/isValidNumber.js",
  preferredCountries: [ "co", "ec", "pe", "us", "it" ]
});

// on blur: validate
telInput.blur(function() {
  if ($.trim(telInput.val())) {
    if (telInput.intlTelInput("isValidNumber")) {
      validMsg.removeClass("hide");
    } else {
      telInput.addClass("error");
      errorMsg.removeClass("hide");
      validMsg.addClass("hide");
    }
  }
});

// on keydown: reset
telInput.keydown(function() {
  telInput.removeClass("error");
  errorMsg.addClass("hide");
  validMsg.addClass("hide");
});

telInput.intlTelInput("setNumber", "<?php echo $cellulare;?>");

/script>

the message on the next page is:

Notice: Undefined index: mobile in C:\xampp\htdocs\mioprogetto\amministrazione\elaboraVenditore.php on line 12

i can't understand what i am doing wrong...
thanks for your help

[jackocnr]

Are you submitting the form with Ajax (in which case can you post that code)? Or just a regular <form> element and a full page load (in which case can you post the full form markup)?

[frafas]

thanks for the fast reply.
i am submitting with regular form.

<script language="JavaScript" type="text/javascript">
<!--
function esci()
{
    if(confirm("exit without saving?"))
    {
        document.location.href="home.php";
    }
    window.event.returnValue=false;
}
function checkForm()
{
    if(document.frmVenditori.nome.value == ""){
        alert("Please, insert name.");
        document.frmVenditori.nome.focus();
        return false;
    }
    document.frmVenditori.submit();
    window.event.returnValue=false;
}

-->
</script>
<form name="frmVenditori" action="elaboraVenditore.php" method="post" enctype="multipart/form-data">
  <tr>
    <td align="center" class="text_black" colspan="2"><input type="button" name="salva" size="10" value="save" onClick="javascript: checkForm();"></td>
  </tr>
  <tr>
    <td align="center" class="text_black" colspan="2"><input type="button" name="annulla" size="10" value="quit without saving" onClick="javascript: esci();"></td>
  </tr>
  <tr>
    <td>Name:</td>
    <td><input type="text" name="nome" id="nome" value="<?php echo $nome;?>"></td>
  </tr>
  <tr>
    <td>Phone&nbsp;number:</td>
    <td><input type="tel" name="phone-number" id="phone-number" size="20" /></td>
  </tr>
  <tr>
    <td>Phone&nbsp;number&nbsp;visible:</td>
    <td><input type="checkbox" name="telefono_vis" id="telefono_vis" <?php if($telesono_vis == '1') echo ' checked="checked"';?>/></td>
  </tr>
  <tr>
    <td>Mobile&nbsp;number:</td>
    <td><input type="tel" name="mobile" id="mobile" size="20" />
        <br><span id="valid-msg" class="hide">✓ Valid</span>
        <br><span id="error-msg" class="hide">Invalid number</span>
    </td>
  </tr>
  <tr>
    <td>Mobile&nbsp;number&nbsp;visible:</td>
    <td><input type="checkbox" name="cellulare_vis" id="cellulare_vis" <?php if($cellulare_vis == '1') echo ' checked="checked"';?> /></td>
  </tr>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="telefono/build/js/intlTelInput.min.js"></script>
<script>
  var telInput2 = $("#phone-number");

    // initialise plugin
    telInput2.intlTelInput({
      preferredCountries: [ "co", "ec", "pe", "us", "it" ],
      autoFormat: false
      });

</script>
<script>
  var telInput = $("#mobile"),
  errorMsg = $("#error-msg"),
  validMsg = $("#valid-msg");

    // initialise plugin
    telInput.intlTelInput({
      validationScript: "telefono/lib/libphonenumber/build/isValidNumber.js",
      preferredCountries: [ "co", "ec", "pe", "us", "it" ]
    });

    // on blur: validate
    telInput.blur(function() {
      if ($.trim(telInput.val())) {
        if (telInput.intlTelInput("isValidNumber")) {
          validMsg.removeClass("hide");
        } else {
          telInput.addClass("error");
          errorMsg.removeClass("hide");
          validMsg.addClass("hide");
        }
      }
    });

    // on keydown: reset
    telInput.keydown(function() {
      telInput.removeClass("error");
      errorMsg.addClass("hide");
      validMsg.addClass("hide");
    });

    telInput.intlTelInput("setNumber", "<?php echo $cellulare;?>");

</script>
</form>

this is all the code involved i think

[jackocnr]

Are you sure the other form values are submitting successfully?

[frafas]

yes, this is the array that arrive in the second page

Array ( [nome] => Prova [telefono_vis] => on [cellulare_vis] => on )

[jackocnr]

And if you don't initialise the plugin, what values do you get?

[frafas]

this one:
Array ( [nome] => aaa [phone-number] => 222 [telefono_vis] => on [mobile] => 32432 [cellulare_vis] => on )

[jackocnr]

That's very strange. I don't see how the plugin could be causing that.

I used your code to make a test case and it seems to be working fine (http://plnkr.co/edit/JnHAVgN2x7GQW90mGRRr?p=preview). I just changed the save button to have type="submit" so it directly submits the form, and changed the <form> method to GET so you can see the arguments in the URL, and removed the action, so it just reloads the same page (but with the args in the url).

If you view that in Chrome, and open Chrome Dev Tools, look at the Network tab, and filter by Documents, and then click the "save" button on the form, you will see that it makes a GET request with all of the args - see this screenshot:

I would advise you to try and simplify your test case to figure out what's causing the problem. Make sure you don't have any other libs/plugins interfering with your code.

[frafas]

thanks for your reply.
i took a look at your link. it is strange.
i checked and there is no other libs/plugin.
i tried to put
'''
alert(document.frmVenditori.mobile);
'''
directly on the button without submitting the form.
without initializing the plugin it prints object HTMLInputElement. initializing the plugin it gives me "undefined".
That's so strange.
Any other suggestion?
thanks by the way for yout time

[jackocnr]

I adjusted my example to do that and it works fine (try it - just hit save).

Can you try and reproduce your problem somewhere I can see it running, like on your website, or on Plunker or something?

[frafas]

i just did it on plunker.
this is the code i used

<html > 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Dreamlandsforsale Administration Area</title>
<link rel="stylesheet" href="telefono/build/css/intlTelInput.css">
<link rel="stylesheet" href="style.css">
<script language="JavaScript" type="text/javascript">
<!--
function esci()
{
    if(confirm("exit without saving?"))
    {
        document.location.href="home.php";
    }
    window.event.returnValue=false;
}
function checkForm()
{
    if(document.frmVenditori.nome.value == ""){
        alert("Please, insert name.");
        document.frmVenditori.nome.focus();
        return false;
    }
    alert(document.frmVenditori.mobile);
    //document.frmVenditori.submit();
    window.event.returnValue=false;
}

-->
</script>
</head> 
<body> 
<div align="center"> 
<table border="0" cellspacing="3" cellpadding="2"> 
<form name="frmVenditori" action="elaboraVenditore.php" method="get" enctype="multipart/form-data">
  <tr>
    <td align="center" class="text_black" colspan="2"><input type="button" name="salva" size="10" value="save" onClick="javascript: checkForm();"></td>
  </tr>
  <tr>
    <td align="center" class="text_black" colspan="2"><input type="button" name="annulla" size="10" value="quit without saving" onClick="javascript: esci();"></td>
  </tr>
  <tr>
    <td>Name:</td>
    <td><input type="text" name="nome" id="nome" value=""></td>
  </tr>
  <tr>
    <td>Phone&nbsp;number:</td>
    <td><input type="tel" name="phone-number" id="phone-number" size="20" value="" /></td>
  </tr>
  <tr>
    <td>Phone&nbsp;number&nbsp;visible:</td>
    <td><input type="checkbox" name="telefono_vis" id="telefono_vis" /></td>
  </tr>
  <tr>
    <td>Mobile&nbsp;number:</td>
    <td><input type="tel" name="mobile" id="mobile" size="20" value="" />
        <br><span id="valid-msg" class="hide">✓ Valid</span>
        <br><span id="error-msg" class="hide">Invalid number</span>
    </td>
  </tr>
  <tr>
    <td>Mobile&nbsp;number&nbsp;visible:</td>
    <td><input type="checkbox" name="cellulare_vis" id="cellulare_vis"  /></td>
  </tr>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://jackocnr.com/lib/intl-tel-input/build/js/intlTelInput.js"></script>
<script>
  var telInput2 = $("#phone-number");

    // initialise plugin
    telInput2.intlTelInput({
      preferredCountries: [ "co", "ec", "pe", "us", "it" ],
      autoFormat: false
      });

</script>
<script>
  var telInput = $("#mobile"),
  errorMsg = $("#error-msg"),
  validMsg = $("#valid-msg");

    // initialise plugin
    telInput.intlTelInput({
      validationScript: "http://jackocnr.com/lib/intl-tel-input/lib/libphonenumber/build/isValidNumber.js",
      preferredCountries: [ "co", "ec", "pe", "us", "it" ]
    });

    // on blur: validate
    telInput.blur(function() {
      if ($.trim(telInput.val())) {
        if (telInput.intlTelInput("isValidNumber")) {
          validMsg.removeClass("hide");
        } else {
          telInput.addClass("error");
          errorMsg.removeClass("hide");
          validMsg.addClass("hide");
        }
      }
    });

    // on keydown: reset
    telInput.keydown(function() {
      telInput.removeClass("error");
      errorMsg.addClass("hide");
      validMsg.addClass("hide");
    });

    //telInput.intlTelInput("setNumber", "");

</script>
</form>
</table> 
</div> 
</body> 
</html> 

[jackocnr]

Can you send me a link to the Plunker?

[frafas]

http://plnkr.co/edit/ekO086jIIxhehKM67A7u?p=preview

[jackocnr]

The problem is that you've got a form element directly inside a table element, which is invalid. In the Plunker, you can see the red error message on line 35. You just need to move the table inside the form.

[frafas]

Wow. that was the problem! i am sorry to made you waste your time for such a stupid error.
thanks. you're great