Javascript text input (+checkbox options) and text output to easily Ctrl + C

Question

The closest existing thread I could find on here is this one: How can I output multiple text fields to one page

And it's a similar idea. Basically my objective is to allow for multiple inputs (text, checkboxes, etc) and then output into a simple text field that is preferably automatically copied to one's clipboard but it doesn't have to be that fancy, as long as it can easily be copied and pasted elsewhere.

Background: At work, we have a naming convention we use for creating contracts and they follow the same sort of format but if we can easily punch in the same fields and check off certain products to then output text to copy and paste, it would make life SO much easier.

I was working off those input your name and then it outputs a "Hi whatever you inputed!" scripts and also looking into mad lib javascripts because they are kind of the same idea minus the checkboxes... but I am stuck. I am a javascript newbie so I am not sure how to properly incorporate multiple textboxes and checkbox options to output into one line of text (that would be great to have a feature similar to those coupon sites like retailmenot where you just click into it and it automatically Ctrl + C it for you)

So using the above as a starting point, my idea is that

1) Where it says Type your Name (text box), it would have about 5 of those fields 2) 4 sets of multiple checkbox options with the last checkbox a text field that is equivalent to "other" 3) Then once the button is clicked, I would like it to output a certain text string based on the above fields that the user has inputed in the textbox and the checkbox options that had been checked (including adding in the "other" field if applicable) that links all these inputs together in a way that looks like (text1)(text2)(text3)_etc

Are there any existing code, links to tutorials for this or instructions on how I can modify the example javascript to accomplish something like this? Note: I am a javascript newbie

thanks!

Answer 1

I created this simple script a while back. Is this what you are after?

Working Fiddle

html

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    First Name :
    <input type="text" name="fName" />
    <br>Last Name :
    <input type="text" name="lName" />
    <br>Gender :
    <input type="radio" name="gender" value="male" />Male
    <input type="radio" name="gender" value="female" />Female
    <br>Occupation :
    <select name="occ">
      <option value="carpenter">Carpenter</option>
      <option value="engineer">Engineer</option>
      <option value="doctor">Doctor</option>
    </select>
    <br>Pref :
    <input type="checkbox" name="one" />One
    <input type="checkbox" name="two" />Two
    <br>
    <textarea id="result"></textarea>
    <br>
    <button id="submitBtn">Submit</button>
    <div id="message" style="color:red"></div>

jquery

$("#submitBtn").click(function () {
    var firstName = $("input[name=fName]").val();
    var latName = $("input[name=lName]").val();
    var gender = $("input[name=gender]:checked").val();
    var occ = $("select[name=occ]").val();
    var pref1 = $("input[name=one]").is(":checked");
    var pref2 = $("input[name=two]").is(":checked");
    $("#result").val(firstName + " " + latName + " " + gender + " " + occ + " " + pref1 + " " + pref2);
    $('#result').focus(function () {
        this.select();
        document.execCommand("copy");
        $("#message").html("Text copied to clipboard!");
    }).mouseup(function () {
        return false;
    });
    $('#result').focus();
});