Creating randomized ID that applies for two separate scripts

Question

I'm not sure how to solve this, so hopefully, some of you have a great solution.

I've set up two contact forms - one for the initial information and a second form with relevant follow-up questions. Please note that it is on purpose that it sends two different forms.

When receiving the information by email, I would like a random ID, e.g.: #42432, to indicate that both emails received come from the same session/person.

<!-- Part 1 --> 
<script>
function send1() {
    var form_name = jQuery('[name=name]').val();
    var form_title = jQuery('[name=title]').val();
    var form_email = jQuery('[name=email]').val();
    var form_textarea = jQuery('[name=textarea]').val();

    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("contact-form").innerHTML =
                this.responseText;
        }
    };
    xhttp.open("POST", "php/contact1.php", true);
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("name="+form_name+"&title="+form_title+"&email="+form_email+"&textarea="+form_textarea);
}
</script>
<!-- Part 2 -->
<script>
    function send2() {
        var form_industry = jQuery("[name='industry']").is(":checked");
        var form_academia = jQuery("[name=academia]").is(":checked");
        var form_targeted = jQuery("[name=targeted]").is(":checked");
        var form_discovery = jQuery("[name=discovery]").is(":checked");
        var form_dunno = jQuery("[name=dunno]").is(":checked");
        var form_samples = jQuery('[name=samples]').val();
        var form_groups = jQuery('[name=groups]').val();
        var form_groups2 = jQuery('[name=groups2]').val();
        var form_biological = jQuery('[name=biological]').val();
        var form_technical = jQuery('[name=technical]').val();
        var form_source = jQuery('[name=source]').val();
        var form_origen = jQuery('[name=origen]').val();
        var form_extraction = jQuery('[name=extraction]').val();
        var form_aim = jQuery('[name=aim]').val();
        var form_phone = jQuery('[name=phone]').val();      
        var form_affiliated = jQuery('[name=affiliated]').val();
        var form_textarea = jQuery('[name=textarea]').val();

        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("contact-form").innerHTML =
                    this.responseText;
            }
        };
        xhttp.open("POST", "php/contact2.php", true);
        xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
        xhttp.send("industry="+form_industry+"&academia="+form_academia+"&targeted="+form_targeted+"&discovery="+form_discovery+"&dunno="+form_dunno+"&samples="+form_samples+"&groups="+form_groups+"&groups2="+form_groups2+"&biological="+form_biological+"&technical="+form_technical+"&source="+form_source+"&origen="+form_origen+"&extraction="+form_extraction+"&aim="+form_aim+"&phone="+form_phone+"&affiliated="+form_affiliated+"&textarea="+form_textarea);
    }
</script>

Example of xhttp.open("POST", "php/contact1.php":

<?php
$name = $_POST['name'];
$title = $_POST['title'];
$email = $_POST['email'];
$textarea = $_POST['textarea'];

$email_from = 'New contact';
$email_subject = 'New Contact - Request with Questionary';
$email_body = "New contact request (Request with Questionary):
\n".
            "Name: $name\n".
            "Title: $title\n".
            "Email: $email\n".
            "Message: $textarea\n";


$to = "email@email.com";
$headers = "From: $email_from \r\n";
$headers = "Reply-To: $email \r\n";

mail($to,$email_subject,$email_body,$headers);

header("location: https://website.com/php/questionary.html");
?>

The PHP file for the second form is built in the same way.

I'm looking forward to hearing your solutions.

All the best,
Louis

score 1 · Accepted Answer · answered Jul 15 '21 at 13:12

You can generate GUID or random number like mentioned in this answer as Global Variable that will be available in both forms if forms are loaded in same page without reloading. For example :

<script>
function uuidv4() {
    const a = crypto.getRandomValues(new Uint16Array(8));
    let i = 0;
    return '00-0-4-1-000'.replace(/[^-]/g, 
            s => (a[i++] + s * 0x10000 >> s).toString(16).padStart(4, '0')
    );
}

var guidVariable = uuidv4();

function send1() {
    ...
    xhttp.open("POST", "php/contact1.php", true);
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("name="+form_name+"&title="+form_title+"&email="+form_email+"&textarea="+form_textarea+"&guidVariable ="+guidVariable );
}
</script>


<!-- Part 2 -->
<script>
    function send2() {
        ...    
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("contact-form").innerHTML =
                    this.responseText;
            }
        };
        xhttp.open("POST", "php/contact2.php", true);
        xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
        xhttp.send("industry="+form_industry+"&academia="+form_academia+"&targeted="+form_targeted+"&discovery="+form_discovery+"&dunno="+form_dunno+"&samples="+form_samples+"&groups="+form_groups+"&groups2="+form_groups2+"&biological="+form_biological+"&technical="+form_technical+"&source="+form_source+"&origen="+form_origen+"&extraction="+form_extraction+"&aim="+form_aim+"&phone="+form_phone+"&affiliated="+form_affiliated+"&textarea="+form_textarea+"&guidVariable ="+guidVariable );
    }
</script>

Reference How to create a GUID / UUID

Pranav, it worked like a charm. Thanks you very much. – Louis Loeb Jul 15 '21 at 13:58 — Louis Loeb, Jul 15 '21 at 13:58

Creating randomized ID that applies for two separate scripts

1 Answers1