We Keep Coding

create a dynamic url in pug

I declared a variable called "name". Once the user clicks on the form , it should call the function myFunction which assigns the value that the user types to the variable name. For instance if the user types "John". the url would be localhost:5000/profile/John. But I am getting document.getElementById("username") is undefined.
-let name = "gg";
//- -function enteringName() {
//- - name = document.getElementById("username").value;
//- -};
<h1>Log in</h1>
<form action="/profile/#{name}" method="POST" id="loginForm" onclick="#{myFunction()}" >
<label for="username">username:</label><br />
<input type="text" id="username" name="username"/>
<br />
<label for="password">password:</label><br />
<input type="text" id="password" name="password" /><br /><br />
<input type="submit" value="Log in" />
<br />
</form>
<p>
register here
</p>
<script>
function myFunction() {
-name = document.getElementById("username").value;
}
</script>

try this one. There were some problems with pug indentation. Also pug is only server rendering html, but on client side you should set name to element by js. Tested this code in codepen, take a look there too https://codepen.io/aidonline01/pen/rNOwWJY :)
-let name = "gg";
//- -function enteringName() {
//- - name = document.getElementById("username").value;
//- -};
<h1>Log in 1</h1>
<form action="/profile/#{name}" method="POST" id="loginForm" onclick="myFunction()" >
<label for="username">username:</label><br />
<input type="text" id="username" name="username"/>
<br />
<label for="password">password:</label><br />
<input type="text" id="password" name="password" /><br /><br />
<input type="submit" value="Log in" />
<br />
</form>
<p>
register here
</p>
script
.
function myFunction() {
#{name} = document.getElementById("username").value;
document.getElementById("loginForm").action = `/profile/${#{name}}`;
}

Jquery function is not called

So i have a log in page, there is a form and what i wanna do is when the user enters their username and password, it checks it in an object (ik i should do it in backend but stay with me here) but the jquery function is not working. here is the code.
<div class="login">
<h1>Login</h1>
<form>
<input type="text" name="u" placeholder="ID" required="required" />
<input type="password" name="p" placeholder="Password" required="required" />
<button id="but" type="submit" class="btn btn-primary btn-block btn-large">Enter Workspace</button>
</form>
</div>
<script>
$('#but').click(function() {
alert("lol");
});
</script>
what do i neeed to fix in order for the jquery function to work?

What do you mean 'it checks it in an object'? Do you want to grab the username & password when a user clicks the button? If so then you'd do something like this:
$('#but').click(function() {
var username=$('input[name=u]').val();
var password = $('input[name=p]').val();
// Do checks with the values here e.g send to server for validation
});

Adding jquery in the script. Also you may write the jquery functions in $(document).ready() or $(function(){}) but it as optional as long as your write your script after the element it is trying to access.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="login">
<h1>Login</h1>
<form>
<input type="text" name="u" placeholder="ID" required="required" />
<input type="password" name="p" placeholder="Password" required="required" />
<button id="but" type="submit" class="btn btn-primary btn-block btn-large">Enter Workspace</button>
</form>
</div>
<script>
$(function(){
$('#but').click(function() {
alert("lol");
});
})
</script>

Javascript Array value not defined

