CODEWITHSUNDEEP
javascriptphphtmlformspost
poiasd
poiasd

Reputation: 169

Sending dynamic POST data with Javascript

So basically, I'm trying to send some data to a remote PHP page, via POST, with 4 static parameters and one random parameter, a number. So far what I have done is created an HTML page with a form with 4 hidden fields and 1 empty field, in which a random number is inserted as the value via Javascript (using Math.random). Now whenever I submit this form, it takes me to the remote PHP page, and so I have to click back again (in the browser) and then submit.

So, I decided to load this form in an iFrame in another HTML Page, so after clicking submit, I can just hit refresh, and then submit again.

I want to know, is there a way I can use Javascript in the parent HTML to automatically submit the form in the iFrame, then create a new random value and submit it again?

Here is my code so far

a.html

<html>
<body>
<form method="post" action="http://awebsite.com/remotefile.php">
*some hidden fields with the static values*
<input type="text" id="mytext" name="mobile_no">
<input type="submit">
</form>
<script>//don't remember the exact code, use javascript to generate a random number which is put in the value for mytext via getElementById</script>
</body>
</html>

now this was the form which was to manually send data to the server

this is to load an iframe: b.html

<html>
<body>
<iframe src="a.html">
</body>
</html>

Can I use javascript in b.html to resend the form multiple times, but with the value of mobile_no different each time? Or can I simply send POST data with the parameters to the server via simple Javascript (or PHP)

Upvotes: 0

Views: 2041

Answers (1)

Brian Bolli
Brian Bolli

Reputation: 1873

You question isn't 100% clear, but it sounds like you want to asynchronously post form data. You could easily do this with a JavaScript library like jQuery without the need for an iframe. First you should add an ID attribute to your form to make it easier to reference in your jQuery code. Then you can attach an event listener to the form's submit event where you can customize the form before submission and handle the response 

$('#myForm').submit(function(e) {

    // prevent default form submit action from occuring
    e.preventDefault();

    // load values need to make AJAX request
    var method = $(this).attr('method');
    var action = $(this).attr('action');

    // Process Ajax request
    $.ajax({
        type: method,
        url: action,
        dataType: 'html',
        data: $(this).serialize(),
        beforeSend: function() {

            // generate and assign per form submit random number
            // show loading gif

        },
        success: function(response) {

            // AJAX POST success, insert the HTML response into the DOM

        },
        error: function(jqXHR, textStatus, errorThrown) {

            // console.log any errors for debugging here

        },
        complete: function() {

            // Post completion tasks, such as hide loading gif

        }
    });
});

Upvotes: 1

Related Questions