JavaScript POSTING of a Form to Remote Server

[rel82me]

Friends, I'm looking at script from Sangoma that I need some help with.

Essentially, I want to host this form, then POST it to a FREEPBX server, on the same LAN. I seem to have gotten PART of it to work, but this is my first attempt and need some help.

Here's the original form:
path to the background URL is here:

https://click2call.aosystemsgroup.com//admin/modules/webcallback/assets/images/click2callbackground.png

Can this form be called and modified for phone number being passed and the ID value changed to 1,2,3,4, etc..

<style type="text/css">
#frame {
    background-image: url('/admin/modules/webcallback/assets/images/c2c-1.png');
    background-repeat: no-repeat;
    background-size: 200px;
    height: 65px;
    cursor: pointer;
    cursor: hand;
}
#webcallbackinput {
    position: relative;
    left: 66px;
    top: 30px;
    width: 125px;
}
</style>
<div id="frame">
    <input type="text" name="num" placeholder="enter number here" id="webcallbackinput" value="">
    <input type="hidden" id="dest" value="http://test.company/wcb.php">
    <input type="hidden" id="i" value="1">
</div>
<div id="link">
Powered by: <a href="http://www.schmoozecom.com" target="_blank">www.schmoozecom.com</a>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#frame').click(function(){
        //ensure we have a value before posting
        if ($('#webcallbackinput').val()) {
            var valid_msg = 'Insert a message to be displayed to the user';
            var invalid_msg = 'Insert a message to be display to the user on failure';
            var but = $(this);
            $.ajax({
                url: $('#dest').val(),
                type: 'post',
                data: {p: $('#webcallbackinput').val(), i: $('#i').val()},
                cache: false,
                success: function(data, b, c) {
                    data = $.parseJSON(data);
                    
                    switch (data.Response) {
                        case 'Error':
                            switch (data.Message) {
                                case 'Originate failed':
                                    alert(invalid_msg);
                                    break;
                                default:
                                    alert(data.Message);
                                    break;
                            }
                            break;
                        case 'Success':
                            alert(valid_msg);
                            break;
                        default:
                            break;
                    }
                },
                error: function(a, b, c) {
                    alert(invalid_msg);
                }
            })
        }
    })
});
</script>

 

[simong1993]

Hey there! Looks like you're working on integrating a form for a FreePBX server. From your description, you want to modify the form so it can dynamically pass a phone number and change the i (ID) value to different numbers.

Here’s what you need to do:

Adjust the ID Dynamically​

You can modify the i value by using JavaScript to dynamically set it before the POST request. Here's an updated snippet that lets you change the i value:

<script type="text/javascript">
$(document).ready(function(){
    let idCounter = 1; // Start with 1 and increment as needed

    $('#frame').click(function(){
        // Ensure we have a value before posting
        if ($('#webcallbackinput').val()) {
            var valid_msg = 'Call was successful!';
            var invalid_msg = 'Something went wrong, please try again.';
            var but = $(this);

            // Dynamically set the i value
            $('#i').val(idCounter);
            idCounter++; // Increment for next use

            $.ajax({
                url: $('#dest').val(),
                type: 'post',
                data: {
                    p: $('#webcallbackinput').val(),
                    i: $('#i').val()
                },
                cache: false,
                success: function(data, b, c) {
                    data = $.parseJSON(data);
                    
                    switch (data.Response) {
                        case 'Error':
                            switch (data.Message) {
                                case 'Originate failed':
                                    alert(invalid_msg);
                                    break;
                                default:
                                    alert(data.Message);
                                    break;
                            }
                            break;
                        case 'Success':
                            alert(valid_msg);
                            break;
                        default:
                            break;
                    }
                },
                error: function(a, b, c) {
                    alert(invalid_msg);
                }
            });
        } else {
            alert("Please enter a number before clicking.");
        }
    });
});
</script>

What Changed?​

1. Dynamic i Value: Added a variable (idCounter) that increments every time the form is clicked.
2. Validation: Ensures a number is entered before making the AJAX request.
3. Simplified Alerts: Clear success and error messages for user feedback.

Notes:​

• Make sure the URL in #dest points to your FreePBX server and is reachable within your LAN.
• If you want the idCounter to reset or behave differently, let me know!

Let me know how it goes or if you hit any snags! 😊

 

[rel82me]

Hey there! Looks like you're working on integrating a form for a FreePBX server. From your description, you want to modify the form so it can dynamically pass a phone number and change the i (ID) value to different numbers.

Here’s what you need to do:

Adjust the ID Dynamically​

You can modify the i value by using JavaScript to dynamically set it before the POST request. Here's an updated snippet that lets you change the i value:

