We Keep Coding

How to submit data in a form with javascript

I spent hours looking for, but I couldn't find a solution. I'v to automatize a human job with JS, and I ran some tests in aleatory sites and it works. But in a specific site, i'm having the following problem on the login page:
OBS: I'm doing this in browser console, for tests.
var username = window.document.getElementById("username")
undefined
var password = window.document.getElementById("password")
undefined
var signin = window.document.querySelector(".splButton-primary.btn")
undefined
username.value = "usuariovalue"
"usuariovalue"
password.value = "passwordvalue"
"password value"
signin.click()
but, i'm receiving this msg:>common.js:27 POST https://siteexemple/en-US/account/login 401 (Unauthorized). If I fill the username and password manually in site and after, click on the button using the JS, it works.
I can't see the difference.
Follow the block of code of the site:
<form method="post" class="loginForm" action="/en-US/account/login">
<div style="display: none" data-cid="view200" class="account-login-firsttime" data-view="views/account/login/FirstTime" data-render-time="0">
<h2>First time signing in?</h2>
<p>If you've forgotten your username or password, please contact your Splunk administrator.</p>
<table>
<tbody><tr>
<td>username</td>
<td>admin</td>
</tr>
<tr>
<td>password</td>
<td>changeme</td>
</tr>
</tbody>
</table>
</div>
<fieldset>
<div class="control account-login-textcontrol control-default" data-cid="view197" data-view="views/account/login/TextControl" data-name="username" data-render-time="0">
<span class="uneditable-input " data-role="uneditable-input" style="display:none"></span>
<input type="text" name="username" class=" " value="" autocomplete="off" id="username" placeholder="Username"> </div>
<div class="control account-login-textcontrol control-default" data-cid="view199" data-view="views/account/login/TextControl" data-name="password" data-render-time="0">
<span class="uneditable-input " data-role="uneditable-input" style="display:none"></span>
<input type="password" name="password" class=" " value="" autocomplete="off" id="password" placeholder="Password"> </div><input class="splButton-primary btn" type="submit" value="Sign in">
<input type="hidden" name="cval" value="1900007162">
<input type="hidden" name="return_to" value="/en-US/">
</fieldset>
</form>
Can you, help me? I'm starting with JS.

How can I append new/updated innerHTML to a p tag that doesn't have a class or id?

I'm writing out a test script where I'm wanting to select an existing p tag in a form and update the copy being used. I don't have access to the original code and having to use JavaScript only to make updates until it's approved by the client's tech lead and test results.
My original code is:
var p = document.querySelector(".form-bg form p").innerHTML;
p.innerHTML = 'By hitting Get Your Quote, I agree to receive autodialed calls, to include scheduling reminders, and texts from this company.';
However, the p tag's content isn't being updated and hitting barriers stating the code is undefined or isn't a function.
So, I attempted using .appendChild() with a thought process of creating a new element and hiding the existing if I can't update the existing copy.
My updated code using .appendChild() is:
let updatedCopy = document.createElement('p');
updatedCopy.id = 'testCopy';
updatedCopy.innerHTML = 'By hitting Get Your Quote, I agree to receive autodialed calls, to include scheduling reminders, and texts from this company';
document.getElementsByClassName('form-bg').appendChild(updatedCopy);
I've tried running this within the browser, but haven't been successful yet. Any guidance would be greatly appreciated! :)
Lastly, here's the HTML snippet with the form that's needing to be modified:
<div id="lightbox_shell">
<div class="test-w_contact-lightbox-individuals">
<div class="form-main-bg">
<div class="close-bg">
<button class="close" type="button">close</button>
</div>
<!-- Form Starts Here -->
<div class="form-bg">
<div class="legend">
Provide your information so an agent can reach you.
</div>
<form method="post">
<input name="offering" type="hidden" value="Individual"> <input name="language" type="hidden" value="English">
<div class="contact-fields">
<div class="flex_columns">
<div class="flex_2col">
<span class="input-text firstname" data-manual="1"><input class="required" id="firstname" maxlength="150" name="firstname" placeholder="First Name *" title="First Name" type="text"></span>
</div>
<div class="flex_2col">
<span class="input-text lastname" data-manual="1"><input class="required" id="lastname" maxlength="150" name="lastname" placeholder="Last Name *" title="Last Name" type="text"></span>
</div>
<div class="clearfloat"></div>
</div>
<div class="flex_columns">
<div class="flex_2col">
<span class="input-text phone" data-manual="1"><input class="required" id="phone" maxlength="12" name="phone" placeholder="Phone Number *" title="Phone Number" type="tel"></span>
</div>
<div class="flex_2col">
<span class="input-text zipcode" data-manual="1"><input class="required" id="zipcode" maxlength="5" name="zipcode" placeholder="Zip Code *" title="Zip Code" type="tel"></span>
</div>
<div class="clearfloat"></div>
</div>
<div class="flex_columns">
<div class="flex_2col">
<span class="input-text email" data-manual="1"><input class="required" id="email" maxlength="255" name="email" placeholder="Email *" title="Email" type="email"></span>
</div>
<div class="flex_2col">
<div class="requirement-info">
* fields are required
</div>
<ul class="misc">
<li>
<p>Would you like an agent to call asap?</p><label class="checkbox"><input name="yesmeet" type="checkbox"> Yes</label> <label class="checkbox"><input name="nomeet" type="checkbox"> No</label>
</li>
</ul>
</div>
<div class="clearfloat"></div>
</div>
</div>
<p style="font-size: 13px;line-height: 100%;margin: 15px 0 14px;">By hitting submit, I agree to receive autodialed calls, to include scheduling reminders, and texts from this company.</p>
</form>
</div>
<div class="raq-complete-panel">
<div class="thanks">
<div class="title">
Thank You!
</div>
<p>An agent will call you<br>
<span class="eta">within 15 minutes.</span></p>
</div>
<div class="info">
<p>Your confirmation number is <span class="number"></span>.</p>
<p>If you have any questions regarding your request, contact us at <a class="textlink" href="mailto:email#test.com">email#test.com</a></p>
<p>Please provide your confirmation number listed above for reference.</p>
</div>
</div>
<div class="clearfloat"></div>
</div>
</div>
</div>