I'm trying to get a preview box update with form data when you click on a checkbox. But it doesn't work for array values.
Here's the code:
<script>
function FillPreview(f) {
if(f.update.checked == true) {
f.preview_name.value = f.post_title.value;
f.preview_description.value = f._ecp_custom_13.value;
f.preview_date.value = f.EventStartDate.value;
f.preview_venue_name.value = f.venue[Venue].value;
f.preview_venue_address.value = f.venue[Address].value;
f.preview_venue_city.value = f.venue[City].value;
f.preview_venue_state.value = f.venue[Province].value;
f.preview_phone.value = f.organizer[Phone].value;
f.preview_website.value = f.organizer[Website].value;
}
}
</script>
The following form HTML is just a summary. I'm actually using The Community Events Add-on to The Events Calendar plugin for Wordpress.
<form name="eventForm">
<input type="text" name="post_title" />
<input type="text" name="_ecp_custom_13" />
<input type="text" name="EventStartDate" />
<input type="text" name="venue[Venue]" />
<input type="text" name="venue[Address]" />
<input type="text" name="venue[City]" />
<input type="text" name="venue[Province]" />
<input type="text" name="venue[Zip]" />
<input type="text" name="organizer[Phone]" />
<input type="text" name="organizer[Website]" />
</form>
And the preview box HTML
<div id="preview">
<h2>Print Preview</h2>
<input type="text" class="preview-date" name="preview_date" />
<div class="preview-category" name="preview_category"></div>
<input type="text" class="preview-name" name="preview_name" />
<input type="text" class="preview-time" name="preview_time" />
<input type="text" class="preview-venue-name" name="preview_venue_name" />
<input type="text" class="preview-venue-address" name="preview_venue_address" />
<input type="text" class="preview-venue-city" name="preview_venue_city" />
<input type="text" class="preview-venue-state" name="preview_venue_state" />
<input type="text" class="preview-venue-zip" name="preview_venue_zip" />
<input type="text" class="preview-description" name="preview_description" />
<input type="text" class="preview-phone" name="preview_phone" />
<input type="text" class="preview-website" name="preview_website" />
</div>
<div>
<input type="checkbox" id="update" name="update" onclick="FillPreview(this.form)" />
</div>
My problem is that the array values are undefined while the other values (title, description, etc.) work just fine. Like I said before, the form code is actually from The Community Events Add-on to Wordpress's "The Events Calendar" plugin, so anybody who knows that plugin well will be more helpful.
I grabbed the javascript from this link. I tested that on my submit event page by itself and it worked just fine. As you can see I'm an absolute script kiddie. Any help would be greatly appreciated.

Password confirmation validation not showing as intended

