Solved

Javascript generate change location

Posted on 2016-11-29
12
44 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 54

Expert Comment

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

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
Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

 
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 10

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 54

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
 
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 54

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 54

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 54

Expert Comment

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

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

815 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

11 Experts available now in Live!

Get 1:1 Help Now