<script type="text/javascript">
$(document).ready(function(){
    let idCounter = 1; // Start with 1 and increment as needed

    $('#frame').click(function(){
        // Ensure we have a value before posting
        if ($('#webcallbackinput').val()) {
            var valid_msg = 'Call was successful!';
            var invalid_msg = 'Something went wrong, please try again.';
            var but = $(this);

            // Dynamically set the i value
            $('#i').val(idCounter);
            idCounter++; // Increment for next use

            $.ajax({
                url: $('#dest').val(),
                type: 'post',
                data: {
                    p: $('#webcallbackinput').val(),
                    i: $('#i').val()
                },
                cache: false,
                success: function(data, b, c) {
                    data = $.parseJSON(data);
                   
                    switch (data.Response) {
                        case 'Error':
                            switch (data.Message) {
                                case 'Originate failed':
                                    alert(invalid_msg);
                                    break;
                                default:
                                    alert(data.Message);
                                    break;
                            }
                            break;
                        case 'Success':
                            alert(valid_msg);
                            break;
                        default:
                            break;
                    }
                },
                error: function(a, b, c) {
                    alert(invalid_msg);
                }
            });
        } else {
            alert("Please enter a number before clicking.");
        }
    });
});
</script>

What Changed?​

1. Dynamic i Value: Added a variable (idCounter) that increments every time the form is clicked.
2. Validation: Ensures a number is entered before making the AJAX request.
3. Simplified Alerts: Clear success and error messages for user feedback.

Notes:​

• Make sure the URL in #dest points to your FreePBX server and is reachable within your LAN.
• If you want the idCounter to reset or behave differently, let me know!

Let me know how it goes or if you hit any snags! 😊

Nice. The id counter should behave in a different fashion.

The ID is pulled from a referring link as such:

<iframe src="https://click2call.aosystemsgroup.com/wcb.php?i=2" frameborder="0" scrolling="no"></iframe>

This link will be present on various websites, so it needs to change based on the value passed.

<iframe src="https://click2call.aosystemsgroup.com/wcb.php?i=2" frameborder="0" scrolling="no"></iframe>
<iframe src="https://click2call.aosystemsgroup.com/wcb.php?i=3" frameborder="0" scrolling="no"></iframe>

etc

 

[Antero360]

Nice. The id counter should behave in a different fashion.

The ID is pulled from a referring link as such:

<iframe src="https://click2call.aosystemsgroup.com/wcb.php?i=2" frameborder="0" scrolling="no"></iframe>

This link will be present on various websites, so it needs to change based on the value passed.

<iframe src="https://click2call.aosystemsgroup.com/wcb.php?i=2" frameborder="0" scrolling="no"></iframe>
<iframe src="https://click2call.aosystemsgroup.com/wcb.php?i=3" frameborder="0" scrolling="no"></iframe>

etc

Hi there,
What exactly does this do?...

 

[rel82me]

Thanks for your response. I managed to get the HTTP header response, so that portion is OK. What I am trying to now, and I'm looking around at using POST and RESPONSE as posted back by the server. So I'm trying to get a dialog box up on the screen letting the user know of the process status.

Here's what I have.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>

<!-- css start -->
<link href="css/main.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<!-- css end -->

<!-- Start Scripts -->
<script src="scripts/phoneformat.js" type="text/javascript" language="javascript" ></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<!-- End Start Scripts -->
</head>

<body>
    <form action="https://click2call.aosystemsgroup.com/wcb.php" method="post" name="frame">
    <div class="input-container">
        <span class="material-icons icon" style="font-size: 14px; background: rgb(22,58,130); background: linear-gradient(0deg, rgba(22,58,130,1) 30%, rgba(112,172,222,1) 70%)">call</span>
        <input type="text" name="p" placeholder="Phone Number:" id="webcallbackinput" name="webcallbackinput" class="input-field" onkeydown="javascript:backspacerDOWN(this,event);" onkeyup="javascript:backspacerUP(this,event);"/>
    </div>

    <input type="hidden" name="i" value="2"/>
    <input type="image" name="submit" src="images/c2c_button.png" border="0" alt="Submit" style="width: 145px; height: 37px;" class="submitposition"/>
       </form>   
</body>

</html>

<script type="text/javascript">
$(document).ready(function(){
    $('#frame').click(function(){
        //ensure we have a value before posting
        if ($('#webcallbackinput').val()) {
            var valid_msg = 'Insert a message to be displayed to the user';
            var invalid_msg = 'Insert a message to be display to the user on failure';
            var but = $(this);
            $.ajax({
                url: $('#dest').val(),
                type: 'post',
                data: {p: $('#webcallbackinput').val(), i: $('#i').val()},
                cache: false,
                success: function(data, b, c) {
                    data = $.parseJSON(data);
                    
                    switch (data.Response) {
                        case 'Error':
                            switch (data.Message) {
                                case 'Originate failed':
                                    alert(invalid_msg);
                                    break;
                                default:
                                    alert(data.Message);
                                    break;
                            }
                            break;
                        case 'Success':
                            alert(valid_msg);
                            break;
                        default:
                            break;
                    }
                },
                error: function(a, b, c) {
                    alert(invalid_msg);
                }
            })
        }
    })
});
</script>

 

[rel82me]

It appears to responding with a JSON response, this is what the result of the form post returns:

{"Response":"Success","Message":"Originate successfully queued"}

How would I convert this to a javascript object and display a response based on that?