Populate Text Input With Form Buttons

Question

I have a simple html form where I input a title and description and hit submit. At the top of the page are some paragraphs of text that I often copy and paste into these fields. It's a repetitive task, and the paragraphs are generated dynamically with php.

Can I put a button or link at the end of each paragraph or div that would fill in my form input fields with a script? Then all I would have to do is hit submit. I'm already using jquery on the page too.

EDIT:

<p>Sentence one.  Longer than this</p><!--would like a button here to populate field in form below-->
<p>Sentence two.  Longer than this</p>
<p>Sentence three.  Longer than this</p>

<form id="sampleform" action="actionpage.php" method="post">
Title<input type="text" name="title>
Desc<input type="text" name="title>
<input type="submit" value="Submit"></form>

It has info I don't want to share, but I'll whip up a sample. — turkeyhundt
– turkeyhundt, Commented Feb 1, 2015 at 2:56

GregL · Accepted Answer · 2015-02-01 03:13:47Z

1

If you have some selector that can select all of the <p> tags that contain those paragraphs, you can do something like the following:

$(function() {
  var $descInput = $('input[name=desc]');
  // wrap the text of each paragraph in a span so we can target it easily.
  // Then add a button inside each <p> at the end that will prepopulate that text.
  $('p.prefill').wrapInner('<span class="text"></span>').append('<button class="prefill-sentence">Prefill</button>');
  // Add a click handler for all the newly added buttons
  $('button.prefill-sentence').click(function() {
    // get the contents of the span we used to wrap the sentence with
    var sentence = $(this).prev('.text').text();
    // add that sentence to the current value of the description input
    $descInput.val($descInput.val() + sentence);
  });
});

.prefill-sentence {
  margin-left: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="prefill">Sentence one. Longer than this</p>
<p class="prefill">Sentence two. Longer than this</p>
<p class="prefill">Sentence three. Longer than this</p>
<form id="sampleform" action="actionpage.php" method="post">
  Title
  <input type="text" name="title" />Desc
  <input type="text" name="desc" />
  <input type="submit" value="Submit" />
</form>

(Note I assumed you had a name of "desc" for your description input. Ideally, you can use a class or id to target it easier in the real code).

answered Feb 1, 2015 at 3:13

GregL

38.2k8 gold badges65 silver badges68 bronze badges

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

1 Comment

turkeyhundt Over a year ago

I wasn't even thinking about the buttons appending text, so I could use more than one. But that makes my page more useful. Thanks.

Matt Evanoff · Accepted Answer · 2015-02-01 03:14:08Z

1

Is this what you are looking for?

http://plnkr.co/edit/S3OegSh80UH6oQJPDatr?p=preview

$(function(){
  $('p').each(function(){
      $(this).after('<button>Click<\/button>');    
    });
    
    $('button').on('click', function(){
      var txt = $(this).prev().text();
      $('input').eq(0).val(txt);
    })
});

answered Feb 1, 2015 at 3:14

Matt Evanoff

9664 silver badges9 bronze badges

Comments

Chris Herbert · Accepted Answer · 2015-02-01 03:17:56Z

1

You'll probably want to add something more specific to those php-generated paragraphs/divs, so they can safely be selected and manipulated by JS.

CodePen: http://codepen.io/anon/pen/PwJwmO

HTML

<div class="text-section">
  Sentence one.  Longer than this
</div>
<div class="text-section">
  Sentence two.  Longer than this
</div>
<div class="text-section">
  Sentence three.  Longer than this
</div>

<form id="sampleform" action="actionpage.php" method="post">
  Title<input type="text" name="title">
  Desc<input type="text" name="desc">
  <input type="submit" value="Submit">
</form>

JS

var $text_section = $('.text-section');
var $description_field = $('input[name="desc"]');

$text_section.each(function(){

  var section_text = $(this).text();

  var $autofill_button = $('<button>Autofill</button>');

  $autofill_button.click(function(){
    $description_field.val(section_text);
  });

  $(this).append($autofill_button);

});

answered Feb 1, 2015 at 3:17

Chris Herbert

6,3253 gold badges23 silver badges31 bronze badges

5 Comments

GregL Over a year ago

Advocating the use of globals by not using var will not lead to good JS habits. Also, your buttons do not append to the input, they will replace its existing contents.

Chris Herbert Over a year ago

Leaving off var was an oversight - too much switching between PHP and JS today, From how I read the question, it seems like he wanted the contents replaced rather than appended.

GregL Over a year ago

That's understandable. I just wanted to make sure anyone learning off your code was aware that omitting var was a risky thing to do.

turkeyhundt Over a year ago

I actually did mean for the text to be replaced. But now that I think of it, appending is useful for me too. I will see going forward with this repetitive task which one ends up being the useful one more often. Might take what you all have given me and try to make two buttons after each div. Append and replace. Thanks all for the good info.

Chris Herbert Over a year ago

The vars are now there.

Collectives™ on Stack Overflow

Populate Text Input With Form Buttons

3 Answers 3

1 Comment

Comments

HTML

JS

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

HTML

JS

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related