Develop Reference

Unable to read event Content from a form in HTML

I am new to HTML and Javascript. I was working on creating a basic login screen.
As I am trying to print the value of the email and the password in the console, I get nothing. Can someone help me out?
document.querySelector('.form').addEventListener('submit', (e) => {
e.preventDefault();
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
console.log(email, password);
});
<div class="login-form">
<h2 class="heading-secondary ma-bt-lg">Log into your account</h2>
<form class="form"></form>
<div class="form__group">
<label class="form__label" for="email">Email address</label
><input
class="form__input"
id="email"
type="email"
placeholder="you#example.com"
required=""
/>
</div>
<div class="form__group ma-bt-md">
<label class="form__label" for="password">Password</label
><input
class="form__input"
id="password"
type="password"
placeholder="••••••••"
required=""
minlength="8"
/>
</div>
<div class="form__group">
<button class="btn btn--green">Login</button>
</div>
</div>
<!-- <script src="/js/login.js"></script> -->

That's because <form class="form"></form> is empty, you should put the inputs inside it.
<div class="login-form">
<h2 class="heading-secondary ma-bt-lg">Log into your account</h2>
<form class="form">
<div class="form__group"><label class="form__label" for="email">Email address</label><input class="form__input" id="email" type="email" placeholder="you#example.com" required="" /></div>
<div class="form__group ma-bt-md"><label class="form__label" for="password">Password</label><input class="form__input" id="password" type="password" placeholder="••••••••" required="" minlength="8" /></div>
<div class="form__group">
<button class="btn btn--green">Login</button>
</div>
</form>
</div>

Would like to redirect users depending on the radio button value