This is an extension of the the question I had asked earlier today (it's still unsolved, any help is very much appreciated). I have seen a lot of questions regarding this on stack overflow, and my code is based on something I found on a tutorial website.
I have 2 password forms which I wish to validate. I just want to submit it if they match. Here's my code-
<li>
<div class="input-group col-xs-5 pw">
<input type="password" name="pw" class="form-control" placeholder="Enter a new password" id="new-pw" />
</div>
</li>
<li>
<div class="input-group col-xs-5">
<input type="password" name="cnfrm-pw" id="cnfrm-pw" class="form-control" placeholder="Confirm new password" />
<span class="input-group-btn">
<button class="btn btn-primary" type="submit" id="pw-btn"> <em class="glyphicon glyphicon-circle-arrow-right"> </em> </button>
</span>
</div>
</li>
My javascript-
$(document).ready(function () {
$('#pw-btn').click( function() {
var pwd1 = document.getElementById("new-pw").value;
var pwd2 = document.getElementById("cnfrm-pw").value;
if (pwd1 != pwd2)
{
document.getElementById("cnfrm-pw").setCustomValidity("Passwords Don't Match");
}
else {
document.getElementById("cnfrm-pw").setCustomValidity('');
//empty string means no validation error
}
}
);
});
I am expecting an HTML5 validation form which tells me the passwords dont match, something like this. Nothing happens however.
Is there a mistake in my approach to custom validation? Thank you in advance all, very grateful for the help and advise.
ANSWER
I used the following code to get this working. It was a modification of the submitted answers. Thanks for all the help guys!
HTML:
<form action="#" id="f" method="post">
<li>
<div class="input-group col-xs-5 pw">
<input type="password" name="pw" class="form-control new-pw" placeholder="Enter a new password" id="new-pw" required pattern="(?=.*\d)(.{6,})" />
</div>
</li>
<li>
<div class="input-group col-xs-5">
<input type="password" name="cnfrm-pw" id="cnfrm-pw" class="form-control cnfrm-pw" required placeholder="Confirm new password" />
<span class="input-group-btn">
<button class="btn btn-primary" type="submit" id="pw-btn"> </button>
</span>
</div>
</li>
</form>
JS
$(document).ready(function () { //This confirms if the 2 passwords match
$('#f').on('keyup', '.cnfrm-pw', function (e) {
var pwd1 = document.getElementById("new-pw").value;
var pwd2 = document.getElementById("cnfrm-pw").value;
if (pwd1 != pwd2) {
document.getElementById("cnfrm-pw").setCustomValidity("The passwords don't match"); //The document.getElementById("cnfrm-pw") selects the id, not the value
}
else {
document.getElementById("cnfrm-pw").setCustomValidity("");
//empty string means no validation error
}
e.preventDefault(); //would still work if this wasn't present
}
);
});

.setCustomValidity tooltip will trigger only when the form is submitting.
Javascript
$(document).ready(function() {
$('#f').submit(function(e) {
var pwd1 = document.getElementById("new-pw").value;
var pwd2 = document.getElementById("cnfrm-pw").value;
if (pwd1 != pwd2) {
document.getElementById("cnfrm-pw").setCustomValidity("Passwords Don't Match");
} else {
document.getElementById("cnfrm-pw").setCustomValidity('');
//empty string means no validation error
}
e.preventDefault();
}
);
});
HTML
<form action="#" id="f"><li>
<div class="input-group col-xs-5 pw">
<input type="password" name="pw" class="form-control" placeholder="Enter a new password" id="new-pw" />
</div>
</li>
<li>
<div class="input-group col-xs-5">
<input type="password" name="cnfrm-pw" id="cnfrm-pw" class="form-control" placeholder="Confirm new password" />
<span class="input-group-btn">
<input type="submit" />
</span>
</div>
</li>
</form>
Have a look:
http://codepen.io/anon/pen/WwQBZy

I believe you're missing required attribute:
<input type="password" name="pw" class="form-control" placeholder="Enter a new password" id="new-pw" required />
Notice the required at the end.
Also, if you want to set a minimum:
<input type="password" name="pw" class="form-control" placeholder="Enter a new password" id="new-pw" pattern=".{5,}" title="Minmimum 5 letters or numbers." required />
As for the submitting the form, when the validation passes, you could submit the form using submit() function available in the Web API. You can read about it here.

PHP JS submit button

I need to develop a submit button with js but as I have a register and a login bn on the same page So, when I press the register, it goes fine but if I press the login, the login uses the register files for example.
<form name="as" method="POST" action="loginpro.php">
Username:
<input type="text" name="username" />
<br />
<br />
Password:
<input type="password" name="password" />
<br />
<br />
<input style="font-size: 17px" type=button onClick="submitform()" value="Submit"/>
</form>
This is the code that I am using to make the login form and as you can see I call a file with the name loginpro.php where I have the php settings to ask the db the files that I need but when I execute it he is calling regpro.php that is the file that I am using for register take a look.
<form name="register" method="POST" action="regpro.php">
Username:
<input type="text" name="username" />
<br />
<br />
Email:
<input type="text" name="Email" />
<br />
<br />
First Name:
<input type="text" name="fname" />
<br />
<br />
Last Name:
<input type="text" name="lname" />
<br />
<br />
Password:
<input type="password" name="password" />
<br />
<br />
<input style="font-size: 11px" type=button onClick="submitform()" value="Submit"/>
</form>

Well, it could be something in your submitform() Javascript function since both forms are triggering that function in the onclick event.

In JS, pass the form name to the function, like below:
<input style="font-size: 17px" type=button onclick="submitform('as')" value="Submit"/>
<input style="font-size: 11px" type=button onclick="submitform('register')" value="Submit"/>
And in your function:
function submitform(form) {
//will submit the form where the button was clicked from within
document.forms[form].submit();
}
jQuery (remove inline event handlers onclick="submitform()" from both forms)
$("input:button").on("click", function() {
var $form = $(this).closest("form");
$form.trigger("submit");
//OR
//$form[0].submit();
});

Why dont you give them id so you could call the onclick event for each button or other way you could use jquery like below
<input id="btnSubmit" type=button onClick="submitform()" value="Submit"/>
<script type="text/javascript">
$("#btnSubmit").click(function(){
$.post("the php page address goes here like regpro.php",
{
//here set the paramter
'firstname':$("#fname").val().trim(),
'lastname':$("#lname").val().trim()
}, function(data){
data=data.trim();
//you can retrive a data to find that the call is success or not
});
});
</script>
you could do the same with login button

Give different id for different form and use the simple way bellow
document.getElementById("your_form_id").submit();