Javascript question - no value returned on getElementById('fieldName').value

[Greg Lumley]

Hi, I realise this isn't strictly a process wire question I'm putting it here because of the wonderful help I've had in the past. 

I've done a lot of reading about but honestly, I'm not getting it. 

 

I'm trying to implement a simple search bar in my PW website but user input isn't being captured. 

	<div class="search-box">
		<form id='searchForm'>
		<input type="text" placeholder="Search anything" id="searchMeNow" value='aaaaa'>
		<a href="#" class="search-btn" id="searchButton">
		<i class="fa fa-search"></i>
		</a>	
		</form>

	</div>

Here is the script which is in test phase, once I have an output from the value field I'm good to go. I'm not sure why this isn't working as far as I know, it should?

My alert box returns empty after pressing enter? 

<script>
  const form = document.getElementById('searchForm');
  //alert(form);
  form.addEventListener('keypress', function(e) {
    if (e.keyCode === 13) {
      /*Testing*/
      /*Returns and Empty Value*/
      alert(document.getElementById('searchMeNow').value)
      e.preventDefault();
    }
  });
</script>

 

[Fokke]

Hi!

I tried your example and it seems to work properly, as the value of input is being outputted in alert after pressing enter.  Which browser you're using?  Any errors in console?

[Greg Lumley]

Thank you for checking, at least I know I'm not going mad. Okay so I've managed to figure out it has something to do with a Jquery script that's being loaded. As soon as I disable that, it works as expected. I never would have thought of that. I now need to figure out why jquery is changing the behaviour.