CODEWITHSUNDEEP
javascriptjqueryjquery-uitextbox
Manisha Singh Sanoo
Manisha Singh Sanoo

Reputation: 929

Can't get value entered in popup textbox

I have a popup window which I created using the JQuery UI. It opens when you click on the button Configure:


When I click on the button random IP, an IP from a list of IPs found in a array appears randomly. These are the codes for it:

Codes

/*Random IP generator*/
var textArray = [
    '2001:db8:a0b:12f0::1/48',
    '2001:DB8:C003:1::F00D/48',
    'FEDC:BA98:7654:3210::3/48',
    'FF01::43/48',
    '2FFB:1000:2000:0003::12f0/48',
    '2001:2AC:CAD:0000::/64'
];
var randomNumber = textArray[Math.floor(Math.random() * textArray.length)];

$("#random").click(function () {
    $('#value').val($('#value').val() + randomNumber);
});

And this is the form:

Codes

<div id="dialogbox" title="IPv6 Calculator">
    <form>
        <center><input type="text" placeholder="IPv6 Address and Netmask" id="value" size="25"/></center>

    </form>
    <p>
    <center>
        <button id="calculate" onclick="calculate()"
                style="background-color:#B4BA22; border-radius:3px; cursor:pointer;">Calculate
        </button>
        <button id="random" onclick="random()" style="border-radius:3px; cursor:pointer;">Random IP</button>
    </center>
    </p>
</div>

After getting an IP in the textbox, either by entering it manually or using the Random IP button, I need to use this IP for calculation purposes but when I click on the Calculate button I can't get the IP from the textbox. This is the calculate function:

$("#calculate").click(function () {
    $("#dialogbox").dialog("close");

    $("#result").dialog("open"); //another popup form opens

    ip = $("#value").val(); //ip declared globally
    $("#result").attr("title", "Result for IP" + ip) //tried to use the value obtained to change the attribute of a textbox but to no avail.
});

I still can't get the value from the textbox. Any help please?

EDIT
The complete codes: Liveweave

Upvotes: 0

Views: 1642

Answers (2)

Help
Help

Reputation: 1156

From the code which have shared I have observed some points. You are calling function on click which are not available in your js and also jquery click functions are also written which is causing conflict in click functions.

Here is the replicate for your senario

Fiddle

Help :)

Upvotes: 1

Pushp Singh
Pushp Singh

Reputation: 596

After 30 minutes of reseraching, i came up with perfect and easy solution for your TextBox output.

*** Minor error in your JQuery code:

  1. For your calculate button, button id and function has same value ie. [calculate] due to which your function is not calling.
  2. You provided onclick but it should be [onClick], "C" must be capital.

Else, everything is fine.

**** Correction*

  1. change [onclick] to [onClick].
  2. Just make the first letter of your ["calculate()"] as ["Calculate()"].

*** Overall solution:

Easy JavaScript code for you JQuery Code: Replace your JQuery code with this JavaScript code :)

==================================================================

    <div id="dialogbox" title="IPv6 Calculator">
    <form>
        <center><input type="text" placeholder="IPv6 Address and Netmask"      
         id="value" size="25"/> </center> 
    </form>
    <p>
      <center>
        <button id="calculate" onClick="Calculate()"
                style="background-color:#B4BA22; border-radius:3px; 
                 cursor:pointer;">calculate
        </button>
        <button id="random" onclick="random()" style="border-radius:3px; 
         cursor:pointer;">Random IP</button>
      </center>
    </p>
</div>


<script>
 function Calculate(){
var calc=document.getElementById("value").value;
alert(calc);
}
</script>

Upvotes: 2

Related Questions