Too many elements appearing at once using Hide()/Show() - JQuery - javascript

I have been creating a form where there are up to 15 of the same subform:
<div class="form-group" id="PlayerForm1">
<p>Player: </p>
<div class="col-md-10">
<input type="text" id="Player1" value="" />
</div>
</div>
// more of the same forms but different ids etc.
To make more forms appear I am using a button:
<input type="button" name="AddPlayer" id="AddPlayer" value="Add a Player" />
The JQuery for the button:
$(function () {
$("#AddPlayer").click(function () {
for (var i = 0; i < 15; i++) {
if ($("#PlayerForm" + i).is(":hidden")) {
$("#PlayerForm" + i).show();
return;
}
}
});
});
When the button is clicked, two of these forms are shown at once, while I only want one form to be shown every click. Where am I going wrong?
EDIT: full code:
$(function () {
$("#AddPlayer").click(function () {
for (var i = 0; i < 15; i + 1) {
if ($("#PlayerForm" + i).is(":hidden")) {
$("#PlayerForm" + i).show();
return;
}
}
});
$("#RemovePlayer").click(function () {
for (var i = 15; i > 0; i - 1) {
if ($("#PlayerForm" + i).is(":visible")) {
$("#PlayerForm" + i).hide();
return;
}
}
});
});
HTML:
<div id="Players">
<div class="form-group" id="PlayerForm1">
<p>Player: </p>
<div class="col-md-10">
<input type="text" id="Player1" value="" />
</div>
</div>
<div class="form-group" id="PlayerForm2" style="display:none">
<p>Player: </p>
<div class="col-md-10">
<input type="text" id="Player2" value="" />
</div>
</div>
<div class="form-group" id="PlayerForm3" style="display:none">
<p>Player: </p>
<div class="col-md-4">
<input type="text" id="Player3" value="" />
</div>
</div>
<div class="form-group" id="PlayerForm4" style="display:none">
<p>Player: </p>
<div class="col-md-4">
<input type="text" id="Player4" value="" />
</div>
</div>
<div class="form-group" id="PlayerForm5" style="display:none">
<p>Player: </p>
<div class="col-md-4">
<input type="text" id="Player5" value="" />
</div>
</div>
<div class="form-group" id="PlayerForm6" style="display:none">
<p>Player: </p>
<div class="col-md-4">
<input type="text" id="Player6" value="" />
</div>
</div>
<div class="form-group" id="PlayerForm7" style="display:none">
<p>Player: </p>
<div class="col-md-4">
<input type="text" id="Player7" value="" />
</div>
</div>
<div class="form-group" id="PlayerForm8" style="display:none">
<p>Player: </p>
<div class="col-md-10">
<input type="text" id="Player8" value=""/>
</div>
</div>
<div class="form-group" id="PlayerForm9" style="display:none">
<p>Player: </p>
<div class="col-md-10">
<input type="text" id="Player9" value=""/>
</div>
</div>
<div class="form-group" id="PlayerForm10" style="display:none">
<p>Player: </p>
<div class="col-md-10">
<input type="text" id="Player10" value=""/>
</div>
</div>
<div class="form-group" id="PlayerForm11" style="display:none">
<p>Player: </p>
<div class="col-md-10">
<input type="text" id="Player11" value=""/>
</div>
</div>
<div class="form-group" id="PlayerForm12" style="display:none">
<p>Player: </p>
<div class="col-md-10">
<input type="text" id="Player12" value=""/>
</div>
</div>
<div class="form-group" id="PlayerForm13" style="display:none">
<p>Player: </p>
<div class="col-md-10">
<input type="text" id="Player13" value=""/>
</div>
</div>
<div class="form-group" id="PlayerForm14" style="display:none">
<p>Player: </p>
<div class="col-md-10">
<input type="text" id="Player14" value=""/>
</div>
</div>
<div class="form-group" id="PlayerForm15" style="display:none">
<p>Player: </p>
<div class="col-md-10">
<input type="text" id="Player15" value=""/>
</div>
</div>


