Solved

Javascript generate change location

Posted on 2016-11-29
12
28 Views
Last Modified: 2016-11-30
seee.png
My output is the photo above, how could I make my fields (after I click add site, they generate) to be right under the first main field?
JS code:
function add_fields() {
    document.getElementById('add').innerHTML += '<span><input type="text"></span> <br>';
}

Open in new window


HTML:
<form style= "font-size:16px;">
  					Site URL: 
  					<input type="text" name="firstname" style= "margin-right:10px;">         
  					Auto Approvements
  					<input type="checkbox" name="site" value="Enable"> Enabled
					<input type="checkbox" name="site" value="Disable"> Disabled
  					
  					</form>

Open in new window

0
Comment
Question by:Jasmine Ikhreishi
12 Comments
 
LVL 1

Author Comment

by:Jasmine Ikhreishi
ID: 41905969
Also how can I also generate this:
                                Auto Approvements
                                <input type="checkbox" name="site" value="Enable"> Enabled
                              <input type="checkbox" name="site" value="Disable"> Disabled
with the field box?
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41905971
Can we see all the code for that form.
0
 
LVL 1

Expert Comment

by:Andrew Derse
ID: 41906462
It appears that you are using a style sheet to help center everything. The code you are generating via javascript is generating the input field and centering it. In order for it to line up properly, you need to add the additional fields that first row has...which is your second question.

Without seeing all of the code for that form/page it would be hard to give you an exact answer to this. Would we be able to see all the code that is rendering this?
0
 
LVL 1

Author Comment

by:Jasmine Ikhreishi
ID: 41907105
This is the whole code:
    <section class="bg-primary" id="about">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2 text-center">
                    <h2 class="section-heading">Add a Site!</h2>
                    <hr class="light">
                    <p class="text-faded">
                    <div id= "add">
                    <form style= "font-size:16px;">
  					Site URL: 
  					<input type="text" name="firstname" style= "margin-right:10px;">         
  					Auto Approvements
  					<input type="checkbox" name="site" value="Enable"> Enabled
					<input type="checkbox" name="site" value="Disable"> Disabled
  					
  					</form>
  					</div>
                    </p>
                    <input type="button" id="more_fields" onclick="add_fields();" class="page-scroll btn btn-default btn-xl sr-button" value="Add another site" />
                    <a href="#" class="page-scroll btn btn-default btn-xl sr-button">Generate Code</a>
                </div>
            </div>
        </div>
    </section>

Open in new window


Im using a bootstrap template
0
 
LVL 9

Expert Comment

by:Prasadh Baapaat
ID: 41907160
as per your code on line 4 there is a css class which is center aligning the content

<div class="col-lg-8 col-lg-offset-2 text-center">

so all elements in your image are centered.

you need to set it to "text-left"

another thing I noticed is that the buttons "Add Another SIte" and "Generate Code" are OUTSIDE of the <form & </form> tag...

you can also set left alignment to individual inputs.

actually just looking at code you typed is not giving a full picture of page... its easy to suggest solutions if we have a URL to look at.
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41907172
The code does not match the image - there are a few controls short.

Here is a sample using your code with the text-center class removed - is that the effect you are looking for?
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 1

Author Comment

by:Jasmine Ikhreishi
ID: 41907173
see1.pngI made a few changes this is what I got with, still theres a small alignment issue.

JS code:
<script>
function add_fields() {
    document.getElementById('add').innerHTML += '<span style= "font-size:15px;">Site URL: <input type="text" style= "margin-right: 15px;width:220px;font-size:16px;"> Auto Approvements: <input type="radio" name="site" value="enable"> Enabled <input type="radio" name="site" value="disable"> Disabled <br></span>\r\n';
}
</script>

Open in new window

Html:
 <section class="bg-primary" id="about">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2 text-center">
                    <h2 class="section-heading">Add a Site!</h2>
                    <hr class="light">
                    <p class="text-faded">
                    <div id= "add">
                    <form style= "font-size:16px;">
  					Site URL: 
  					<input type="text" name="firstname" style= "margin-right:10px;">         
  					Auto Approvements
  					
  					<input type="radio" name="site" value="enable"> Enabled
 				    <input type="radio" name="site" value="disable"> Disabled
  					
  					</form>
  					</div>
                    </p>
                    <input type="button" id="more_fields" onclick="add_fields();" class="page-scroll btn btn-default btn-xl sr-button" value="Add another site" />
                    <a href="#" class="page-scroll btn btn-default btn-xl sr-button">Generate Code</a>
                </div>
            </div>
        </div>
    </section>

Open in new window


I like the alignment of the main Site URL, the first one is always there, once you click add site, more keep adding , how could I just make them align the same?
0
 
LVL 51

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 41907184
You need to change your markup - the way you have it you are appending the new content outside of the form which is not going to work.

Here is another sample that does what I think you want. I am using jQuery .clone() to make things a bit easier
CSS
<style type="text/css">
#add {
  list-style: none;
  padding: 0;
  margin: 0;
}
</style>

Open in new window

HTML
    <section class="bg-primary" id="about">
      <div class="container">
        <div class="row">
          <div class="col-lg-8 col-lg-offset-2 text-left">
            <h2 class="section-heading">Add a Site!</h2>
            <hr class="light">
              <form style= "font-size:16px;">
                <ul id= "add">
                  <li>
                    Site URL: 
                    <input type="text" name="firstname" style= "margin-right:10px;">         
                    Auto Approvements
                    <input type="checkbox" name="site" value="Enable"> Enabled
                    <input type="checkbox" name="site" value="Disable"> Disabled
                  </li>
                </ul>
              </form>
            <input type="button" id="more_fields" onclick="add_fields();" class="page-scroll btn btn-default btn-xl sr-button" value="Add another site" />
            <a href="#" class="page-scroll btn btn-default btn-xl sr-button">Generate Code</a>
          </div>
        </div>
      </div>
    </section>

Open in new window

jQuery
<script>
function add_fields() {
  $('#add li:first-child').clone().appendTo($('#add'));
}
</script>

Open in new window

Working sample here
0
 
LVL 1

Author Comment

by:Jasmine Ikhreishi
ID: 41907192
Can't I have a break line between each? And I wanted them to have the same alignment as before now it looks like this:

see2.png
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41907319
Update to align buttons and <h2> center and to give some margins between items
CSS
<style type="text/css">
#add {
  list-style: none;
  padding: 0;
  margin: 0;
}
#add li {
	margin: 10px 0;
}
</style>

Open in new window

HTML
   <section class="bg-primary" id="about">
      <div class="container">
        <div class="row">
          <div class="col-lg-8 col-lg-offset-2 text-left">
            <h2 class="section-heading text-center">Add a Site!</h2>
            <hr class="light">
            <form style= "font-size:16px;">
              <ul id= "add">
                <li>
                  Site URL: 
                  <input type="text" name="firstname" style= "margin-right:10px;">         
                  Auto Approvements
                  <input type="checkbox" name="site" value="Enable"> Enabled
                  <input type="checkbox" name="site" value="Disable"> Disabled
                </li>
              </ul>
            </form>
			<div class="text-center">
				<input type="button" id="more_fields" onclick="add_fields();" class="page-scroll btn btn-default btn-xl sr-button" value="Add another site" />
				<a href="#" class="page-scroll btn btn-default btn-xl sr-button">Generate Code</a>
			</div>
          </div>
        </div>
      </div>
    </section>

Open in new window

Updated sample here
0
 
LVL 1

Author Comment

by:Jasmine Ikhreishi
ID: 41907322
Yes thank you!
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41907422
You are welcome.
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now