Get form url without submit

Question

I am a newbie when it comes to JQuery or Javascript -- so apologies if this is an easy one...

Basically, I have a GET form -- which I need to intercept -- meaning I need to call javascript instead of actually submitting the form, when the submit button is pressed. I would like to have the complete URL as a output... something like...

http://server/cgi-bin/status.py?val=1223&val2=434334&val3=4343 

form -

Basically, I need the form to process the URL as if it would submit, but not submit. Main requirement is to send this link vial mail to the customers so they can track the job progress using this link

Thanks, Prince

Answer 1

If you need to process the form with javascript and prevent submitting you need to add a listener on the submit event that will occur on the form when the user presses the submit button. Simply add an id attribute to your form element :

<form method="get" id="myForm">
...
</form>

Then add the listener :

<script>
$(function(){
    $("#myForm').on('submit', function(event) {
        event.preventDefault(); // This line prevents the normal behaviour of the submit button

        var queryString = $(this).serialize(); // This will generate a query string like so : "val=1223&val2=434334&val3=4343"

        var url = "http://server/cgi-bin/status.py?" + queryString; // Now you have the full URL

        // Then you can send an AJAX request to a server-side script that will send the mail
        $.ajax({
            url: 'http://server/cgi-bin/email.py', // Your e-mailing script
            method: 'POST', // or GET whatever
            data: {
                url: url,
                email: 'recipient@domain.com'
            },
            ...
        })

    })
})


</script>

Answer 2

This can be done with something like this

 $('form').on('submit', function(event) {
    var url = '<insert-path-to-desired-script>?' + $(this).serialize();

    event.preventDefault();
});

The event.preventDefault() makes sure the form doesn't actually submit.

url then contains a full url with all the form properties in it.