jQuery to Capitalize Ajax property

Question

I've been having this problem where in I need to capitalize the text input being sent to ajax before saving it to the database. Basically I need to lowercase the text value and then capitalize the first letter before finally saving it to database.

Here's my take so far:

 $('#button').click(function(event) {

         event.preventDefault();

         $.ajax({
           url: '/categories',
           method: 'post',
           data: {
             category: { name: $('#new-category').val().toLowerCase().css('text-transform', 'uppercase') }
           },
           success: function(category){
              // console.log(response);
              if(category.id != null){
                let newOption = $('<option/>')
                .attr('value', category.id)
                .attr('selected', true)
                .text(category.name)

                $('#category_select').append(newOption);
                $('#new-category').val('');
              }
           },
           error: function(xhr){
             let errors = xhr.responseJSON;
           }

         });
     });

As you can see on this part:

  category: { name: $('#new-category').val().toLowerCase().css('text-transform', 'uppercase') }
               }

This returns an error. How do I do this and jQuery and make sure what is being sent out has the first text in the category name got uppercase or simply capitalize?

`$('#new-category').val().toLowerCase().css('text-transform', 'uppercase')` is Wrong. `$('#new-category').val().toLowerCase()` is text, so we cannot use `css()` function — Wang Liang, Jan 13 '20 at 01:06
Does this answer your question? [How do I make the first letter of a string uppercase in JavaScript?](https://stackoverflow.com/questions/1026069/how-do-i-make-the-first-letter-of-a-string-uppercase-in-javascript) — Arun A S, Jan 13 '20 at 01:09
@ArunAS I tried it but it did not resolve my issue. It's returning: Uncaught ReferenceError: capitalizeFirstLetter is not defined – — , Jan 13 '20 at 01:32

Alaksandar Jesus Gene · Accepted Answer · 2020-01-13T01:37:14.993

0

Referring to this

stackoverflow

$('#button').click(function(event) {

     event.preventDefault();


     $.ajax({
       url: '/categories',
       method: 'post',
       data: {
         category: { name: capitalizeFirstLetter($('#new-category').val()) }
       },
       success: function(category){
          // console.log(response);
          if(category.id != null){
            let newOption = $('<option/>')
            .attr('value', category.id)
            .attr('selected', true)
            .text(category.name)

            $('#category_select').append(newOption);
            $('#new-category').val('');
          }
       },
       error: function(xhr){
         let errors = xhr.responseJSON;
       }

     });
 });


function capitalizeFirstLetter(string) {
     string  = string.toLowerCase();
    return string.charAt(0).toUpperCase() + string.slice(1);
}

https://jsfiddle.net/uypmjh9q/

edited Jan 13 '20 at 01:37

answered Jan 13 '20 at 01:21

Alaksandar Jesus Gene

6,523
12
52
83

For instance I type 'BLOCK' it must transform this to 'Block' with the first letter capitalize and then the rest to lowercase. – Jan 13 '20 at 01:24
Uncaught ReferenceError: capitalizeFirstLetter is not defined – Jan 13 '20 at 01:29
This is a rails app so all the codes are inside `$(document).on('turbolinks:load', function(){` – Jan 13 '20 at 01:31
1

you are missing this function capitalizeFirstLetter(string) { from my answer. You need to paste it just below the button click function. I have also updated the answer for your BLOCK case.. – Alaksandar Jesus Gene Jan 13 '20 at 01:32
I have referred a js fiddle link and a snapshot of output. It should work – Alaksandar Jesus Gene Jan 13 '20 at 01:38
Look at this here's my whole code: https://jsfiddle.net/3rtf051L/ – Jan 13 '20 at 01:39
I solve it. it should be like this: `return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();` – Jan 13 '20 at 01:45

score 0 · Answer 2 · answered Jan 13 '20 at 01:28

0

you might want to use this on your input oninput="this.value = this.value.toUpperCase()"

answered Jan 13 '20 at 01:28

Nathan

21
4

1

explain this a bit more. – Jan 13 '20 at 01:31
this is for your html – Nathan Jan 13 '20 at 01:37
– Nathan Jan 15 '20 at 01:52

jQuery to Capitalize Ajax property

2 Answers2