Ajax script receiving user string input text and Posting in JSON format

Question

I have a function ipcfg_set that will set the IP address and it takes the user input variable and sends it in JSON format back to the function. Having issue with constructing the script that takes the IP,mask,gateway entered by user and upon clicking the button will send the value in JSON back.

function ipcfg_set () 
               {
                $.ajax({
               type: 'POST',
               url: 'ipcfg_set.cgi',
               dataType : "json",
               data: { ipv4_addr: $('#ip1').val() + '.' + $('#ip2').val() + '.' + $('#ip3').val() + '.' + $('#ip4').val(),
                    gw_addr: $('#gw1').val() + '.' + $('#gw2').val() + '.' + $('#gw3').val() + '.' + $('#ip4').val(), 
                    ipv4_mask: $('#nm1').val() + '.' + $('#nm2').val() + '.' + $('#nm3').val() + '.' + $('#nm4').val()      
                    }
            success: function(data) {

        });
    }


    $(function() {
        $('#btnreset').on('click', ipcfg_get);
        $('#btnapply').on('click', ipcfg_set);
        ipcfg_get();
    });

HTML code

 <section>

        <h2>IP Configuration</h2>
        <p>Please fill in the form and press <b>Apply</b> to save settings.</p>
        <p>Press <b>Reset</b> to revert settings.</p>
        <section>

        <table class="formgrid">
        <tr><th>IP Address:</th><td><input type="text" name="a1" id="ip1" size="3" value="0">.
                <input type="text" name="a2" size="3" id="ip2" value="0">.
                <input type="text" name="a3" size="3" id="ip3" value="0">.
                <input type="text" name="a4" size="3" id="ip4" value="0"></td></tr>



                <tr><th>Network mask:</th><td><input type="text" name="m1" id="nm1" size="3" value="0">.
                <input type="text" name="m2" size="3" id="nm2" value="0">.
                <input type="text" name="m3" size="3" id="nm3" value="0">.
                <input type="text" name="m4" size="3" id="nm4" value="0"></td></tr>

            <tr><th>Gateway:</th><td><input type="text" name="g1" id="gw1" size="3" value="0">.
                <input type="text" name="g2"  size="3" id="gw2" value="0">.
                <input type="text" name="g3" size="3" id="gw3" value="0">.
                <input type="text" name="g4" size="3" id="gw4" value="0"></td></tr>
        </table>
        </section>
        <section>
        <input id="btnreset" type="button" class="button" value="Reset" />
        <input id="btnapply" type="button" class="button" value="Apply..." />
        </section>

can you show your html ?

Nabin Nembang
– Nabin Nembang

2016-01-28 20:29:32 +00:00
Commented Jan 28, 2016 at 20:29 — Nabin Nembang
– Nabin Nembang, Commented Jan 28, 2016 at 20:29

Borys Serebrov · Accepted Answer · 2016-01-28 23:16:32Z

3

You can get the values from inputs using function like this, just to reduce typing. You have four inputs per IP address, the function will combine values into the single string:

function formatIP(id) { 
    return $(id+'1').val() + '.' + $(id+'2').val() + '.' + 
           $(id+'3').val() + '.' + $(id+'4').val() 
}

And the data parameter should be a javascript object like this:

data: { 
   ipv4_addr: formatIP('#ip'),
   gw_addr:   formatIP('#nm'),
   ipv4_mask: formatIP('#gw')
}

edited Jan 28, 2016 at 23:16

answered Jan 28, 2016 at 20:32

Borys Serebrov

16.2k2 gold badges41 silver badges55 bronze badges

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

6 Comments

jackotonye Over a year ago

for the html structure i have table rows that are with individual id's and want to convert their string text input to JSON and post the values to the server.

Borys Serebrov Over a year ago

@jackotonye I updated the answer according to the HTML

Borys Serebrov Over a year ago

@jackotonye sorry, there was an old version of the function, I updated the answer. It should be fucntion formatIP(id) {} and it adds 1, 2, 3, 4 inside, so you just call it as formatIP('#ip').

Borys Serebrov Over a year ago

@jackotonye but it is actually not really important to this question, you can even have without an additional function, like data: { ipv4_addr: $('#ip1').val() + '.' + $('#ip2').val() + '.' + $('#ip2').val() + '.' + $('#ip3').val(), ... }

jackotonye Over a year ago

upon success i want to update the user input values and change the set ip to the inputed value

|

Collectives™ on Stack Overflow

Ajax script receiving user string input text and Posting in JSON format

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