CODEWITHSUNDEEP
javascript
Airman
Airman

Reputation: 130

Javascript onclick fails to send value while onfocus of text input

If a user clicks the save button as the next action after typing street data the onblur action intercepts the onclick and does not trigger the save. However, if you add some padding (30px) and click above the word save it works but below the word Save it does not work, the same as with no padding. I'm certain users will go right from typing text in the input field then click Save which will fail unless they first click somewhere else and then click Save. I’ve provide html and javascript example below. Is there a way using javascript to solve this issue?

<html>
<script>
 function showstreet() { 
   var x = document.getElementById('street').value;
   alert(x);
 }
 function focused() {
   document.getElementById('title').style.display='';
   document.getElementById('street').value='';
 }
 function blured() {
   document.getElementById('title').style.display='none';
   if (document.getElementById('street').value == '') {
       document.getElementById('street').value='street';
   }
 }
</script>
<style>
 .pad5  { padding:5px;  }
 .pad30 { padding:30px; }
</style>
<body>
 <div id="title" class="pad5" style="display:none;">STREET NAME</div>
 <div>
  <input id="street" type="text" name="street" value="street" class="pad5"
   onfocus="focused()" onblur="blured()">
 </div>
 <br>
 <div>
  <input type="button" value="Save" class="pad30" onclick="showstreet()">
 </div>
</body>
</html>

I converted this to jsfiddle but I'm not doing something right (newbie) https://jsfiddle.net/eyo63mav/26/

Upvotes: 3

Views: 98

Answers (3)

Joshua
Joshua

Reputation: 649

Styling rarely makes a difference with events -- now, while that's a blanket statement and in lots of cases we find the styling of an inline element such as a link or a paragraph becoming problematic with inline events such as OnClick and OnFocus, in your case, adding thirty pixels to the size of a button is not your problem.

The problem with your code is that the variable you're assigning your #title's value to is local (it's inside the scope of showstreet(), of which can only be accessed by aforementioned function) -- nevermind that, it's never used again. You save a value to it, it alerts the user, and that's it -- it's never reassigned nor reused, so while it'll forever stay as the street name they entered, you'll never see it unless you apply it to something.

It took me a while to figure out what exactly you're trying to save, but I think I've managed it.

Here's the code I've created:

var streetValue = "Your street will appear here.";


    function clickedField() {

        // Init title
        document.getElementById('title').innerHTML = streetValue;

        // Reset field
        document.getElementById('street').value = '';

    }


    function saveValue() {
        // Reassign streetValue
        streetValue = document.getElementById('street').value;

        // Checking if value was left empty
        if (streetValue === '') {
            document.getElementById('title').innerHTML = "Error: No Street Entered!";
        } else {
            document.getElementById('title').innerHTML = streetValue;
        }
    }

(I'm not entirely sure what you had onblur for, but it should be very easy to insert back. If you need some help with that, comment on my reply, I'll be happy to.)

Now if we update the HTML with the approprate functions:

 <div id="title" class="pad5" style="">STREET NAME</div>
 <div>
  <input id="street" type="text" name="street" value="street" class="pad5"
   onfocus="clickedField()">
 </div>
 <br>
 <div>
  <input type="button" value="Save" class="pad30" onclick="saveValue()">
 </div>

Upvotes: 0

Lahiru Jayakody
Lahiru Jayakody

Reputation: 5410

use onMouseDown instead of onClick in your save button. Then onMouseDown will be fired before onBlur

Upvotes: 1

navnit
navnit

Reputation: 310

below is working code

function showstreet() {
  var x = document.getElementById('street').value;
  alert(x);
}

function focused() {
  document.getElementById('title').style.display = '';
  document.getElementById('street').value = '';
}

function blured() {
  document.getElementById('title').style.display = 'none';
  if (document.getElementById('street').value == '') {
    document.getElementById('street').value = 'street';
  }
}
<div id="title" class="pad5" style="display:none;">STREET NAME</div>
<div>
  <input id="street" type="text" value="street" class="pad5" onfocus="focused()" onblur="blured()">
</div>
<br>
<div>
  <input type="button" value="Save" class="pad30" onclick="showstreet()">
</div>

Upvotes: 1

Related Questions