Solved

Javascript generate change location

Posted on 2016-11-29
12
57 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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 58

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
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 
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 58

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 58

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 58

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 58

Expert Comment

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

Featured Post

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

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

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article discusses how to implement server side field validation and display customized error messages to the client.
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…
Suggested Courses

623 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