Displaying HTML with extracted message form URL

Question

Displaying HTML with extracted message form URL

I have a link that redirects to this page

Is there a way for me to extract the message "Message Sent Successfully" from the URL and display it in the form below?

<form action="send_form_email.php" name="contactForm" method="post">
    //I want to display the message here
    <h4>E-mail</h4>
    <div class="border-stripes">
        <input type="email" class="textfield" name="email" placeholder="Your e-mail address" />
    </div>
    <h4>Message</h4>
    <div class="border-stripes">
        <textarea class="textarea" name="message" rows="3" placeholder="Your message"></textarea>
    </div>
    <br />
    <br />
    <input id="submit" name="submit" type="submit" value="Submit">
</form>

javascript php jquery html

Answer 1

Answer №1

The following code will display the GET variable:

<?php echo urldecode($_GET['msg']); ?>

Answer 2

The following code will display the GET variable:

<?php echo urldecode($_GET['msg']); ?>

Answer 3

Answer №2

To achieve this in JavaScript, you can utilize query string parsing as shown below:

var queryString = (function() {
    function decodeString(string) {
        return decodeURIComponent(string.replace(/\+/g, " "));
    }
    var result = {};
    if (location.search) {
        location.search.substring(1).split('&').forEach(function(pair) {
            pair = pair.split('=');
            result[decodeString(pair[0])] = decodeString(pair[1]);
        });
    }
    return result;
})();

$('form[name=contactForm]').prepend('<p>' + queryString['msg'] + '</p>');

Answer 4

To achieve this in JavaScript, you can utilize query string parsing as shown below:

var queryString = (function() {
    function decodeString(string) {
        return decodeURIComponent(string.replace(/\+/g, " "));
    }
    var result = {};
    if (location.search) {
        location.search.substring(1).split('&').forEach(function(pair) {
            pair = pair.split('=');
            result[decodeString(pair[0])] = decodeString(pair[1]);
        });
    }
    return result;
})();

$('form[name=contactForm]').prepend('<p>' + queryString['msg'] + '</p>');

Answer 5

Answer №3

Javascript Function to Retrieve URL Parameters:

Below is a function that allows you to retrieve any parameter from a URL:

function getParamValue(parameterName) {
    parameterName = parameterName.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
    var regexString = "[\\?&]" + parameterName + "=([^&#]*)";
    var regex = new RegExp(regexString);
    var results = regex.exec(location.href);
    if (results == null)
        return "";
    else
        return decodeURI(results[1]);
}

alert(getParamValue('param'));

Check out the solution here: http://jsfiddle.net/tb8cetLy/1/

Answer 6

Javascript Function to Retrieve URL Parameters:

Below is a function that allows you to retrieve any parameter from a URL:

function getParamValue(parameterName) {
    parameterName = parameterName.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
    var regexString = "[\\?&]" + parameterName + "=([^&#]*)";
    var regex = new RegExp(regexString);
    var results = regex.exec(location.href);
    if (results == null)
        return "";
    else
        return decodeURI(results[1]);
}

alert(getParamValue('param'));

Check out the solution here: http://jsfiddle.net/tb8cetLy/1/

Answer 7

Answer №4

To accomplish this task using PHP (keep in mind that there is no security check for XSS vulnerabilities)

<form action="send_form_email.php" name = "contactForm" method="post">
                    <?php echo urldecode($_GET['msg']); ?>
                    <h4>E-mail</h4>
                    <div class="border-stripes"><input type="email" class="textfield" name="email" placeholder="Your e-mail address" /></div>
                    <h4>Message</h4>
                    <div class="border-stripes"><textarea class="textarea" name="message" rows="3" placeholder="Your message"></textarea></div><br /><br />
                    <input id="submit" name="submit" type="submit" value="Submit">
</form>

Alternatively, you can achieve this with JavaScript

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
var msg = getParameterByName('msg');
$( "form" ).prepend( "<p>"+msg+"</p>" );

The getParameterByName function has been sourced from this site

Answer 8

To accomplish this task using PHP (keep in mind that there is no security check for XSS vulnerabilities)

<form action="send_form_email.php" name = "contactForm" method="post">
                    <?php echo urldecode($_GET['msg']); ?>
                    <h4>E-mail</h4>
                    <div class="border-stripes"><input type="email" class="textfield" name="email" placeholder="Your e-mail address" /></div>
                    <h4>Message</h4>
                    <div class="border-stripes"><textarea class="textarea" name="message" rows="3" placeholder="Your message"></textarea></div><br /><br />
                    <input id="submit" name="submit" type="submit" value="Submit">
</form>

