Giter VIP home page Giter VIP logo

Comments (14)

jackocnr avatar jackocnr commented on May 11, 2024

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

from intl-tel-input.

frafas avatar frafas commented on May 11, 2024

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

from intl-tel-input.

jackocnr avatar jackocnr commented on May 11, 2024

Are you sure the other form values are submitting successfully?

from intl-tel-input.

frafas avatar frafas commented on May 11, 2024

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

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

from intl-tel-input.

jackocnr avatar jackocnr commented on May 11, 2024

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

from intl-tel-input.

frafas avatar frafas commented on May 11, 2024

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

from intl-tel-input.

jackocnr avatar jackocnr commented on May 11, 2024

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: screen shot 2014-08-05 at 10 04 59

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.

from intl-tel-input.

frafas avatar frafas commented on May 11, 2024

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

from intl-tel-input.

jackocnr avatar jackocnr commented on May 11, 2024

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?

from intl-tel-input.

frafas avatar frafas commented on May 11, 2024

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>

from intl-tel-input.

jackocnr avatar jackocnr commented on May 11, 2024

Can you send me a link to the Plunker?

from intl-tel-input.

frafas avatar frafas commented on May 11, 2024

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

from intl-tel-input.

jackocnr avatar jackocnr commented on May 11, 2024

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.

from intl-tel-input.

frafas avatar frafas commented on May 11, 2024

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

from intl-tel-input.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.