News Articles input

React JS – disable a button if the input field is empty?

React Code: import { useState } from "react"; export default function IndexPage() { const [text, setText] = useState(""); const autoComplete = (e) => { setText({ value: e.target.value }); }; return ( <form> <input type="text" placeholder="search here" onChange={autoComplete} /> <button type="submit" disabled={!text}> find </button> </form> ); } SandBox Link: https://codesandbox.io/s/practical-panini-slpll Problem: when Page Loads, the find […]

How to put a Fontawesome icon inside input element and not expand a parent div? (BEM)

I’m trying to put a search icon (from Fontawesome) inside an input block. I use position: relative; for the icon and then lift it up with the bottom property. But the problem is the parent div’s height expands because of that icon. I can’t set a fixed height for the parent div because I follow […]

Vector resultant

I’m trying to make a resultant of 3 vectors. But when I put a number, return NaN instead.Can someone explain? var vectoro = document.getElementById("f1"); var vectortw = document.getElementById("f2"); var vectorth = document.getElementById("f3"); var d1 = document.getElementById("d1"); var d2 = document.getElementById("d2"); var d3 = document.getElementById("d3"); var hasil = document.getElementById("hasil"); function prosessatu(){ let f1 = vectoro * […]

formik , setFieldValue one step behind

I have this problem with formik , I want use setFieldValue and set one of my values to total of my values … and problem is when i pass onChange to my customInput component setFieldValu update with one step behind ! but if i dont pass setFieldValue and i write the customCompontnt in my page […]

Setting HTML input of type time prints invalid input time

In this simple html <input type="time" id="tm" name="tm">, I try to set the time using document.getElementById(‘tm’).valueAsDate = new Date();, but the time is set to "23:45:04.123", which results in an error in the input. I get a tooltip "Please select a valid value…." I tried this in Firefox 94.0.2 and Edge 96.0.1054.34 – the same […]

Placeholder only appearing after input is deleted

I am trying to design an input field in my blade file and stumbled on something weird. I got this Section for the input field: <form class="mb-5 flex justify-left grid grid-cols-3 gap-x-20" action=" {{ route(‘overview’) }}" method="get"> <div class="w-full h-full text-left col-start-1 col-end-1"> <input placeholder="place" type="text" id="s" name="s" value=" {{ request()->get(‘s’) }}" class="mb-2 w-full h-full […]

Specifying a specific file from a URL to assign to a File type in JavaScript

We have: <input type="file" onchange="showFile(this)"> <script> function showFile(input) { let file = input.files[0]; alert(`File name: ${file.name}`); alert(`Last modified: ${file.lastModified}`); } </script> Is it possible to set file with a local or file from a URL? I tried new File() but that did not read the file in question. Source: JavaSript – Stack Overflow

How can I neatly line up the checkbox and radio box

I’m not sure how I’m suposed neatly line inputs in a row. I tried using flex and position: relative (for the label) but that didn’t work for me. I’m trying to make it look like this for example for both my checkboxes and radios: But this is what I got instead: Please explain how I […]

It is possible to read an input form with an existing mathematical formula and get the result?

We all know how to get different number values and then make calculations, but what if in the input form you write the formula, let’s say: 10 * 2, and you want to extract this information and get the result? It is possible to get this information so the Javascript can interpret this like an […]

Saved data breaks material ui text fields

hey so im new to both react and material ui and im having an issue where my text fields work fine but if the user has saved data to autofill the field it breaks the styling on it. I have included the code from the component below. I apologize if this is a dumb question […]

Can’t get user input to apply an update

Everything seems to be working in my code, except on my update I’m trying to get the user inputted text from my HTML page and apply it as an update, but it’s not working. Any ideas? Here’s my javascript: app.patch("/tm/v1/tasks/:id", async (req,res)=>{ try { const { id } = req.params; const update = { name: […]

React Typescript input onChange event type?

I’m trying to get text from a input element, setting it to state and then rendering it back into the input box. However I think my event typing is wrong? I’ve searched online and tried implementing many solutions but none have worked so far. Any help is appreciated. my component: import React, { ChangeEvent, ChangeEventHandler, […]

most efficient way to set length restrictions on input type number in React

I have 3 inputs for a user to enter some values that end up being a date format for my inputs ‘day’ and ‘month’ i want the user to enter 2 integers and no more for my input ‘year’ i want the user to enter 4 integers. What is the best way to do this? […]

html input with cytoscape.js fails to open the dialog window

I am building an interactive graph app where the user would upload a data file. The app would then build the graph from the input file. I am having problems with making the input work with the cytoscape . More specifically, the file dialog window does not pop up when I include the div. That […]

How come my javascript input-function always return false? [duplicate]

Thanks for being able to help! I want to know why my function always returns false, and how I can fix it. I’ve created this in javascript to do different things depending on if the result of check is true or false. else if (textNodes[15].id === 16 && nextTextNodeId === 16) { showSongContainer(); if(check) { […]

Vue2 generated select triggers event for every other selects

I have a Vue2 project with Buefy extension. Then I have an array of objects which is rendered in the template with one select component for each item. Everything works, but if I trigger @input event on one of the select elements it triggers input event for all selects in the list. I dont understand […]

I am trying to build an interface for a random UA generator based on how many people live in a residency using react. I need a simple input on page [closed]

I am trying to build an interface for a random UA generator based on how many people live in a residency using react. I need a simple input on page [email protected]:bezzantsam/OxfordHouseRandomTestGenerator.git Source: React – Stack Overflow

Restrict html input box to max width of a border around it

I have the following html code, with several instances of a border surrounding an input field and two labels. What I’d like to have happen is that all of these are restricted to being within the border surrounding them; what’s actually happening though is that the input field are effectively ignoring the border, drawing over […]

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.