Alternatively, you can achieve this with JavaScript

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
var msg = getParameterByName('msg');
$( "form" ).prepend( "<p>"+msg+"</p>" );

The getParameterByName function has been sourced from this site

Answer 9

Answer №5

If you have a file called send_form_email.php, you might be handling form data like this:

// processing form data
// redirecting to index.html with $_GET['msg'] variable

To create cleaner URLs, you can use the following function and add it to your common file:

session_start();

function flash_set($key,$value)
{
    $_SESSION['flash'][$key] = $value;
}

function flash_get($key)
{
    if(isset($_SESSION['flash'][$key]))
    {
        $message = $_SESSION['flash'][$key];
        unset($_SESSION['flash'][$key]);
        return $message;
    }
    return '';
}

Modify the send_form_email.php to redirect without any $_GET parameters. After processing the form, add this snippet:

// processing form data
flash_set('form','Message Sent Successfully');
// perform redirect

Now, integrate this into your form as follows:

<form action="send_form_email.php" name="contactForm" method="post">
<?php echo flash_get('form')?> // Display message here
<h4>E-mail</h4>

The flash message will only display once after redirection. If the user refreshes the page, it will disappear!

Answer 10

If you have a file called send_form_email.php, you might be handling form data like this:

// processing form data
// redirecting to index.html with $_GET['msg'] variable

To create cleaner URLs, you can use the following function and add it to your common file:

session_start();

function flash_set($key,$value)
{
    $_SESSION['flash'][$key] = $value;
}

function flash_get($key)
{
    if(isset($_SESSION['flash'][$key]))
    {
        $message = $_SESSION['flash'][$key];
        unset($_SESSION['flash'][$key]);
        return $message;
    }
    return '';
}

Modify the send_form_email.php to redirect without any $_GET parameters. After processing the form, add this snippet:

// processing form data
flash_set('form','Message Sent Successfully');
// perform redirect

Now, integrate this into your form as follows:

<form action="send_form_email.php" name="contactForm" method="post">
<?php echo flash_get('form')?> // Display message here
<h4>E-mail</h4>

The flash message will only display once after redirection. If the user refreshes the page, it will disappear!

Answer 11

Answer №6

To decode a URL parameter in HTML/PHP, you can use the code urldecode($_GET['msg'])

If you prefer to do it with JavaScript, you can use the following function:

function getQuerystring(key, default_) {
    if (default_==null) default_=""; 
    key = key.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
    var regex = new RegExp("[\\?&]"+key+"=([^&#]*)");
    var qs = regex.exec(window.location.href);
    if(qs == null)
        return default_;
    else
        return qs[1];
}

This function allows you to retrieve the 'msg' parameter using var msg = getQuerystring("msg");, and you can combine it with escape functions (http://www.w3schools.com/jsref/jsref_unescape.asp).

Answer 12

To decode a URL parameter in HTML/PHP, you can use the code urldecode($_GET['msg'])

If you prefer to do it with JavaScript, you can use the following function:

function getQuerystring(key, default_) {
    if (default_==null) default_=""; 
    key = key.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
    var regex = new RegExp("[\\?&]"+key+"=([^&#]*)");
    var qs = regex.exec(window.location.href);
    if(qs == null)
        return default_;
    else
        return qs[1];
}

This function allows you to retrieve the 'msg' parameter using var msg = getQuerystring("msg");, and you can combine it with escape functions (http://www.w3schools.com/jsref/jsref_unescape.asp).

Displaying HTML with extracted message form URL

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

How to transform multi-dimensional arrays to JSON format using JavaScript (and maybe jQuery)

Confusion surrounding the concept of returning an arrow function from a Vuex storage getter

Guide on displaying the name attribute of a button along with its price in a separate div when clicked

The Upstash Redis scan operation

When scrolling, use the .scrollTop() function which includes a conditional statement that

Error encountered while attempting to start session

Best practice for incorporating Bootstrap into Webpack

Adding options to a dropdown menu using jQuery and Ajax technique

What could be causing the video to extend beyond the limits of the container?

Using the CSS property `transform:scale(2,2)` causes an image to suddenly appear in the

Guide on importing an external JavaScript library in Node.js utilizing a TypeScript declaration file

Secure your Flask forms with CSRF token validation middleware

How to retrieve the value from an editable td within a table using Jquery

Executing operations in the background in Laravel 4.2

The art of transforming properties into boolean values (in-depth)

Looking to confirm client-side text in NodeJS?

Unable to retrieve data from PHP using AJAX request

Using Typescript: invoking static functions within a constructor

Empty jQuery $.ajax value after post

Tips for successfully installing a package through npm