Your first try was so close. You want your assignment to be like this:
var p = document.querySelector(".form-bg form > p");
then you can set the innerHTML.
p.innerHTML = "Your new text";

Something is causing my page to keep loading in the center?

I've been able to narrow down where the 'error' occurs, which is within the credit card form section:
<div class="form-group">
<label for="cardNumber">Your card number</label>
<div class="input-group">
<input
type="tel"
class="form-control card-number input-medium"
name="cardNumber"
placeholder="Enter Your Valid Card Here"
autocomplete="cc-number"
required autofocus
value=""
/>
<span class="input-group-addon"><i class="fa fa-credit-card"></i></span>
</div>
</div>
<div class="form-group">
<label for="cardNumber">Your Email Address</label>
<div class="input-group">
<input
type="email"
class="form-control"
name="email"
placeholder="Enter Your Valid Email Here"
required autofocus
value=""
/>
<span class="input-group-addon"><i class="fa fa-envelope-o"></i></span>
</div>
</div>
My suspicious are that the form I'm using (which uses the Stripe API) has a customer error reporting feature, so if for example the customer's card has expired then an error pops up just above the 'form-group' code shown above - and also in the php and javascript there is a reference to .index.php which is at the bottom of the page here:
<script>
$('.close').click(function(){
window.location.href='index.php';
});
</script>
But that's only my hunch....
Any ideas why this page is behaving like this? Thanks!

Answer = remove 'autofocus' - thanks to #Rick

3 Way Binding in Angular & Firebase causing lag in input boxes

I am binding a users profile data to a variable like this:
// Profile Management
var user = firebase.child('users').child(userID);
$firebaseObject(user).$bindTo($scope, 'user');
Here is the HTML:
<div ng-show="firebaseUser">
<h1>Your Profile</h1>
<div class="contentContainer">
<div class="profilePicture">
<img src="images/noProfile.png">
</div>
<div class="personalInfo">
<input type="text" ng-model="user.Name" ng-change="user.$save()" type="text"
label="Name" placeholder="Your Name.." name="userName">
<input type="text" ng-model="user.Phone" ng-change="user.$save()" type="text"
label="Phone" placeholder="Your Phone #.." name="userPhone">
<label>Email</label>
{{firebaseUser.password.email}}
</div>
</div>
</div>
It's working, when I type into the profile, it automatically updates the Firebase database, however there is severe lag, it's extremely noticeable if you type to fast a lot of words get skipped, this happens so much that it's un-usable.
What am I doing wrong?

User this. ng-model-options="{debounce: {'default': 500} } the scope cycle gonna be triggered will delay by 500ms. You can also adjust it to fit with the usage of the app. Cheer!
<input type="text" ng-model="user.Name" ng-change="user.$save()" type="text"
ng-model-options="{debounce: {'default': 500} }"
label="Name" placeholder="Your Name.." name="userName">
<input type="text" ng-model="user.Phone" ng-change="user.$save()" type="text"
ng-model-options="{debounce: {'default': 500} }"
label="Phone" placeholder="Your Phone #.." name="userPhone">

Creating a contact form for Phonegap apps

I´m building a mobile app in Jquery Mobile using phonegap to compile it to a native app.
Inside that app is a contact form and I can´t get it to work. I found this solution in stack overflow but even after doing exactly what the solution said, it throws back "Please fill all fields" alert.
Following are the codes i'm using.
HTML
<form action="#" method="get">
<div class="form-element">
<label for="FirstName">Firstname</label>
<input id="FirstName" name="FirstName" type="text" placeholder="required" required />
</div>
<div class="form-element">
<label for="LastName">Lastname</label>
<input id="LastName" name="LastName" type="text" placeholder="required" required />
</div>
<div class="form-element">
<label for="Email">Email</label>
<input id="Email" name="Email" type="email" placeholder="optional" />
</div>
<div class="form-element">
<label for="MessageText">Message</label>
<textarea id="MessageText" name="MessageText" placeholder="required" rows="5" required ></textarea>
</div>
<input type="button" value="submit"/>
</form>
javascript
// When the document has loaded...
$(document).ready(function(){
$('input[type="button"][value="submit"]').click(function() {
$.post('http://cafedeweb.com/www/handler.php', {
FirstName: $('#FirstName').val(),
LastName: $('#LastName').val(),
Email: $('#Email').val(),
MessageText: $('#MessageText').val()
// HTML function
}, function (html) {
// Place the HTML in a astring
var response=html;
// PHP was done and email sent
if (response=="success") {
alert("Message sent!");
} else {
// Error postback
alert("Please fill all fields!");
return false;
}
});
});
});

Your post url returns a 404 (http://cafedeweb.com/www/handler.php).
Make sure that you post your form to a webserver with a working php handler.