Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 75
  • Last Modified:

Javascript generate change location

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
Jazzy 1012
Asked:
Jazzy 1012
1 Solution
 
Jazzy 1012Author Commented:
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
 
Julian HansenCommented:
Can we see all the code for that form.
0
 
Andrew DerseIT ManagerCommented:
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
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
Jazzy 1012Author Commented:
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
 
Prasadh BaapaatWeb Designer & DeveloperCommented:
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
 
Julian HansenCommented:
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
 
Jazzy 1012Author Commented:
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
 
Julian HansenCommented:
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
 
Jazzy 1012Author Commented:
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
 
Julian HansenCommented:
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
 
Jazzy 1012Author Commented:
Yes thank you!
0
 
Julian HansenCommented:
You are welcome.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now