Clearing Laravel Session value in a textfield using javascript

Question

I'm trying to clear the values in a text field upon clicking on a cross button inside it.

HTML MARKUP

<input type="text" 
    placeholder="I want to go..." 
    class="nom-fields" 
    value="{{Session::get('place')}}" 
    name="place-city" 
    id="geocomplete">
<input type="reset" 
    id="clear-input-close" 
    class="clear-input-close" 
    value="" 
    onclick="JavaScript:eraseText();">

JAVASCRIPT

function eraseText() {
    document.getElementById('geocomplete').value = '';
}

If works fine if the Session::get('place') is empty. But if it has some value, the textfiled is getting cleared and restores the value immediately. How can I clear the value just in the textfield?

Could you try to add autocomplete="off" to the input? https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion Not sure if it helps. Perhaps it's some browser plugin? — Francesco de Guytenaere, Jul 07 '15 at 16:58
@SudhansuChoudhary: Yes it's getting called. I verified that by alerting a text. — user1012181, Jul 07 '15 at 17:00
Can you post how Laravel is rendering `value="{{Session::get('place')}}" ` using Chrome Developer tools. — whoacowboy, Jul 07 '15 at 17:09
Is your page auto refreshing or do you have some sort of auto refresh tool running in your browser? I tested your code on JSBin and it works, so something else is going on. http://jsbin.com/qowovobepi/edit?html,js,output — whoacowboy, Jul 07 '15 at 17:13
Even I checked it. There is no auto refreshing or any sort of such tool running. Can you try to create a Session variable in Laravel and try to clear the textfield? — user1012181, Jul 07 '15 at 17:15
Works great. When you say "But if it has some value, the textfiled is getting cleared and restores the value immediately." Do you refresh your browser? Also try a different browser and see if that helps. — whoacowboy, Jul 07 '15 at 17:21
`function eraseText() { document.getElementById('geocomplete').value = ''; alert('cleared'); }` I tried this code. So it clears the value, alert "cleared" and then fills up the textfield with the same value. — user1012181, Jul 07 '15 at 17:23
test this, `function eraseText() { document.getElementById('geocomplete').value = ''; alert(document.getElementById('geocomplete').value); }` — Sudhansu Choudhary, Jul 07 '15 at 17:24
@whoacowboy: tested with different browsers and it's the same result. — user1012181, Jul 07 '15 at 17:25
and when you say, "I'm trying to clear the values in a text field upon clicking on a cross button inside it.", I feel you can use `` — Sudhansu Choudhary, Jul 07 '15 at 17:26
@SudhansuChoudhary: the alert displays nothing, but the textfiled still displays the same value. — user1012181, Jul 07 '15 at 17:26
@SudhansuChoudhary: I'm trying to use text field for design reasons. — user1012181, Jul 07 '15 at 17:27
@user1012181 What you have shown us **works**. This means there is something else going on with the system that you will have to debug. You can check the network tab in your dev tools to see if you are getting more data from the server. — MirroredFate, Jul 07 '15 at 18:41

score 2 · Accepted Answer · edited May 23 '17 at 11:54

2

The Laravel Session is handled on the server side, so you need to clear it from there. One approach would be like this.

Note: This uses jQuery, if you are not, hitting a url with javascript only is a little more involved. Check out this question for more details..

AnyController.php

    public function clearSessionKey($key)
    {
        if (Session::has($key))
        {
            Session::forget($key);
        }
    }

Routes.php

    Route::get('clear/session/{key}', 'AnyController@clearSessionKey');

JavaScript

    function eraseText() {
        document.getElementById('geocomplete').value = '';

        $.getJSON("/clear/session/place",
        function(data) {
            //doSomethingWith(data); 
        }); 
    }

edited May 23 '17 at 11:54

Community

1
1

answered Jul 07 '15 at 17:05

whoacowboy

6,982
6
44
78

I don't want to clear the Session variable. I just want to clear the input field. It can be done from client side I guess. – user1012181 Jul 07 '15 at 17:06
@user1012181 Your question title is confusing, sorry. – whoacowboy Jul 07 '15 at 17:08

score 0 · Answer 2 · answered Jul 07 '15 at 18:37

0

The following seems to work:

<input type="text" placeholder="I want to go..." class="nom-fields" value="12345" name="place-city" id="geocomplete">
<input type="reset" id="clear-input-close" class="clear-input-close" value="✖" onclick="eraseText()">
<script>
    function eraseText() {
        document.getElementById('geocomplete').value = '';
    };
</script>

It clears whatever is in the text field.

I think your problem might have been when you were loading your javascript function, or how you were using it in onclick.

If you right click on the page, and select Inspect element, there is a console tab that will show you javascript errors. That can give you a better idea of what specifically is going wrong.

answered Jul 07 '15 at 18:37

MirroredFate

12,396
14
68
100

I checked the console and there's no error. It's really frustrating :/ – user1012181 Jul 07 '15 at 18:42
@user1012181 Your problem is that something is re-writing to that text field. My bet would be you are accidentally submitting a form when clicking the reset button, and reloading the page. – MirroredFate Jul 07 '15 at 18:44
The page is not reloading. I'm 100% sure about it. It's all happening in a fraction of second. – user1012181 Jul 07 '15 at 18:47
@user1012181 The time in which you perceive something is a terrible metric for what's going on behind the scenes when it comes to computers. – MirroredFate Jul 07 '15 at 20:36
I checked the developers tool when inspecting the reload. – user1012181 Jul 07 '15 at 20:37
Ok, cool. You should try making a simple view with just the html in my answer, and see if it works as expected. Next, make the value default to the session place value. If that works, you know something else is happening to reset that field. Check your on click bindings. – MirroredFate Jul 07 '15 at 21:19

Clearing Laravel Session value in a textfield using javascript

2 Answers2