const searchField = document.getElementById('search')
if (searchField !== null && searchField !== undefined) {
searchField.addEventListener("keyup", (e) => {
e.preventDefault()
console.log(e);
if (e.key === 13) console.log('Hit Enter');
})
}
OK, trying a simplified test.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@materializecss/materialize@1.1.0-alpha/dist/css/materialize.min.css">
<title>Document</title>
</head>
<nav>
<div class="nav-wrapper">
<form>
<div class="input-field">
<input id="search" type="search" required>
<label class="label-icon" for="search"><i class="material-icons">search</i></label>
<i class="material-icons">close</i>
</div>
</form>
</div>
</nav>
<body>
<script src="https://cdn.jsdelivr.net/npm/@materializecss/materialize@1.1.0-alpha/dist/js/materialize.min.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>Javscript:
const sb = document.getElementById('search')
sb.addEventListener('change', (e) => {
e.preventDefault()
let parms = e.target.value
window.location.href = 'https://google.com'
})I also tried:
window.location.assign('https://google.com')Maybe it's the sleep deprivation, but I thought that should cause a redirect to the Google home page...
But it doesn't...
@doughballs
https://stackoverflow.com/questions/5999118/how-can-i-add-or-update-a-query-string-parameter
Thanks for the articles. I don't think it's the lack of semi-colons that causing the issue. :-)
I'm suspicious now. I stripped the form tags out:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<title>Document</title>
<style>
.search-bar {
position: relative;
margin: 0 auto;
width: 60%;
}
input {
width: 100%;
height: 1.6rem;
}
.fa-search, .fa-times {
position: absolute;
padding-top: .35rem;
}
.fa-search {
padding-left: .25rem;
}
.fa-times {
padding-right: .25rem;
}
</style>
</head>
<body>
<div class="search-bar">
<input id="search" type="search">
<i class="fas fa-search"></i>
<i class="fas fa-times"></i>
</div>
<script>
const sb = document.getElementById('search');
if (sb !== null && sb !== undefined) {
sb.addEventListener('change', (e) => {
e.preventDefault();
console.log(`change event`);
window.location.href = 'https://google.com';
// window.location.assign('https://google.com');
});
}
</script>
</body>
</html>and it works...
Okay, now I feel really dumb. The event that I need to be looking for is the search event:
sb.addEventListener('search', (e) => {
console.log('Search: Go to Google!')
window.location.href = 'https://google.com'
})That being said, it's always these little side journeys that are the most educational! :laughing:
//sidenav
const sideNav=document.querySelector ('.sidenav');
M.sidenav.init(sideNav,{});
//slider
const slider = document.querySelector('.slider');
M.Slider.init(slider, {
indicators: false,
height: 500,
transition: 500,
interval: 6000
});
</script>
</body>
<textarea id="test">some long string</textarea>
<label class="active" for="test">Test Textarea</label>
"some long string" will show in text area with extra spaces >>> " some long string "
Found the solution for my issue:
My code:
<textarea id="test">
some long string
</textarea>
<label for="test" class="active">Test Textarea</label>And it should be:
<textarea id="test">some long string</textarea> <!--In the same line-->
<label for="test" class="active">Test Textarea</label>
I'm getting back into web development after several years and I'm running into issues just getting things set up right. I'm trying to initialize a modal with jQuery, but I'm getting an error that "$" isn't found. I added the jquery cdn and that fixed the inability to load jQuery, but then it can't find the modal function. I've downloaded the zip from materialize and included the materialize js and css. The css works, but I'm thinking that the js is supposed to include jQuery, but I'm rally not sure. I've forgotten so much of this.
What do I need to do to get the jQuery for modals working again?
