Solved

Javascript generate change location

Posted on 2016-11-29
12
51 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 56

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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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 56

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 56

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 56

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 56

Expert Comment

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

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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.

Question has a verified solution.

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

Suggested Solutions

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
This article discusses how to create an extensible mechanism for linked drop downs.
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…

735 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