If you just want one item to be shown, then only select one item. You could do this by finding the first hidden form
$('.form-group').hide()
$("#AddPlayer").click(function () {
$('.form-group:hidden:first').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group" id="PlayerForm1">
<p>Player: </p>
<div class="col-md-10">
<input type="text" id="Player1" value="" />
</div>
</div>
<div class="form-group" id="PlayerForm2">
<p>Player: </p>
<div class="col-md-10">
<input type="text" id="Player2" value="" />
</div>
</div>
<div class="form-group" id="PlayerForm3">
<p>Player: </p>
<div class="col-md-10">
<input type="text" id="Player2" value="" />
</div>
</div>
<div class="form-group" id="PlayerForm4">
<p>Player: </p>
<div class="col-md-10">
<input type="text" id="Player4" value="" />
</div>
</div>
<input type="button" name="AddPlayer" id="AddPlayer" value="Add a Player" />
You can see here ive used your class .form-group as there is no need to target by id.

Related

Jquery validation of fields

I am trying to validate the form using jquery but it's not working.
I am trying to show a red line on-field if it's empty on button click.
Below is the HTML code.
<div id="myModal" class="modal">
<div class="modal-content">
<div id="custom-form">
<div class="col-md-8">
<form name="addData" method="post" id="addData" class="form"
action="#"
data-hasrequired="<?= $block->escapeHtmlAttr(__('* Required Fields')) ?>"
data-mage-init='{"validation":{}}'>
<fieldset class="fieldset">
<legend class="legend"><span><?= $block->escapeHtmlAttr(__('Fill in the fields to place your order.')) ?></span></legend>
<fieldset class="fieldset row">
<div class="fields col-md-6">
<div class="field name required">
<label class="label" for="title"><span><?= $block->
escapeHtmlAttr(__('Full Name')) ?></span></label>
<div class="control">
<input id="bnname" title="Name" value="" class="input-text" type="text" required="true" minlength="15">
</div>
</div>
<div class="field address required">
<label class="label" for="title"><span><?= $block->
escapeHtmlAttr(__('Address')) ?></span></label>
<div class="control">
<input id="bnaddress" title="Address" value="" class="input-text" type="text" data-validate="{'validate-street':true}"
>
</div>
</div>
<div class="field city required">
<label class="label" for="title"><span><?= $block->
escapeHtmlAttr(__('City')) ?></span></label>
<div class="control">
<input id="bntext" title="City" value="" class="input-text" type="text" data-validate="{'validate-street':true}"
>
</div>
</div>
<div class="field telephone required">
<label class="label" for="title"><span><?= $block->escapeHtmlAttr(__('Telephone')) ?></span></label>
<div class="control">
<input id="bntelephone" title="Telephone" value="" class="input-text" data-validate="{'required-number':true}"
type="text" >
</div>
</div>
<div class="field postalcode required">
<label class="label" for="title"><span><?= $block->escapeHtmlAttr(__('Postal code')) ?></span></label>
<div class="control">
<input id="bnpostalcode" title="Postal code" value="" class="input-text" data-validate="{'required-number':true}"
type="text" >
</div>
</div>
</div>
</fieldset>
</fieldset>
<div class="actions-toolbar">
<div class="primary">
<div class="action submit primary buy" title="Order Now"><span><?= $block->
escapeHtmlAttr(__('Order Now')) ?></span></div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
I am not sure how to simply validate these fields using jquery.
Here is the jquery code
var isValid;
$("input").each(function() {
var element = $(this);
if (element.val() == "") {
isValid = false;
}
});
is there any way we can add validation to it ?

I want to create multiple forms based on the user input of a dropdown list

I want to create multiple forms based on user input of a dropdown list. For example, if the user selects 3, then I have to create 3 same forms, one after another. I have the code below:
HTML code
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="selectPassegners">Select the number of passengers:</label>
<select class="form-control" id="passengersSelector">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
</div>
</div>
</div>
<button type="button" onclick="GetSelectedValue()" style="margin-left: 390px;">Get Selected Value</button>
<p id="result" style="text-align: center;"></p>
<div class="container" id="outside-container">
<div class="row">
<div class="col-md-12">
<h1>Passenger Info</h1>
<p>Enter your personal info below. These data will be displayed on your ticket.</p>
<form id="lead-passenger" action="" method="post">
<div class="container" id="inside-container">
<h2>Passenger One (Lead passenger)</h2>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="firstname">First name:</label>
<input type="text" class="form-control" id="firstname" name="firtName">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="lastname">Last name:</label>
<input type="text" class="form-control" id="lastname" name=lastName>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="ptitle">Sex:</label>
<select class="form-control" id="sel-title" name="sex">
<option style="display:none"></option>
<option>Male</option>
<option>Female</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="birthday">Date of birth: </label>
<input type="date" class="form-control" name="birthday">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="phone">Phone:</label>
<input type="tel" class="form-control" id="phone" name="phone" pattern="[6]{1}-[9]{1}-[0-9]{8}">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" name="email">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="address">Address:</label>
<input type="text" class="form-control" id="address" name="address">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="city">City:</label>
<input type="text" class="form-control" id="city" name="city">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="address">Postal code:</label>
<input type="text" class="form-control" id="address" name="postalCode">
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
And JS code I found that shows the result of the dropdown list
function GetSelectedValue() {
var e = document.getElementById("passengersSelector");
var numberOfPassengers = e.options[e.selectedIndex].value;
document.getElementById("result").innerHTML = "You selected " + numberOfPassengers + " passengers";
}
I am still a beginner, so any tips would be appreciated! :)

You can store the contents of your outside-container class in a separate variable. And depending on the user selection, add this variable that many times to the array.
const formMarkup = `<div class="row">
<div class="col-md-12">
<h1>Passenger Info</h1>
<p>Enter your personal info below. These data will be displayed on your ticket.</p>
<form id="lead-passenger" action="" method="post">
<div class="container" id="inside-container">
<h2>Passenger One (Lead passenger)</h2>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="firstname">First name:</label>
<input type="text" class="form-control" id="firstname" name="firtName">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="lastname">Last name:</label>
<input type="text" class="form-control" id="lastname" name=lastName>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="ptitle">Sex:</label>
<select class="form-control" id="sel-title" name="sex">
<option style="display:none"></option>
<option>Male</option>
<option>Female</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="birthday">Date of birth: </label>
<input type="date" class="form-control" name="birthday">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="phone">Phone:</label>
<input type="tel" class="form-control" id="phone" name="phone" pattern="[6]{1}-[9]{1}-[0-9]{8}">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" name="email">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="address">Address:</label>
<input type="text" class="form-control" id="address" name="address">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="city">City:</label>
<input type="text" class="form-control" id="city" name="city">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="address">Postal code:</label>
<input type="text" class="form-control" id="address" name="postalCode">
</div>
</div>
</div>
</div>
</form>
</div>
</div>`
And then
function GetSelectedValue() {
var e = document.getElementById("passengersSelector");
var numberOfPassengers = e.options[e.selectedIndex].value;
var result = [];
for(var i=0; i < numberOfPassengers; i++) {
result.push(formMarkup);
}
document.getElementById("outside-container").innerHTML = result.join('');
}
Also, update your original markup to
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="selectPassegners">Select the number of passengers:</label>
<select class="form-control" id="passengersSelector">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
</div>
</div>
</div>
<button type="button" onclick="GetSelectedValue()" style="margin-left: 390px;">Get Selected Value</button>
<p id="result" style="text-align: center;"></p>
<div class="container" id="outside-container">
</div>

How to create json object that start with the id of the row of the form?

I’m a beginner with javascript and I don’t know if what I’d like to do is possible.
I have a page with a form, like this
<form class="list" id="myForm">
<div class="row" id="company_1">
<div class="form-field">
<label>Title1</label>
<input name="title1" id="title1" type="text" value="" size="40" aria-required="true">
</div>
</div>
<div class="form-field">
<label>Title2</label>
<input name="title2" id="title2" type="text" value="" size="40" aria-required="true">
</div>
</div>
<div class="row" id="company_2">
<div class="form-field">
<label>Title3</label>
<input name="title3" id="title3" type="text" value="" size="40" aria-required="true">
</div>
</div>
<div class="form-field">
<label>Title4</label>
<input name="title4" id="title4" type="text" value="" size="40" aria-required="true">
</div>
</div>
<div class="row" id="company_3">
<div class="form-field">
<label>Title5</label>
<input name="title5" id="title5" type="text" value="" size="40" aria-required="true">
</div>
</div>
<div class="form-field">
<label>Title6</label>
<input name="title6" id="title6" type="text" value="" size="40" aria-required="true">
</div>
</div>
<div class="row justify-content-center">
<div class="col-100 tablet-auto desktop-auto">
<div class="card">
<div class="card-footer">
<span></span><a class="button button-fill" onclick="saveData()">Save</a>
</div>
</div><
</div>
</div>
</form>
I’d like to create a json object that has for first element the id of each row, like this
{
"company_1": {
"title1": ..his value,
"title2": ..his value,
},
"company_2": {
"title3": ..his value,
"title4": ..his value,
},
"company_3": {
"title5": ..his value,
"title6": ..his value,
}
}
I read that there is a function in javascript serializeJSON() but it takes all names togheter.
Thank you in advance

You could use a for .. of loop to iterate the result of a querySelectorAll call:
function saveData() {
const result = {};
for (const input of document.querySelectorAll(".row input")) {
const cat = input.closest(".row").id;
(result[cat] = result[cat] || {})[input.id] = input.value;
}
console.log(result);
}
<form class="list" id="myForm">
<div class="row" id="company_1">
<div class="form-field">
<label for="title1">Title1</label>
<input name="title1" id="title1" type="text" value="this" size="40" aria-required="true">
</div>
<div class="form-field">
<label for="title2">Title2</label>
<input name="title2" id="title2" type="text" value="is" size="40" aria-required="true">
</div>
</div>
<div class="row" id="company_2">
<div class="form-field">
<label for="title3">Title3</label>
<input name="title3" id="title3" type="text" value="a" size="40" aria-required="true">
</div>
<div class="form-field">
<label for="title4">Title4</label>
<input name="title4" id="title4" type="text" value="demo" size="40" aria-required="true">
</div>
</div>
<div class="row" id="company_3">
<div class="form-field">
<label for="title5">Title5</label>
<input name="title5" id="title5" type="text" value="with" size="40" aria-required="true">
</div>
<div class="form-field">
<label for="title6">Title6</label>
<input name="title6" id="title6" type="text" value="inputs" size="40" aria-required="true">
</div>
</div>
<div class="row justify-content-center">
<div class="col-100 tablet-auto desktop-auto">
<div class="card">
<div class="card-footer">
<span></span><a class="button button-fill" onclick="saveData()">Save</a>
</div>
</div>
</div>
</div>
</form>
(run the snippet in fullscreen, so you can see the input form and the object literal that is generated for it.)

This snippet will do as you ask.
That said, the structure you've chosen is not ideal.
$(() => {
var data = {};
[0,1,2].forEach(n => {
let companyId = 'company_' + (n+1);
let titleAId = 'title' + (n*2+1);
let titleBId = 'title' + (n*2+2);
let company = { };
company[titleAId] = $('#' + titleAId).val();
company[titleBId] = $('#' + titleBId).val();
data[companyId] = company;
});
console.log(data);
});
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<form class="list" id="myForm">
<div class="row" id="company_1">
<div class="form-field">
<label for="title">Title1</label>
<input name="title1" id="title1" type="text" value="1" size="40" aria-required="true">
</div>
</div>
<div class="form-field">
<label for="title">Title2</label>
<input name="title2" id="title2" type="text" value="2" size="40" aria-required="true">
</div>
</div>
<div class="row" id="company_2">
<div class="form-field">
<label for="title">Title3</label>
<input name="title3" id="title3" type="text" value="3" size="40" aria-required="true">
</div>
</div>
<div class="form-field">
<label for="title">Title4</label>
<input name="title4" id="title4" type="text" value="4" size="40" aria-required="true">
</div>
</div>
<div class="row" id="company_3">
<div class="form-field">
<label for="title">Title5</label>
<input name="title5" id="title5" type="text" value="5" size="40" aria-required="true">
</div>
</div>
<div class="form-field">
<label for="title">Title6</label>
<input name="title6" id="title6" type="text" value="6" size="40" aria-required="true">
</div>
</div>
<div class="row justify-content-center">
<div class="col-100 tablet-auto desktop-auto">
<div class="card">
<div class="card-footer">
<span></span><a class="button button-fill" onclick="saveData()">Save</a>
</div>
</div>
</div>
</div>
</form>

var divArr = document.getElementsByTagName('div') will give you an array of all he divs that are in a page. You could then loop through the results with divArr.forEach((d,idx)), and use idx + 1 concatenated with the prefix 'company_'
If you are using jQuery, it would be $('div').each() to iterate through them.
If you are reading from database, such as oracle, you could us rownum as your line number and concatenate that with 'company_' and get the number in your result set
If reading from SQL Server, you could SELECT ROW_NUMBER() OVER(ORDER BY fieldName ASC) AS Row. Also, the latest version SQL server has FOR JSON PATH, which can be used to generate the JSON for you.
Again, not sure where your source is based on your question, but one of these may be applicable.

How to append and remove all element under div using jquery

I created a form for product sale. admin can add fields for multiple product's click on add button using jquery and can remove by clicking on remove button. I'm trying to append this using div id but this doesn't work.
here is my html part.
<div class="row" id="dsf">
<div class="col-md-2">
<select name="p_name" class="form-control" id="p_name">
<option value="">-Select Product-</option>
#foreach($products as $product)
<option value="{{$product->product_id}}">{{$product->name}}</option>
#endforeach
</select>
</div>
<div class="col-md-2">
<input type="text" name="p_code" id="p_code" class="form-control" readonly="">
</div>
<div class="col-md-2">
<input type="text" name="unit_pctn" id="unit_pctn" class="form-control" readonly="">
</div>
<div class="col-md-2">
<input type="text" name="u_price" id="u_price" class="form-control" readonly="">
</div>
<div class="col-md-1">
<input type="text" name="ctn" id="ctn" class="form-control">
</div>
<div class="col-md-1">
<input type="text" name="pcs" id ="pcs" class="form-control">
</div>
<div class="col-md-2">
<input type="text" name="t_amt" id="t_amt" class="form-control">
</div>
</div>
Here is my jquery part.
$(document).ready(function(){
$("#addrow").click(function(){
$("#dsf").append();
});
});

if you want to append data after div then use this code
$(document).ready(function(){
$("#addrow").click(function(){
var content = $("#dsf").html();
$('#addrow').append(content);
});
});
this is demo code for test
$(document).ready(function(){
$("#addrow").click(function(){
var content = $("#dsf").html();
$('#addrow').append(content);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" id="dsf">
<div class="col-md-2">
<input type="text" name="p_code" id="p_code" class="form-control" readonly="">
</div>
<div class="col-md-2">
<input type="text" name="unit_pctn" id="unit_pctn" class="form-control" readonly="">
</div>
<div class="col-md-2">
<input type="text" name="u_price" id="u_price" class="form-control" readonly="">
</div>
<div class="col-md-1">
<input type="text" name="ctn" id="ctn" class="form-control">
</div>
<div class="col-md-1">
<input type="text" name="pcs" id ="pcs" class="form-control">
</div>
<div class="col-md-2">
<input type="text" name="t_amt" id="t_amt" class="form-control">
</div>
</div>
<div id="addrow">Click</div>
or you can append after addrow
$(document).ready(function(){
$("#addrow").click(function(){
var content = $("#dsf").html();
$( content ).insertBefore( "#addrow" );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" id="dsf">
<div class="col-md-2">
<input type="text" name="p_code" id="p_code" class="form-control" readonly="">
</div>
<div class="col-md-2">
<input type="text" name="unit_pctn" id="unit_pctn" class="form-control" readonly="">
</div>
<div class="col-md-2">
<input type="text" name="u_price" id="u_price" class="form-control" readonly="">
</div>
<div class="col-md-1">
<input type="text" name="ctn" id="ctn" class="form-control">
</div>
<div class="col-md-1">
<input type="text" name="pcs" id ="pcs" class="form-control">
</div>
<div class="col-md-2">
<input type="text" name="t_amt" id="t_amt" class="form-control">
</div>
</div>
<div id="addrow">Click</div>

Why is the following code scrolling the page down?

This is the code. Basically it adds a sign up form to the page:
var currentTime = new Date($.now())
$(panel).addClass('panel-logged-out')
//this -> $('.am-signup').html('<div class="am-info alert-box secondary">Please sign-in to your CLO account.</div><div class="am-popup" style="top: 596px; left: 0px;"> <div class="am-popup-header"> <div class="am-popup-title"></div></div><div class="am-popup-content"><div id="ajax-link" style="display: block;"><div class="am-layout-two-coll"> <div class="am-layout-two-coll-top"></div><div class="am-coll-left"> <div class="am-coll-content"> <div class="am-form am-login-form"> <form name="login" method="post" action="/amember/login"> <fieldset> <legend> Member Login </legend> <div class="_row" id="recaptcha-_row" style="display: none;" data-recaptcha-theme="red"> <div class="element-title" style="display:none;"></div><div class="element am-element-recaptcha" id="recaptcha-element"> </div></div><div class="_row"> <div class="element-title"> <label class="element-title" for="login"> E-Mail Address </label> </div><div class="element"> <input type="text" id="login" name="amember_login" size="15" value="" autofocus="autofocus"> </div></div><div class="_row"> <div class="element-title"> <label class="element-title" for="pass"> Password </label> </div><div class="element"> <input type="password" id="pass" name="amember_pass" size="15"> </div></div><div class="_row"> <div class="element-title"> <label class="element-title" for="remember"> Remember my password? </label> </div><div class="element"> <input type="checkbox" name="remember_login" value="1"> </div></div><div class="_row"> <div class="element"> <input class="button" type="submit" value="Login"> </div></div></fieldset> <input type="hidden" name="login_attempt_id" value="' + currentTime + '"><input type="hidden" name="amember_redirect_url" value="/amember/signup"> </form> </div></div></div><div class="am-coll-right"> <div class="am-coll-content"> <div class="am-form am-sendpass-form"> <form name="sendpass" method="post" action="/amember/sendpass"> <fieldset> <legend> Lost password?</legend> <div class="_row"> <div class="element-title"> <label for="sendpass"> Enter your E-Mail Address </label> </div><div class="element"> <input type="text" name="login" id="sendpass" size="15"> </div></div><div class="_row"> <div class="element"> <input class="button" type="submit" value="Get Password"> </div></div></fieldset> </form> </div></div></div><div class="am-layout-two-coll-bottom"></div></div></div></div></div>')
For some reason it makes the page scroll to the form, and the problem disappears if I comment the code out. What could be the problem?
This is the live site: http://www.chineselearnonline.com/amember/signup/fullcourse
EDIT:
Here's the formatted version of the commented code:
Not sure if it has something to do with it, though.
<div class="am-info alert-box secondary">Please sign-in to your CLO account.</div>
<div class="am-popup" style="top: 596px; left: 0px;">
<div class="am-popup-header">
<div class="am-popup-title"></div>
</div>
<div class="am-popup-content">
<div id="ajax-link" style="display: block;">
<div class="am-layout-two-coll">
<div class="am-layout-two-coll-top"></div>
<div class="am-coll-left">
<div class="am-coll-content">
<div class="am-form am-login-form">
<form name="login" method="post" action="/amember/login">
<fieldset>
<legend> Member Login </legend>
<div class="_row" id="recaptcha-_row" style="display: none;" data-recaptcha-theme="red">
<div class="element-title" style="display:none;"></div>
<div class="element am-element-recaptcha" id="recaptcha-element"> </div>
</div>
<div class="_row">
<div class="element-title">
<label class="element-title" for="login"> E-Mail Address </label>
</div>
<div class="element">
<input type="text" id="login" name="amember_login" size="15" value="" autofocus="autofocus"> </div>
</div>
<div class="_row">
<div class="element-title">
<label class="element-title" for="pass"> Password </label>
</div>
<div class="element">
<input type="password" id="pass" name="amember_pass" size="15"> </div>
</div>
<div class="_row">
<div class="element-title">
<label class="element-title" for="remember"> Remember my password? </label>
</div>
<div class="element">
<input type="checkbox" name="remember_login" value="1"> </div>
</div>
<div class="_row">
<div class="element">
<input class="button" type="submit" value="Login"> </div>
</div>
</fieldset>
<input type="hidden" name="login_attempt_id" value="' + currentTime + '">
<input type="hidden" name="amember_redirect_url" value="/amember/signup"> </form>
</div>
</div>
</div>
<div class="am-coll-right">
<div class="am-coll-content">
<div class="am-form am-sendpass-form">
<form name="sendpass" method="post" action="/amember/sendpass">
<fieldset>
<legend> Lost password?</legend>
<div class="_row">
<div class="element-title">
<label for="sendpass"> Enter your E-Mail Address </label>
</div>
<div class="element">
<input type="text" name="login" id="sendpass" size="15"> </div>
</div>
<div class="_row">
<div class="element">
<input class="button" type="submit" value="Get Password"> </div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<div class="am-layout-two-coll-bottom"></div>
</div>
</div>
</div>
</div>

Autofocus?
If you put autofocus in the username input field, the browser makes autofocus inmediately
<input .... autofocus="autofocus">
Remove it and it works.

Categories

Resources