create textboxes dynamically using dropdown box and format the input as desired(specific font size,family,alignment etc.)

Question

0.00/5 (No votes)

See more:

I am trying to create a website to take input in textboxes created dynamically (as many as the user wants can should be created/removed using a drop down box for headings,paragraphs,subheading) and display the input text sequentially in a particular format(with specific font size font family etc.).I have been successful in creating two textboxes that format the data as required.Kindly help me in implementing the same for dynamically created textboxes.

This is my code:-

XML

<!doctype html>
<html lang="en">
<head id="head1" runat="server">
  <meta charset="utf-8">
  <title>Department of Computer Science Christ University:560029</title>
     <script src="jquery-1.11.1.js"></script>
    <script type="text/javascript"></script>
  <style>
  .c{
      font-family:'Times New Roman';
      font-size:18px;
      text-align:justify;
    color: black;
    margin-left:144px;
    margin-right:96px;
  margin-bottom:96px;
  }
      .ct {
          font-family- "Times new roman";
          font-size: 16;
          text-align:center;
          color: black;
          margin-left: 144px;
          margin-right: 96px;
      }
  </style>
 <script>
     function add(type) {

         var element = document.createElement("input");

         
         element.setAttribute("type", "input");
         element.setAttribute("value", "NULL");
         element.setAttribute("name", "newbox");
         element.setAttribute("onclick", print());

         var foo = document.getElementById("foobar");

         foo.appendChild(element);

     }


</script>


</head>
<body>

 <input id="titlecontent" type="text" value="S.T.E.P.D.A.D.">
    <h1 class="ct"></h1>

<input id="para1" type="text" value="some text">
<p class="c"></p>

    <script>

        $("#titlecontent")
            .keyup(function () {
                var value = $(this).val();
                $("h1").text(value);
            })
        .keyup();

        $("#para1")
          .keyup(function () {
              var value = $(this).val();
              $("p").text(value);
              /*var txt3 = document.createElement('p');
              txt3.textContent = value;
              document.getElementById("updatediv").appendChild(txt3);*/
          })
          .keyup();

</script>
    <!--<button onclick="appendText()">append</button>-->
<!--<input type="button" id="btn1"  value="PRINT" onclick="print()"-->
   <script>
       $(document).ready(function () {
           $("#button1").click(function () {
               $("#button1").hide();
               $("#titlecontent").hide();
               $("#para1").hide();
               print();
               $("#button1").show();
               $("#titlecontent").show();
               $("#para1").show();
           });
       });

    </script>
    <button id="button1">PRINT</button>
    </body>
</html>

Posted 19-Jan-15 7:16am

User 11351964

Add a Solution

Comments

ZurdoDev 19-Jan-15 14:38pm

Where are you stuck?

[no name] 19-Jan-15 14:48pm

I am unable to create multiple text boxes using a drop down box for headings paragraphs,subheadings dynamically that have same formatting capabilities as the above ones

ZurdoDev 19-Jan-15 14:50pm

But why? Why can't you create them? Are you wanting to create them via JavaScript or during postbacks using C#?

[no name] 19-Jan-15 14:54pm

Using JavaScript. I am new to coding with Java script and jquery and have to complete this as a part of my project. Therefore I am having problems taking multiple inputs from the user and displaying the input as a formatted output

ZurdoDev 19-Jan-15 20:02pm

I'd suggest google for how to create textbox in javascript. Should be quite a few examples.

[no name] 19-Jan-15 14:56pm

I am facing a problem in generating dynamic p tags for every text box created with unique ids also linking them with the textbox that takes input and finally applying the desired format on the input and displaying it in printable form.

[no name] 19-Jan-15 16:54pm

Your add function is try to add a control to an element that does not exist.
var foo = document.getElementById("foobar"); <-- there is no element foobar
foo.appendChild(element); <-- so this will always fail.
but then you never call add('parameter never used');
Use a Developer tool to see where you are getting errors. (e.g. firebug)

