We Keep Coding

I want to create a div or more inside the section when I press the submit button

I have stopped refreshing the page by using e.preventDefault but the code is not executing as I want.
Here is the most important part
Here is the complete code
<div class="page">
<form action="">
<input type="text" id="input-field" />
<input type="submit" value="Add Task" />
</form>
<section class="tasks" id="tasks"></section>
</div>
//here variables
let submitt =document.querySelector("input[type='submit']")
let val =document.getElementById("input-field");
let clickk =document.getElementById("cli");
let divv = document.createElement("div");
divv.title = val.value;
divv.id = "iddd";
divv.className ="classone";
//append the text in the div
divv.append(val.value)
divv.style.cssText = "width:100px;height:50px;background:red;color:white;"
let sec = document.getElementById("tasks")
//func to create new div
submitt.addEventListener("submit",function(e){
sec.append(divv)
e.preventDefault();
})

hi，sounds like the submit button does not trigger the submit event as only the form can listen submit event
you should listen submit on form, or use click
submitt.addEventListener("click",function(e){
sec.append(divv)
e.preventDefault();
})

disable click button on submit

I try to update this jquery script in pure js (with bootstrap 5). The goal is to not allow someone to click twice on the payment button. Sorry I am not very strong in js.
My goal is to have the same reaction that the jquery script.
I tried to follow the process on this page :
Disabling a button in vanilla JavaScript and in jQuery
Thank you
My current script
<form name="checkout_confirmation" action="http://............/Process" method="post" id="checkout_confirmation" role="form" onsubmit="return checkCheckBox(this)"><section class="checkout_confirmation" id="checkout_confirmation">
div class="text-end" id="process_button" class="processButton">
<button type="submit" data-button="payNow" class="btn btn-success">Confirmer la commande avec paiement</button> </div>
</div>
</form>
<script>
$('form[name="checkout_confirmation"]').submit(function() {
$('form[name="checkout_confirmation"] button[data-button="payNow"]').html('Confirm the payment').prop('disabled', true);
});
</script>
Now the script update
<script>
var button = document.getElementById('checkout_confirmation');
button.addEventListener('submit', function() {
alert('Confirm the payment');
});
button.disabled = false;
button.click(); // No output
button.prop("disabled", true);
</script>

setAttribute can be used in JavaScript to set the attribute of the button as disabled.
Element.setAttribute("disabled", true);
This can be used to disabled the button.
So when someone clicked on the submit button, you can disable the button till the data is processed.
Check the below demo code:
const btn = document.getElementById("submit-data");
btn.addEventListener("click", submitForm);
function submitForm(){
btn.setAttribute("disabled", true);
btn.innerText = "Submitting..";
let userName = document.getElementById("user-name").value;
console.log("Name: ", userName);
setTimeout(() => {
btn.removeAttribute("disabled");
btn.innerText = "Submit";
}, 3000);
}
<form type="POST">
<label for="user-name">Full Name</label>
<input type="text" id="user-name" placeholder="Your Full Name" />
<br /><br /><br />
<button id="submit-data">Submit</button>
</form>

You have two problems:
Submit events fire on form elements, not button elements.
getElementById gets an element by its id and neither your button nor your form has an id. (See this question).

Could you not use e.preventDefault() to stop the default behaviour of the button being pressed?
More can be read here: https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

How to add more inputs in a form inside <script> tags

I have a form inside the script tags and I would love to add more input fields before I submit. My submit button does not work and i think it a pblem with how am accessing the submit button when I try this.
below is my form inside the script tags
<script defer type="text/html" id="template-RegisterView">
<div class="modal">
<div class="signup-popup pwd ">
<div class="title">Sign up now</div>
<p>and we'll find your right geek!</p>
<form id="signup-form" action="bin/request/best.php" method="post">
<input class="email" autocapitalize="off" autocorrect="off" autocomplete="email" name="email" placeholder="Enter your e-mail" type="email">
<input class="password" name="password" placeholder="Create password" type="password">
<button class="signup-submit submitDialog" type="button">Sign up</button>
</form>
</div>
</div>
here is the script I want to use to add more input fields
<script type="text/javascript">
$(document).on('click', '.signup-submit', function () {
$("#signup-form").submit( function(eventObj) {
alert("fwf");
$('<input />').attr('type', 'hidden')
.attr('name', "something")
.attr('value', "something")
.appendTo('#signup-form');
return true;
});
});
</script>

