CODEWITHSUNDEEP
javascriptjqueryhtml
user12822558
user12822558

Reputation:

How to replace '/' with ''?

I have the following code where I try and replace '/' with '' in an input element. But its not working. The '/' is not being replaced.

How can I make it work?

var playlistTitle = document.getElementById('PlaylistTitleInput').value;
$('#PlaylistTitleInput').text($('#PlaylistTitleInput').text().replace("/", ''));
console.log(document.getElementById('PlaylistTitleInput').value);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="fullPageBackgroundForPlaylistAdding" id="fullPageBackgroundForPlaylistAdding" style="display: none;">
  <!-- style="display: none;" -->
  <div class="addPlaylistElementsContainer">
    <h1 class="playlistLabel">Create new playlist</h1>
    <div class="PlaylistTitleInput">
      <input id="PlaylistTitleInput" type="text" name="playlistTitle" placeholder="New Playlist" value="">
    </div>
    <div class="cancel_CreateDiv">
      <button id="cancelBtnPress">Cancel</button><button id="createBtnPress">Create</button>
    </div>
  </div>
</div>

Upvotes: 0

Views: 71

Answers (3)

thingEvery
thingEvery

Reputation: 3434

Listen for the click. Make a regex to match all forward slashes. Replace the regex with your empty string.

$('#createBtnPress').on('click', function() {
  var regex = /\//g;
  var formattedInput = $('#PlaylistTitleInput').val().replace(regex, '');
  $('#PlaylistTitleInput').val(formattedInput);
  console.log(formattedInput);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="fullPageBackgroundForPlaylistAdding" id="fullPageBackgroundForPlaylistAdding">
  <!-- style="display: none;" -->
  <div class="addPlaylistElementsContainer">
    <h1 class="playlistLabel">Create new playlist</h1>
    <div class="PlaylistTitleInput">
      <input id="PlaylistTitleInput" type="text" name="playlistTitle" placeholder="New Playlist" value="">
    </div>
    <div class="cancel_CreateDiv">
      <button id="cancelBtnPress">Cancel</button>
      <button id="createBtnPress">Create</button>
    </div>
  </div>
</div>

Upvotes: 0

random
random

Reputation: 7891

The input element value is accessed using .val() and not with .text(). Use regular expression /\//g to replace all occurrences of / with empty string.

$('#PlaylistTitleInput').val($('#PlaylistTitleInput').val().replace(/\//g, ''));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="PlaylistTitleInput" value="abc/fjk/">

Upvotes: 1

KHansen
KHansen

Reputation: 930

Here is a working example:

var playlistTitle = document.getElementById('PlaylistTitleInput').value;
$('#PlaylistTitleInput').val(playlistTitle.replace("/", ''));
console.log(document.getElementById('PlaylistTitleInput').value);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="fullPageBackgroundForPlaylistAdding" id="fullPageBackgroundForPlaylistAdding" style="display: none;">
  <!-- style="display: none;" -->
  <div class="addPlaylistElementsContainer">
    <h1 class="playlistLabel">Create new playlist</h1>
    <div class="PlaylistTitleInput">
      <input id="PlaylistTitleInput" type="text" name="playlistTitle" placeholder="New Playlist" value="Test/123">
    </div>
    <div class="cancel_CreateDiv">
      <button id="cancelBtnPress">Cancel</button><button id="createBtnPress">Create</button>
    </div>
  </div>
</div>

Upvotes: 0

Related Questions