button populates (multiple) fields in HTML/JQuery form

Question

I'm redesigning a signup form for my company. Unfortunately, I feel like I'm in over my head on this one. lol.

What I need to do is create a web form for a mobile themed site. I've got the site more or less functioning using JQuery Mobile at the moment, but I'm struggling with the form input aspect of it all. One of the things this form needs to do is be able to populate 3 fields when the user taps a button.

So for example, if I have a button that says "Turkey, Mashed Potato & Wine"... when the user taps that button, the 3 fields below it would populate with the values "Turkey", "Mashed Potato" and "Wine".

Is there any way this is possible?

You should really consider something like Wufoo with what you're describing and your level of comfort. Here's an online form building you can test out. Note, I have no affiliation with company and have never purchased any of their products. — Jared Farrish
– Jared Farrish, Commented Jun 15, 2012 at 21:08
There's also JotForm, FormSmarts, Formstack, you get the drift. — Jared Farrish
– Jared Farrish, Commented Jun 15, 2012 at 21:16

VisioN · Accepted Answer · 2012-06-15 21:11:26Z

2

I would do it as follows, if only I got you right.

HTML:

<form>
    <input type="text">
    <input type="text">
    <input type="text">
</form>
<button data-val="Turkey|Mashed Potato|Wine">Turkey, Mashed Potato & Wine</button>

JavaScript:

$("button").on("click", function() {
    var val = $(this).data("val").split("|");
    $("form input").val(function(i) {
        return val[i] || "";
    });
});

DEMO: http://jsfiddle.net/8aHtP/

answered Jun 15, 2012 at 21:11

VisioN

146k35 gold badges287 silver badges291 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sachleen · Accepted Answer · 2012-06-15 21:10:31Z

1

You can use jQuery's .val() to set the value of a textbox.

<div id="pop">Turkey, Mashed Potato &amp; Wine</div>
<input type="text" id="f1" />
<input type="text" id="f2" />
<input type="text" id="f3" />

$("#pop").click(function() {
    $("#f1").val("Turkey");
    $("#f2").val("Mashed Potato");
    $("#f3").val("Wine");
});

Demo

answered Jun 15, 2012 at 21:10

sachleen

31.2k8 gold badges81 silver badges75 bronze badges

Comments

swatkins · Accepted Answer · 2012-06-15 21:12:49Z

Try this:

$(function(){
  $('#my_button').on('click', function(e){
    $('#field_one').val('Turkey');
    $('#field_two').val('Mashed Potato');
    $('#field_three').val('Wine');
  });
});

I'm assuming, however, that you would need this to work dynamically based on the text of the button. If so, you'd have to work out some string manipulation to get the values:

$(function(){
  $('#my_button').on('click', function(e){
    var parts = $(this).attr('value').split(',');

    // do some more work here to clean up the values, 
    // you'd need the values separated with commas all
    // the way through (ie: Turkey, Mashed Potato, Wine)

    $('#field_one').val(parts[0]);
    $('#field_two').val(parts[1]);
    $('#field_three').val(parts[2]);
  });
});

nolabel · Accepted Answer · 2012-06-15 21:35:38Z

1

Yes, this is possible. One way to do it is place the values in an data attribute and append them.

Working example: http://jsfiddle.net/vj3Zg/

answered Jun 15, 2012 at 21:35

nolabel

1,1574 gold badges18 silver badges26 bronze badges

Collectives™ on Stack Overflow

button populates (multiple) fields in HTML/JQuery form

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related