none
Passing a Javascript variable to HTML RRS feed

  • Question

  • Is there a way to insert text returned from a JavaScript function into HTML? I am setting up an e-mail form with the following code:

    <form name="contactForm" action="gdform.php" onsubmit="return validateform();" method="post">
    <input type="hidden" name="subject" value="????????" />
    <input type="hidden" name="redirect" value="Confirmation.html" />

    I want to change the value of the subject line, (the question marks above) depending on some user behaviors. The value would be determined by a JavaScript function, which would return a text string. The text string will become the Subject line of the e-mail.

    Is there a way to do this?

    Thanks,


    Jolyon Hallows

    Friday, April 27, 2012 10:47 PM

Answers

  • I don't think browsers allow you to change just the value of an input element using javascript. It's a security thing. But they will let you append a new input element to a form like:

    var mySubject = '<input type="hidden" id="subject" name="subject" value="what ever your computed value is" />';
            $("#subject").append(mySubject);

    You could also put the element inside a container element and replace all the html. 

    • Marked as answer by JEHWW Tuesday, May 1, 2012 10:28 PM
    Tuesday, May 1, 2012 12:55 AM

All replies

  • I haven't actually done this, but I did find a solution at stackoverflow. Take a look at this:

    var form = document.forms.sampleform;
    var subject = form.empnum.value + ' | ' + form.unit.value + ' | ' + form.type.value;
    parent.location = 'mailto:er.saurav1@gmail.com?subject=' + encodeURIComponent(subject) + '&body=...'

    For your application, build the "subject" var using your own functions/values. This was an accepted answer at stackoverflow, so it should work for you... ;-)

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

    Friday, April 27, 2012 11:38 PM
  • An easy solution can be had with jQuery.

    First, add ids to the form fields. In keeping with a best practice in the evolution towards HTML5, make the id the same as the name attribute:

            <input type="hidden" id="subject" name="subject" value="????????" />

    Then your validateform() function can do something like this:

            var mySubject = whatever your computed value is;
            $("#subject").attr("value", mySubject);

    You can do the same thing with pure JavaScript but the code is longer and harder to understand.


    Will
    Baltimore, MD USA - www.fastie.com

    Sunday, April 29, 2012 1:20 PM
  • Hi Will

    I've tried this, but I can't get it to work. My site is at http://www.westwindconsulting.biz/Contact.html. On the view-source page, I've defined the source for jquery at line 22. I originally loaded jquery-1.7.2.min.js to my web site, but that didn't work, so I linked to an external source with about the same level of success.

    The jquery code starts at line 60. The form definition starts at line 115.

    Any obvious errors? Any advice?

    Thanks,


    Jolyon Hallows

    Tuesday, May 1, 2012 12:41 AM
  • I don't think browsers allow you to change just the value of an input element using javascript. It's a security thing. But they will let you append a new input element to a form like:

    var mySubject = '<input type="hidden" id="subject" name="subject" value="what ever your computed value is" />';
            $("#subject").append(mySubject);

    You could also put the element inside a container element and replace all the html. 

    • Marked as answer by JEHWW Tuesday, May 1, 2012 10:28 PM
    Tuesday, May 1, 2012 12:55 AM
  • Jolyon:

    You put the jQuery code in a $(document).ready() block. It should just be part of the validateForm function. Just because it's jQuery does not mean it must go in a ready block.

    Also, the validateForm function should have a return true; statement at the end, just for consistency.

    I'd suggest jQuery 1.7.1. It's always a good idea to use a recent, stable release.


    Will
    Baltimore, MD USA - www.fastie.com

    Tuesday, May 1, 2012 12:55 AM
  • This worked. Thanks.

    Jolyon Hallows

    Tuesday, May 1, 2012 10:29 PM