Develop Reference

Submitting form set all null inputs and their associated hidden input fields to disabled

I have a form with multiple input fields where users may choose to enter a value or not. Next to each input field is a hidden input field that will send a specific id unique to the previous input field. On form submission, all blank input fields are disabled. This I got to work using this code.
function disableEmptyInputs(form) {
var controls = form.elements;
for (var i = 0, iLen = controls.length; i < iLen; i++) {
controls[i].disabled = controls[i].value == '';
}
}
I now want to also disable the hidden inputs if their primary visible input field is null
<div class="col-md-4">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<input name="Pay" placeholder="Amount for A" class="form-control" type="text" />
<input type="hidden" name="PayId" value="A" />
</div>
</div>
<div class="col-md-4">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<input name="Pay" placeholder="Amount for B" class="form-control" type="text" />
<input type="hidden" name="PayId" value="B" />
</div>
</div>
Any help will be really appreciated. The form submits to a c# backend where I am able to filter out all blanks If I allowed all blanks to be submitted but I felt if I could filter all blanks by making them disabled at the client side in addition to server side that will be better.

You can use .each loop to iterate through your form elements and then compare if the value of input is "" simply disable that input and also the input next to it using .next().
Demo Code :
$("form").on("submit", function() {
//loop through input(exclude hidden input)..select..etc
$("form").find("input:not(:hidden),select").each(function() {
//if the value is empty
if ($(this).val() == "") {
$(this).prop("disabled", true) //disable
$(this).next().prop("disabled", true) //also next field (hidden) disable
}
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div class="col-md-4">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<input name="Pay" placeholder="Amount for A" class="form-control" type="text" value="abc" />
<input type="hidden" name="PayId" value="A" />
</div>
</div>
<div class="col-md-4">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<input name="Pay" placeholder="Amount for B" class="form-control" type="text" />
<input type="hidden" name="PayId" value="B" />
</div>
</div>
<button>Click me ..</button>
</form>

Phone Number Regex Validation error while showing/hiding Elements

I am working on a form where I am showing a div when a user submits the form and it checks if all the fields values are not blank. I have achieved that part and it is working fine.
Now the problem is when I am validating the phone number using regex, it is showing error but still displays the div and form is also submitted successfully. It should not get submit till the user enters a correct phone number, it gives an error and still, the form gets submitted. I know the error is there but I am not understanding where I am wrong. Please guide me.
function mySub() {
const user = document.getElementById('pmname').value.trim();
const uemail = document.getElementById('pmemail').value.trim();
const uphone = document.getElementById('pmphone').value.trim();
const uregx = /^[0-9]{10}$/;
const upmmb = uregx.test(uphone);
if (user == "" || uemail == "" || uphone == "" || upmmb == "") {
document.getElementById('agy').style.display = 'none';
alert("Enter Valid Mobile Number");
document.getElementById('pmphone').focus();
} else {
document.getElementById('agy').style.display = 'block';
}
}
#agy {
display: none;
}
<form method="post" action="#">
<div id="agy">
<div class="agent-details">
<div class="d-flex align-items-center">
<div class="agent-image">
<img class="rounded" src="#" alt="Jazz" width="70" height="70" />
</div>
<ul class="agent-information list-unstyled">
<li class="agent-name"><i class="houzez-icon icon-single-neutral mr-1"></i> Jazz</li>
<li class="agent-link">View Listings</li>
</ul>
</div>
</div>
</div>
<div class="form-group">
<input class="form-control" name="name" id="pmname" value="" type="text" placeholder="Name" />
</div>
<div class="form-group">
<input class="form-control" name="mobile" id="pmphone" value="" type="text" placeholder="Phone" />
</div>
<div class="form-group">
<input class="form-control" name="email" id="pmemail" value="" type="email" placeholder="Email" />
</div>
<div class="form-group form-group-textarea">
<textarea class="form-control hz-form-message" name="message" rows="4" placeholder="Message">Hello, I am interested in ...</textarea>
</div>
<div class="form-group">
<label class="control control--checkbox m-0 hz-terms-of-use">
<input type="checkbox" id="ppa" name="privacy_policy" checked="" />By submitting this form I agree to <a target="_blank" href="https://propertymakkerz.com/pm/property/sai-ashishkaranjadepanvel/">Terms of Use</a>
<span class="control__indicator"></span>
</label>
</div>
<div class="form_messages"></div>
<button type="button" class="houzez_agent_property_form btn btn-secondary btn-full-width" onclick="mySub()"><span class="btn-loader houzez-loader-js"></span> Send Message</button>
</form>

The first radio button's value is always being sent

I have (4) radio buttons and submit button:
<form class="addrecipe-form" method="GET">
<div class="addrecipe-form-header-row">
<div>
<input type="radio" class="recipe-type-button" id="breakfast" name="recipe-type" value="breakfast" />
<label for="breakfast" class="recipe-type-label">breakfast</label>
</div>
<div>
<input type="radio" class="recipe-type-button" id="appetizer" name="recipe-type" value="appetizer" />
<label for="appetizer" class="recipe-type-label">appetizer</label>
</div>
<div>
<input type="radio" class="recipe-type-button" id="entree" name="recipe-type" value="entree" />
<label for="entree" class="recipe-type-label">entree</label>
</div>
<div>
<input type="radio" class="recipe-type-button" id="dessert" name="recipe-type" value="dessert" />
<label for="dessert" class="recipe-type-label">dessert</label>
</div>
</div>
<button class="addrecipe-button" type="submit" name="recipe-submit"></button>
</form>
Here's the javascript:
var addRecipeForm = document.querySelector(".addrecipe-form");
var recipe_entry;
addRecipeForm.addEventListener('submit', function(e) {
e.preventDefault();
recipe_entry = {
type : document.querySelector(".recipe-type-button").value)
}
console.log(recipe_entry.type)
I just can't figure out why I keep getting the first radio button's value instead of the one I'm clicking on. Can someone enlighten me, pls?

The "document.querySelector()" function returns the FIRST occurrence of that matching query selector.
I would use a for loop and "document.getElementsByClassName()" to check each radio button's value, and only save the state if it is selected.
Like this:
addRecipeForm.addEventListener('submit', function(e) {
e.preventDefault();
for(var i=0;i<document.getElementsByClassName("recipe-type-button").length){
if(document.getElementsByClassName("recipe-type-button")[i].checked){
recipe_entry = {
type : document.getElementsByClassName("recipe-type-button")[i].value
}
}
}
console.log(recipe_entry.type)
}

Try..
type: document.querySelector(".recipe-type-button:checked").value
.. to get the selected value.
Full script:
<html>
<form class="addrecipe-form" method="GET">
<div class="addrecipe-form-header-row">
<div>
<input
type="radio"
class="recipe-type-button"
id="breakfast"
name="recipe-type"
value="breakfast"
/>
<label for="breakfast" class="recipe-type-label">breakfast</label>
</div>
<div>
<input
type="radio"
class="recipe-type-button"
id="appetizer"
name="recipe-type"
value="appetizer"
/>
<label for="appetizer" class="recipe-type-label">appetizer</label>
</div>
<div>
<input
type="radio"
class="recipe-type-button"
id="entree"
name="recipe-type"
value="entree"
/>
<label for="entree" class="recipe-type-label">entree</label>
</div>
<div>
<input
type="radio"
class="recipe-type-button"
id="dessert"
name="recipe-type"
value="dessert"
/>
<label for="dessert" class="recipe-type-label">dessert</label>
</div>
</div>
<button class="addrecipe-button" type="submit" name="recipe-submit">
Magic
</button>
</form>
<script>
var addRecipeForm = document.querySelector(".addrecipe-form");
var recipe_entry;
addRecipeForm.addEventListener("submit", function (e) {
e.preventDefault();
recipe_entry = {
type: document.querySelector(".recipe-type-button:checked").value,
};
console.log(recipe_entry.type);
});
</script>
</html>

How to get values from input boxes and save to database with button click angular

I'm still learning to programme on AngularJS.
I want to get values from the input box and then click on the button I want to save them in the database.
My database table is called "user". I have columns like id, username, password, name.
I have two checkbox.When I click on first checkbox(Edit) it displaying "div myVar",when i click on second checkbox(Add new user) it displaying "div myVar1".
I want to activate this button "Add" to add input box values to database MySQL. Please help me.
I have this html code:
<label><input type="checkbox" ng-model="myVar">Edit</label>
<label><input type="checkbox" ng-model="myVar1">Add new user</label>
<div ng-show="myVar">
<div class="form">
<form ng-submit="saveItem(userForm.$valid)" name="userForm">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="database_address">User</label>
<input type="text" class="form-control" required ng-model="activeItem.username" placeholder="Потребителско Име..." />
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="text" class="form-control" required id="password" ng-model="activeItem.password" />
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="username">Operator</label>
<input type="text" class="form-control" required id="username" ng-model="activeItem.name" />
</div>
</div>
</div>
<button class="btn btn-primary" ng-disabled="userForm.$invalid" type="submit">Save</button>
<!--<button class="btn btn-primary" ng-disabled="userForm.$invalid" type="submit">Добавяне на нов</button>-->
</form><form ng-submit="createUser(userForm.$valid)" name="userForm1">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="database_address">User</label>
<input type="text" class="form-control1" ng-model="usernamee" placeholder="Потребителско Име..." />
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="text" class="form-control1" ng-model="passwordd"required id="password" />
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="username">Operator</label>
<input type="text" class="form-control1" ng-model="namee" required id="username" />
</div>
</div>
</div>
<button class="btn btn-primary" ng-click="createUser();" type="submit">Add user</button>
<!--<button class="btn btn-primary" ng-disabled="userForm.$invalid" type="submit">Добавяне на нов</button>-->
</form>
And Angular code:
$scope.createUser=function()
{
//console.log($scope.activeItem);
//delete $scope.activeItem.hash_method
var objectToSave = {
username: $scope.usernamee,
password: $scope.passwordd,
name: $scope.namee,
id: $scope.id
};
{
defaultAdapter.query('INSERT INTO users(username,password,name,id) VALUES(username = :usernamee, password = :passwordd,name = :namee WHERE id =:id)',
{ replacements: objectToSave, type: Sequelize.QueryTypes.UPDATE }
).then(projects => {
console.log(projects);
$scope.editMode = false;
$scope.activeItem = false;
$scope.refresh();
});
}
}

Fill form then slide left to reveal another with jquery

I have 3 forms. I'd like to show each separately. Having the user fillout and then have the completed form slide to the left, and then revealing the proceeding form.
$('.button-action').click(function() {
$('.firstForm').animate({left: '-=150px'}, 500);
});
How would I go about making this happen?
Here is a fiddle that I've tried to work with.
Thank you for your help.

I've changed the divs to have a class called 'wizard' (because that's the way I see what you are trying to do) you can change that however you'd like.
HTML
<div class="promo">
<div class="wrapper">
<div id="signup" class="wizard">
<div class="heading">
<h1>Just need your email to get started</h1>
</div>
<ul>
<li>
<input class="signup-email" type="text" placeholder="Email address" />
</li>
<li>
<button data-next-id="form1" validationDiv="signup" class="continue button button-action">Apply</button>
</li>
</ul>
</div>
<div id="form1" class="wizard">
<h1>One more to go</h1>
<input type="text" placeholder="First Name" />
<input type="text" placeholder="Last Name" />
<input type="text" placeholder="Country" />
<button data-next-id="form2" validationDiv="form1" class="continue button button-action">One more</button>
</div>
<div id="form2" class="wizard">
<h1>Last one</h1>
<input type="text" class="input-text" placeholder="Company Name" />
<button validationDiv="form2" class="button button-action">Done</button>
</div>
</div>
</div>
jQuery
$(".wizard").hide();
$("#signup").show();
$(".continue").click(function () {
var valid = true;
$("#" + $(this).attr("validationDiv")).find("input").each(function () {
if ($(this).val() == "") valid = false;
});
if (valid) {
$(".wizard").slideUp();
$("#" + $(this).attr("data-next-id")).slideDown();
}
});
JSFiddle