Rather than return true add $("#signup-form").submit();
Further explanation
The current code that you have is doing the following.
$(document).on('click', '.signup-submit', function () {
The above line means when click event occurs on the button with the signup-submit class, then execute the function that is provided as the third argument to the $(document).on method.
When the function is executed it executes the following lines
$("#signup-form").submit( function(eventObj) {
alert("fwf");
$('<input />').attr('type', 'hidden')
.attr('name', "something")
.attr('value', "something")
.appendTo('#signup-form');
return true;
});
These lines are actually defining or attaching a function when the submit event will occur for form with id signup-form.
But they are not actually triggering the submit event.
To trigger the submit event you have write $("#signup-form").submit(); without anything within (). That will trigger the submit event on the form.
You can check further details on this link. Its the official document explaining the usage of submit to attach a handler function or if you want to trigger the submit event for a form then how to do that.

var Param=//input parametr
var form = $("#signup-form");
var hiddenField = document.createElement("input");
hiddenField.setAttribute("name", "Param");
hiddenField.setAttribute("value", Param);
form.appendChild(hiddenField);
form.submit();

Prevent certain elements from receiving focus

So I have the following function. What it does is listens for the focus event on all elements. If that element is either in $mobileMenu or $menuItems it permits it otherwise it removes the focus:
var $body = $("body");
var $mobileMenu = $("#mobile-menu");
var $menuItems = $("#main-menu a");
$body.on("focus.spf", "*", function(e){
e.stopPropagation();
$this = $(this);
// Prevent items from recieving focus and switching view
if (!$this.is($mobileMenu) && !$this.is($menuItems)) {
$this.blur();
} else {
console.log(this);
}
})
The issue I have is that this prevents the user from focusing on anything whatsoever if a normally focusable element that is now non-focusable precedes any of my white-listed elements as it just attempts to refocus on the same element over and over again.
Does anyone know how I can tell it to instead skip to the next focusable element?

If you set the tabindex to -1 on the element, it will ignore the tab.
Not sure if this works in all browsers but it works in Google Chrome.
<input type='text' value='regular'/>
<input type='text' tabindex="-1" value='with tabindex set to -1'/>

This works (updated) :
$body.on("focus.spt", "*", function(e){
$this = $(this);
if (!$this.is($mobileMenu) && !$this.is($menuItems)) {
$this.blur();
var next=$this.nextAll().find('a,input');
if (next.length>0) next[0].focus();
} else {
console.log('ok',this);
e.stopPropagation();
}
})
(updated) fiddle -> http://jsfiddle.net/CADjc/
You can see in the console which elements that receives focus (main-menu a and mobile-menu)
Tested on :
<input type="text" tabindex="1" value="test">
<span><input type="text" tabindex="2" value="test"></span>
<div><input type="text" id="mobile-menu" tabindex="3" value="mobile-menu"></div>
<div><span>
<div id="main-menu">
<a tabindex="4">main-menu</a>
<a tabindex="5">main-menu</a>
</div>
</span></div>
<span>
<input type="text" tabindex="6" value="test">
</span>

If you make something disabled, it won't receive focus. For example:
<input type="text" disabled="disabled" />
Do add it programmatically, you could do:
var el = document.getElementById('disableme');
el.setAttribute('disabled', 'disabled');

attr("readonly","readonly"), prevent input focus and value ARE send to the server.

CSS-only solution from one of my past projects
/* Prevents all mouse interactions */
.disabled-div {
opacity: 0.5;
pointer-events: none;
}
/* Prevents all other focus events */
.disabled-div:focus,
.disabled-div:focus-within {
visibility: hidden;
}
<h1>CSS Only Disable with Prevent Focus</h1>
<input placeholder="Normal text field">
<br><br>
<input class="disabled-div" placeholder="Disabled text field">
<br><br>
<input placeholder="Normal text field">
<br><br>
<input class="disabled-div" placeholder="Disabled text field">
<br><br>
Flickers slightly when it receives focus. That is because when it receives focus, visibility is set to 'hidden' and focus is lost and visibility is set back to 'visible' again. This is actually good because the user now has some idea where focus is while going over disabled fields...

Trigger jquery function on blur unless specific elements are clicked

I have a login form. When the inputs get focused the "forgotten password" and "remember me" elements get shown by adding a css class, when they blur, the elements are hidden again by removing the class "sho". I would like the elements to keep the class "show"if I click either one of them or the login link
$(document).ready(function() {
$('.login *').focus(showlogin);
$('.login *').blur(hidelogin);
});
function showlogin(){
$('.login .hidden').addClass("show");
}
function hidelogin(){
$('.login .hidden').removeClass("show");
}
Html:
<form class="login">
<input type="text"/>
<input type="password"/>
<a class="loginbutton" href="#">Log in</a>
<br />
<a class="hidden" href="#">Forgotten password</a>
<label class="hidden"><input type="checkbox" /> Remember me</label>
</form>

Instead of binding to blur, bind to a click outside the login form.
Here's some code I have in my page that closes my login box when I click outside it, you can adapt it to your needs:
$(document).mousedown(function (e) {
if ($(e.target).closest("#signin").length == 0) {
$(".signin").removeClass("menu-open");
$("fieldset#signin_menu").hide();
}
});