Create html element with jquery based on user input

Question

So after searching a while I haven't been able to find an existing question that seems to address this in a way that I can relate to with my specific issue. If there is already a good thread on this that I missed, my apologies in advance and feel free to just post a link to it and call me a dummy!

In plain english, here's the goal: I basically want to generate some html with jquery but with a couple of twists. There will basically be two sets of content that will alternate with every other number, I'll call them content-a and content-b. The user is prompted to enter a number, let's say user enters 4. Upon submitting this value, the markup is then generated like so: (1)content-a (2)content-b (3)content-a (4)content-b.

So here's a bit of code that hopefully will help a little.

I'm aware of how to generate html, but that's about as far as I've gotten so far, my js is definitely a weak point and needs lots of practice:

$("#targetDIV").html("<h1>Hello World!</h1> <p>This is a big fat test</p>");

The markup is simple enough, almost seems pointless to post it in here since it's kind of obvious but I'll do it anyway:

<div id="targetDIV" style="border: 3px solid purple">
</div>

The desired output though would be something like this, based on the value the user chooses but let's just stick with the 4 example:

<div id="targetDIV" style="border: 3px solid purple">
  <!-- Content A -->
  <h1>Hello World!</h1> 
  <p>This is a big fat test</p>

  <!-- Content B -->
  <h1>Hello Universe!</h1> 
  <p>This is a super mega big fat test</p>

  <!-- Content A -->
  <h1>Hello World!</h1> 
  <p>This is a big fat test</p>

  <!-- Content B -->
  <h1>Hello Universe!</h1> 
  <p>This is a super mega big fat test</p>
</div>

Hopefully there's enough here to go on or to at least point me in the right direction, thanks in advance for any wisdom any of you might offer up!

How are they inputting their choice? Submitting? Dynamically? Dropdown? etc... You're already on the right track, but the rest depends upon how you want to obtain their input. If you don't mind me asking also, can you go into more detail on exactly what you're doing? That may help with giving you a better response. — Fata1Err0r
– Fata1Err0r, Commented Aug 4, 2015 at 20:58
Do you just need to alternate contents based on even/odd number? — nurdyguy
– nurdyguy, Commented Aug 4, 2015 at 20:59
It may be helpful to append div's for each number: api.jquery.com/append — Jonathan.Brink
– Jonathan.Brink, Commented Aug 4, 2015 at 21:00
I just realized that every answer forgot to clean up your "targetDIV". So, remember to clean it up before you append elements. Otherwise, if you perform twice "write 2 elements" it'll have at the end 4 elements. — Leo
– Leo, Commented Aug 4, 2015 at 21:38

Maximillian Laumeister · Accepted Answer · 2015-08-04 21:04:27Z

2

Here is a full, working live example that does exactly what you're looking for.

The following code will take a numerical input from the user, then append alternating sets of content according to the number the user inputted:

var num = prompt("Enter a number");
var contenta = "<h1>Hello World!</h1> <p>This is a big fat test</p>";
var contentb = "<h1>Hello Universe!</h1> <p>This is a super mega big fat test</p>";
var targetDiv = $("#targetDIV");

console.log(targetDiv);

for (var i = 0; i < num; i++) {
    if (i % 2 === 0) targetDiv.append(contenta);
    else targetDiv.append(contentb);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="targetDIV" style="border: 3px solid purple">
</div>

answered Aug 4, 2015 at 21:04

Maximillian Laumeister

20.5k10 gold badges62 silver badges84 bronze badges

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

Comments

LexJacobs · Accepted Answer · 2015-08-04 21:00:34Z

0

You could assign the two html strings to the indices of an array.

var str1 = "<h1>Hello World!</h1> <p>This is a big fat test</p>"
var str2 = "<h1>Hello Universe!</h1> <p>This is a super mega big fat test</p>"

var responses = [str1, str2];

Then, you can use a for loop that will repeat as many times as the user's input. And in each iteration of the loop, you could perhaps $('#targetDIV').append(responses[i % 2]);

answered Aug 4, 2015 at 21:00

LexJacobs

2,55118 silver badges21 bronze badges

Comments

JBux · Accepted Answer · 2015-08-04 21:08:14Z

0

You could do something like this.

$('#number').change(function() {
    var ind = $(this).val()
    $('#target-div').append($('#holder div').get(ind))
});

This keeps the HTML in a hidden div, then extracts your desired content by its index. Not the best way but works.

JSFiddle

answered Aug 4, 2015 at 21:08

JBux

1,4049 silver badges17 bronze badges

Comments

Terry · Accepted Answer · 2015-08-04 21:08:20Z

If you are simply alternating between two content sets, you can simply store them as a JS array, say content, and generate/insert them on the fly.

The key is to empty your target element when the user updates the change count, and access the correct element in the array based on the modulus of the array size, i.e. content[i%content.length]. This method allows you to arbitarily increase the size of your content array, and the script will keep inserting elements by going through the list, and repeat from the start when it reaches the end.

$(function() {
  var content = [
    '<h1>Hello World!</h1> <p>This is a big fat test</p>',
    '<h1>Hello Universe!</h1><p>This is a super mega big fat test</p>'
  ];

  $('#count').on('change', function() {
    $('#targetDIV').empty();
    var count = parseInt($(this).val());
    for (var i = 0; i < count; i++) {
      $('#targetDIV').append(content[i%content.length]);
    }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="count" type="number" min="0" step="1" value="0" placeholder="0" />
<div id="targetDIV" style="border: 3px solid purple"></div>

Hasta Tamang · Accepted Answer · 2015-08-04 21:25:20Z

0

I am not an expert js dev but cooked something quick and easy for you.

link to codepen:http://codepen.io/anon/pen/OVdMow

answered Aug 4, 2015 at 21:25

Hasta Tamang

2,2981 gold badge20 silver badges17 bronze badges

Comments

PeterKA · Accepted Answer · 2015-08-04 21:27:29Z

0

$(function() {
    var A = '<!-- Content A --><h1>Hello World!</h1><p>This is a big fat test</p>';

    var B = '<!-- Content B --><h1>Hello Universe!</h1><p>This is a super mega big fat test</p>';
  
    var targetDiv = $('#targetDIV');

    $('#listCount').on('input', function() {
        targetDiv.empty();
        for(var i = 0; i < +this.value; i++) {
            targetDiv.append( i % 2 == 0 ? A : B );
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" name="listCount" id="listCount"/>
<div id="targetDIV" style="border: 3px solid purple">
</div>

edited Aug 4, 2015 at 21:27

answered Aug 4, 2015 at 21:12

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

Comments

Leo · Accepted Answer · 2015-08-04 21:32:30Z

0

function generateElments() {
  var num = $("#numOfElements").val();
  var writeA = true;
  var aElement = "<p>I am <strong>A</strong>!</p>";
  var bElement = "<p>I am <strong>B</strong>!</p>";
  for (var i = 0; i < num; i++) {
    $("#elements-container").append(writeA ? aElement : bElement);
    writeA = !writeA;
  };
};

Here is a working plunker of what you need!

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

answered Aug 4, 2015 at 21:32

Leo

4592 silver badges17 bronze badges

Collectives™ on Stack Overflow

Create html element with jquery based on user input

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related