2 solutions

Solution 2

A little change is needed to achieve it, here is the modified click function:

XML

$("#add").click(function () {
      var elem=$("#dd1").val();
          var str=" ";
          var str2=" ";
          if(elem=="heading")
          {
              str="<span>Heading</span><textarea rows='4' cols='30' onkeyup='func1(this.id);' class='' id='t_"+elem+counter+"'></textarea>";
              str2 = "<h1 id='h_" + elem + counter + "'class='ct'></h1>";
          }
          else if(elem=="paragraph")
          {
              str = "<span>Paragraph</span><textarea rows='4' cols='30' onkeyup='func2(this.id);' class='' id='t_" + elem + counter + "'></textarea> ";
              str2 = "<p id='p_" + elem + counter + "' class='c'></p>";
          }

          $("#mainContent").append(str);
          $("#printArea").append(str2);
          ++counter;
      });

Posted 29-Jan-15 0:12am

Nilendra Nath

Comments

[no name] 29-Jan-15 6:30am

The issue with this is that even if I enter input on the different lines in the text area the output comes in the same line. For example if I have to display data in multiple bullet points I have to create a new paragraph textarea for each point to be able to display it on different lines. That is where I was facing the problem.

Nilendra Nath 5-Feb-15 7:37am

This is because you have the output control of type <p>, so when data is copied from text area to paragraph, it get displayed in single line.
you can do something like this:
/*------------------*/
str2 = "<textarea id='p_" + elem + counter + "' style='border:none' class='c'></textarea>";
/*------------------*/
otherwise more coding can be done in func1 and func2 to display data in <li>

if you have need and not able to do, let me know, I will help.

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Nilendra Nath · Accepted Answer · 2015-01-20T04:17:00

Here is the code you are looking for, let me know for any clarification;
------------------------------------------------------------------------------

XML

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<style>
.c{
      font-family:'Times New Roman';
      font-size:18px;
      text-align:justify;
    color: black;
    margin-left:144px;
    margin-right:96px;
  margin-bottom:96px;
  }
    .ct {
        font-family: "Times new roman";
        font-size: 16px;
        text-align: center;
        color: black;
        margin-left: 144px;
        margin-right: 96px;
    }

</style>

C#

<script>
    var counter = 1;
 $(document).ready(function () {
           $("#button1").click(function () {
               $("#button1").hide();
               $("#mainContent").hide();
               $("#dd1").hide();
               $("#add").hide();
               print();
               $("#button1").show();
               $("#mainContent").show();
               $("#dd1").show();
               $("#add").show();
           });

      $("#add").click(function () {
      var elem=$("#dd1").val();
          var str=" ";
          var str2=" ";
          if(elem=="heading")
          {

XML

str="<span>Heading</span><input type='text' onkeyup='func1(this.id);' class='' id='t_"+elem+counter+"'></input>";
              str2 = "<h1 id='h_" + elem + counter + "'class='ct'></h1>";
}
          else if(elem=="paragraph")
          {

          
              str = "<span>Paragraph</span><input type='text' onkeyup='func2(this.id);' class='' id='t_" + elem + counter + "'></input> ";
              str2 = "<p id='p_" + elem + counter + "' class='c'></p>";
}
$("#mainContent").append(str);
          $("#printArea").append(str2);
          ++counter;
      });
       });

C#

function func1(id)
 {
         var value = $("#"+id).val();
         var id2 = id.split("_")[1];
         $("#h_"+id2).text(value);
}
function func2(id)
{
    var value = $("#" + id).val();
    var id2 = id.split("_")[1];
    $("#p_" + id2).text(value);
}


</script>

XML

<select id="dd1">
    <option>-----Select-----</option>
    <option value="heading">Heading</option>
    <option value="paragraph">Paragraph</option>
</select>
<button id="add" onclick="">Add</button>

<button id="button1">PRINT</button>
<div id="mainContent"></div>
<div id="printArea"></div>