I am trying to append a string to the description field and redirect users depending on the radio button they choose to click on. In this case, a customer clicks on "Cleardent Customer" radio button and upon submission, a string should be attached to the description field and it should direct them to a specific page.
It is a demo page where I am trying to figure out if the user is a returning customer or a new customer.
I tried my best to write the code but there seem to be a lot of mistakes that I am making. It's not passing value to the description field and not redirecting properly, etc.
Here's my CODE
$("#sfdemoPreSubmit").click(function(e) {
e.preventDefault();
$("#sfcompany").val($("#sflast_name").val() + ", " + $("#sffirst_name").val());
$("#sfphone").val(cleanPhNum($("#sfphone").val()));
$("#sfstate").val(getProvince($("#sfphone").val()));
$("#sfdescription").val($("sfdescription").val() + $("input[name=source]:checked").val());
$("#sfDemoForm").validate();
if ($("#sfDemoForm").valid()) {
grecaptcha.execute();
}
});
function redirect() {
var province = $('#sfstate').val();
var customerCategory = $('input[name=source]:checked').val();
if (customerCategory == 'cleardent customer') {
$("#retURL").val("https://cleardent.com/demo/demo-thankyou-existing.html");
}
else if (province == 'BC') {
$("#retURL").val("https://cleardent.com/demo/demo-thankyou-bc.html");
} else if (province == 'ON') {
$("#retURL").val("https://cleardent.com/demo/demo-thankyou-on.html");
} else if (province == 'AB') {
$("#retURL").val("https://cleardent.com/demo/demo-thankyou-ab.html");
} else {
$("#retURL").val("https://cleardent.com/demo/demo-thankyou-default.html");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<form id="sfDemoForm" action="https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST" class="sky-form">
<input name="captcha_settings" value="{"keyname":"IC_ClearDent_Main_Demo","fallback":"true","orgId":"00D1I0000002QyG","ts":""}" type="hidden">
<input name="oid" value="00D1I0000002QyG" type="hidden">
<input name="retURL" id="retURL" value="https://test.cleardent.com/demo-thankyou-bc.html" type="hidden">
<fieldset>
<label class="input margin-bottom-15"><i class="icon-prepend fa fa-user"></i>
<input id="sffirst_name" maxlength="40" name="first_name" size="20" type="text" required placeholder="First name">
</label>
<label class="input margin-bottom-15"><i class="icon-prepend fa fa-user"></i>
<input id="sflast_name" maxlength="80" name="last_name" size="20" type="text" required placeholder="Last name">
</label>
<label class="input margin-bottom-15"><i class="icon-prepend fa fa-envelope"></i>
<input id="sfemail" maxlength="80" name="email" size="20" type="email" required placeholder="Email address">
</label>
<!-- <label class="label" for="phone">Phone</label>-->
<label class="input margin-bottom-25"><i class="icon-prepend fa fa-phone"></i>
<input id="sfphone" maxlength="40" name="phone" size="20" type="text" required placeholder="Phone">
</label>
<div class="radio-button">
<input class="form-check-input" type="radio" name="source" id="inlineRadio1" value="new customer">
<label class="form-check-label" for="inlineRadio1">New Customer </label>
<input class="form-check-input" type="radio" name="source" id="inlineRadio2" value="cleardent customer">
<label class="form-check-label" for="inlineRadio2">ClearDent Customer </label>
<input class="form-check-input" type="radio" name="source" id="inlineRadio3" value="other3">
<label class="form-check-label" for="inlineRadio3">Other </label>
</div>
<!--<label class="label" for="description">Notes</label>-->
<label class="textarea textarea-resizable margin-bottom-25">
<textarea id="sfdescription" name="description" placeholder="Is there something specific you want to see from ClearDent?"></textarea>
</label>
<input id="sfstate" name="state" type="hidden">
<input id="sflead_source" name="lead_source" type="hidden" value="Website">
<input id="sfcompany" name="company" type="hidden">
<input id="sfCampaign_ID" name="Campaign_ID" type="hidden" value="7011I000000d5auQAA">
</fieldset>
<div id="recaptcha" class="g-recaptcha" data-sitekey="6LeXmEAUAAAAAG7VJd6Z8YCVkP44AgAlqCUmpRAi" data-callback="submitDemoToLead" data-size="invisible"> </div>
<footer>
<button id="sfdemoPreSubmit" class="btn-u"><i class="fa fa-paper-plane fa-fw"></i> Get Your Free Demo</button>
</footer>
</form>
</div>
</div>
Thank you so much! Please let me know if you have any questions.

JQuery AJAX serialize getting null values

I can't find it out why this is not working.I have done this before a lot of times but this time this is not event working seriously don't know please help me find it out
HTML(signup.html)
<form role="form" id="signupForm">
<div class="form-group">
<label for="first_name" class="control-label"><span
class="glyphicon glyphicon-user"></span> First Name</label> <input
type="text" class="form-control" name="first_name" id="firstName"
for="first_name" placeholder="Enter First Name">
</div>
<div class="form-group">
<label for="last_name" class="control-label"><span
class="glyphicon glyphicon-user"></span> Last Name</label> <input
type="text" class="form-control" name="last_name" id="lastName"
for="last_name" placeholder="Enter Last Name">
</div>
<div class="form-group">
<label for="username" class="control-label"><span
class="glyphicon glyphicon-user"></span> Username</label> <input
type="text" class="form-control" name="user_name" id="username"
for="user_name" placeholder="Enter Username">
</div>
<div class="form-group">
<label for="email"><span
class="glyphicon glyphicon-envelope"></span> Email</label> <input
type="email" class="form-control" name="email" id="email"
for="email" placeholder="Enter Email">
</div>
<div class="form-group">
<label for="mobile_number"><span
class="glyphicon glyphicon-phone"></span> Mobile Number</label> <input
type="text" class="form-control" name="mobile_number"
id="mobile_number" for="mobile_number"
placeholder="Enter Mobile Number">
</div>
<div class="form-group">
<label for="password"><span class="glyphicon glyphicon-lock"></span>
Password</label> <input type="password" class="form-control"
name="password" id="password" for="password"
placeholder="Enter Password">
<!--<ul>
<li class="help-block red"> *password must be 8 characters long</li>
<li class="help-block red"> *password must contain an Uppercase letter </li>
<li class="help-block red"> *password must contain an Lowercase letter </li>
<li class="help-block red"> *password must contain a special character </li>
<li class="help-block red"> *password must contain a number </li>
</ul>-->
</div>
<div class="form-group">
<label for="confirm_password"><span
class="glyphicon glyphicon-lock"></span> Confirm Password</label> <input
type="password" class="form-control" name="confirm_password"
id="confirmPassword" for="confirm_password"
placeholder="Enter Password again">
</div>
<div class="dropdown form-group">
<label for="security_question"><span class="secQue"></span>
Security Questions </label><br> <select name="security_question"
id="secQue" class="btn btn-default">
<option value=""> security Question? </option>
<option value="what is your school name?"> what is your school name? </option>
<option value="what is your native place name?"> what is your native place name? </option>
<option value="what is your favourite place?"> what is your favourite place? </option>
<option value="what is your favourite food?"> what is your favourite food? </option>
<option value="what is your pet name?"> what is your pet name? </option>
</select>
</div>
<div class="form-group">
<label for="answer"><span class="glyphicon glyphicon-pencil"></span>
Answer</label> <input type="answer" class="form-control" name="answer"
id="answer" for="answer" placeholder="Enter Answer">
</div>
<div class="form-group">
<label for="user_city"><span
class="glyphicon glyphicon-record"></span> City</label> <input type="text"
class="form-control" name="user_city" id="city" for="city"
placeholder="Enter city">
</div>
<div class="form-group">
<button id="createAccount" class="btn btn-info">Submit</button>
</div>
</form>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
JQuery(accounts.js)
$(function(){
var bCreateAccount = $('#createAccount');
//Invokes createAccount function
bCreateAccount.on('click',createAccount);
//calls the SignupServlet AJAX request
function createAccount(){
$("#signupForm").on('submit' , function(e) {
e.preventDefault();
$.ajax({
url : 'SignupServlet',
type:'POST',
contentType: 'application/json; charset=utf-8',
data : $('#signupForm').serializeArray(),
success : function(response){
console.log('Response :' +response);
},
error : function(){
console.log('Error :' +error);
}
});
});
}
});
SignupServlet
private void getParameters(HttpServletRequest request,HttpServletResponse response) {
firstName = request.getParameter("first_name");
lastName = request.getParameter("last_name");
userName = request.getParameter("user_name");
email = request.getParameter("email");
mobileNumber = request.getParameter("mobile_number");
password = request.getParameter("password");
confirmPassword = request.getParameter("confirm_password");
securityQuestion = request.getParameter("security_question");
answer = request.getParameter("answer");
userCity = request.getParameter("user_city");
}
protected void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
System.out.println("Inside SignupServlet");
getParameters(request, response);
System.out.println("Username : "+userName);
}
I am not able to find out whats the problem with this code.Guyz please help me to get the solution.It will be really helpful.

Your content type is for json but you're not posting the data as json nor is your server expecting json.
Remove the content type parameter from the ajax request so it will be application/x-www-form-urlencoded which is what your server side code seem to be expecting.

ng-submit doesnt work correct in my form with AngularJS

Ive got a form with ng-submit registrating new user,it should update the registration window when the submit button is pressed.But it doesnt do it correct:(
Can you watch my code and say whats wrong?I`m new with AngularJs
Here's the html:
<div class="registration-box" ng-show="registrationShow">
<form name="registrationForm" ng-submit="addNewUser(newUser,registrationForm.$valid)" novalidate>
<div class="input-registration-fields">
<label>Enter login:</label>
<input type="text" name="login" class="form-input" ng-model="newUser.login" ng-pattern="loginPattern" required>
<div class="error" ng-if="registrationForm.login.$error.pattern">Enter correct login</div>
<!-- <div class="error" ng-show="showError"> {{getSigningError(registrationForm.login.$error)}} </div>-->
<br>
<label>Enter email:</label>
<input type="text" name="email" class="form-input" ng-model="newUser.email" ng-pattern="emailPattern" required>
<!-- <div class="error" ng-show="showError"> {{getSigningError(registrationForm.email.$error)}} </div>-->
<div class="error" ng-if="registrationForm.email.$error.pattern">Enter correct email</div>
<br>
<label>Enter password:</label>
<input type="password" name="password" class="form-input" ng-model="newUser.password" ng-pattern="passwordPattern" required>
<label>Confirm password:</label>
<input type="password" name="password" class="form-input" ng-model="newUser.registationPasswordConfirm" ng-pattern="passwordPattern" ng-class="newUser.password!=newUser.registationPasswordConfirm ? 'invalid-password' : 'ng-valid'" required>
<div class="error" ng-if="newUser.password!=newUser.registationPasswordConfirm">Password doesnt match</div>
<br> </div>
<div class="registration-checkbox">
<input type="checkbox" class="registration-check" ng-model="acceptRegistration" required> I accept all terms and conditions </div>
<div class="registration-box__logic-buttons">
<button type="submit" id="confirmRegistrationButton" ng-disabled="registrationForm.$invalid">Confirm</button>
<button id="cancelRegistrationButton">Cancel</button>
</div>
</form>
</div>
Here's angular function:
$scope.addNewUser = function (userDetails, isvalid) {
if (isvalid) {
$scope.userlist.push({
username: userDetails.login
, password: userDetails.password
, email: userDetails.email
})
// $scope.resetRegistration();
}
console.log($scope.userlist)
}

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.addNewUser = function (userDetails, isvalid) {
$scope.userlist= [];
if (isvalid) {
$scope.userlist.push({
username: userDetails.login,
password: userDetails.password,
email: userDetails.email
});
// $scope.resetRegistration();
}
console.log($scope.userlist);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myCtrl">
<div class="registration-box">
<form name="registrationForm" ng-submit="addNewUser(newUser,registrationForm.$valid)" novalidate>
<div class="input-registration-fields">
<label>Enter login:</label>
<input type="text" name="login" class="form-input" ng-model="newUser.login" required>
<div class="error">Enter correct login</div>
<!-- <div class="error" ng-show="showError"> {{getSigningError(registrationForm.login.$error)}} </div>-->
<br>
<label>Enter email:</label>
<input type="text" name="email" class="form-input" ng-model="newUser.email" required>
<!-- <div class="error" ng-show="showError"> {{getSigningError(registrationForm.email.$error)}} </div>-->
<div class="error">Enter correct email</div>
<br>
<label>Enter password:</label>
<input type="password" name="password" class="form-input" ng-model="newUser.password" required>
<label>Confirm password:</label>
<input type="password" name="password" class="form-input" ng-model="newUser.registationPasswordConfirm" ng-class="newUser.password!=newUser.registationPasswordConfirm ? 'invalid-password' : 'ng-valid'" required>
<div class="error" ng-if="newUser.password!=newUser.registationPasswordConfirm">Password doesnt match</div>
<br> </div>
<div class="registration-checkbox">
<input type="checkbox" class="registration-check" ng-model="acceptRegistration" required> I accept all terms and conditions </div>
<div class="registration-box__logic-buttons">
<button type="submit" id="confirmRegistrationButton" ng-disabled="registrationForm.$invalid">Confirm</button>
<button id="cancelRegistrationButton">Cancel</button>
</div>
</form>
</div>
</div>
</div>
see the snippet, you might be getting error "cannot set property of undefined" while you push the object in your scope.userlist.

Wordpress + Ajax update record not working

I am having trouble in updating record using Ajax.
HTML & JS
<div class="row">
<form role="form" action="" type="post" id="abcdform">
<div class="col-md-3">
<div class="form-group">
<label for="date">Date</label>
<input type="date" class="form-control" id="date" name="date" placeholder="mm/dd/yyy" tabindex="1" value="<?php echo $dr->date; ?>">
</div>
<div class="form-group">
<label for="chats_init_customer">Chat Initiated by Customer</label>
<input type="number" class="form-control" id="chats_init_customer" name="chats_init_customer" placeholder="eg:5" tabindex="2" value="<?php echo $dr->chats_init_customer; ?>">
</div>
<div class="form-group">
<label for="emails_in">Emails Incomming</label>
<input type="number" class="form-control" id="emails_in" name="emails_in" placeholder="eg:5" tabindex="3" value="<?php echo $dr->emails_in; ?>">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="emails_out">Emails Outgoing</label>
<input type="number" class="form-control" id="emails_out" name="emails_out" placeholder="eg:5" tabindex="4">
</div>
<div class="form-group">
<label for="tickets_open">Tickets at Opening</label>
<input type="number" class="form-control" id="tickets_open" name="tickets_open" placeholder="eg:5" tabindex="5">
</div>
<div class="form-group">
<label for="tickets_closed">Tickets Closed</label>
<input type="number" class="form-control" id="tickets_closed" name="tickets_closed" placeholder="eg:5" tabindex="6">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="tickets_remain">Tickets Remaining Open</label>
<input type="number" class="form-control" id="tickets_remain" name="tickets_remain" placeholder="eg:5" tabindex="7">
</div>
<div class="form-group">
<label for="calls_taken">Calls Taken</label>
<input type="number" class="form-control" id="calls_taken" name="calls_taken" placeholder="eg:5" tabindex="8">
</div>
<div class="form-group">
<label for="calls_abandon">Calls Abandon</label>
<input type="number" class="form-control" id="calls_abandon" name="calls_abandon" placeholder="eg:5" tabindex="9">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="calls_avg_length">Calls Average Length</label>
<input type="number" class="form-control" id="calls_avg_length" name="calls_avg_length" placeholder="eg:5" tabindex="10">
</div>
<div class="form-group">
<label for="chats_total">Total Chats</label>
<input type="number" class="form-control" id="chats_total" name="chats_total" placeholder="eg:5" tabindex="11">
</div>
<div class="form-group">
<label for="sales">Sales</label>
<input type="number" class="form-control" id="sales" name="sales" placeholder="eg:5" tabindex="12">
</div>
<div class="feedback hidden-md hidden-lg"></div>
<input type="hidden" name="action" value="edit_daily_report">
<input type="submit" value="Update" id="abcdsubmit" class="btn btn-primary pull-right" tabindex="13">
<div id="process" class="loader pull-right"><img src="<?php echo abcd_root_url('css/images/loader.gif');?>" alt="loader" /></div>
</div>
</form>
</div>
<script type="text/javascript">
jQuery('#abcdform').submit(ajaxSubmit);
function ajaxSubmit() {
var abcdform = jQuery(this).serialize();
jQuery('#abcdsubmit').attr('disabled', true);
jQuery('#process').show();
jQuery.ajax({
type: "POST",
url: "<?php echo site_url(); ?>/wp-admin/admin-ajax.php",
data: abcdform,
success: function(data) {
jQuery(".feedback").html('<span class="glyphicon glyphicon-saved"></span> ' + data).addClass('alert alert-success');
jQuery('#process').hide();
jQuery('#abcdsubmit').attr('disabled', false);
}
});
return false;
}
</script>
Function
function edit_daily_report()
{
global $wpdb;
$date = $_POST['date'];
$conditionValue = array('id' => 19);
if ($wpdb->update('hf_abcd_daily_report', array('date' => $date), array('id' => 19)) === FALSE){
echo "Error";
} else {
echo "Record successfully added to the database. Record id is <strong>$wpdb->insert_id</strong>";
}
die();
}
When I hit Update button, it does nothing after form submit. Please ignore all fields in the form and only consider date field.

you should have ajax actions to work it with wordpress
add_action( 'wp_ajax_my_action', 'edit_daily_report' );
add_action( 'wp_ajax_nopriv_my_action', 'edit_daily_report' );