CODEWITHSUNDEEP
jqueryinput
Andrey Shandrov
Andrey Shandrov

Reputation: 457

How to clear input value after first letter?

I want to clear all character after the first letters in the values of inputs using jQuery. I have this:

<form id="form">
    <label><input type="checkbox" name="checkbox-one[]" value="A some text">A some text</label>
    <label><input type="checkbox" name="checkbox-one[]" value="B some text">B some text</label>
    <label><input type="checkbox" name="checkbox-one[]" value="C some text">C some text</label>
    <label><input type="checkbox" name="checkbox-one[]" value="D some text">D some text</label>
    <label><input type="checkbox" name="checkbox-one[]" value="Е some text">Е some text</label>
    <label><input type="checkbox" name="checkbox-one[]" value="F some text">F some text</label>

    <input type="submit" value="submit">
</form>

I want the result to be this:

<form id="form">
    <label><input type="checkbox" name="checkbox-one[]" value="A">A some text</label>
    <label><input type="checkbox" name="checkbox-one[]" value="B">B some text</label>
    <label><input type="checkbox" name="checkbox-one[]" value="C">C some text</label>
    <label><input type="checkbox" name="checkbox-one[]" value="D">D some text</label>
    <label><input type="checkbox" name="checkbox-one[]" value="Е">Е some text</label>
    <label><input type="checkbox" name="checkbox-one[]" value="F">F some text</label>

    <input type="submit" value="submit">
</form>

How can I do it?

Upvotes: 1

Views: 176

Answers (3)

ReshaD
ReshaD

Reputation: 946

You can change the values before submitting them:

$("#submitForm").click(function() {

   $("#valueA").val($("#valueA").val().charAt(0));
   //continue for other values as well (b to f)
   $("#form").submit();

});

Your form will be changed to:

<form id="form">
  <label><input type="checkbox" id="valueA" name="checkbox-one[]" value="A some text">A some text</label>
  <label><input type="checkbox" id="valueB" name="checkbox-one[]" value="B some text">B some text</label>
  <label><input type="checkbox" id="valueC" name="checkbox-one[]" value="C some text">C some text</label>
  <label><input type="checkbox" id="valueD" name="checkbox-one[]" value="D some text">D some text</label>
  <label><input type="checkbox" id="valueE" name="checkbox-one[]" value="Е some text">Е some text</label>
  <label><input type="checkbox" id="valueF" name="checkbox-one[]" value="F some text">F some text</label>

  <button id="submitForm">Submit</button>
</form>

It still can be optimized as I saw the answers from other users.

Upvotes: 2

Bharat
Bharat

Reputation: 2464

You can try like this

  $("form" ).submit(function( event ) {
     $("input").each(function(){
     $(this).val($(this).val().charAt(0))
   });
 });

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337570

You can achieve this by providing a function to val() which returns only the first character of the current value:

$('input[type="checkbox"]').val(function(i, v) {
  return v[0];
})

// just to show it works:
$('input[type="checkbox"]').each(function() {
  console.log(this.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form">
    <label><input type="checkbox" name="checkbox-one[]" value="A some text">A some text</label>
    <label><input type="checkbox" name="checkbox-one[]" value="B some text">B some text</label>
    <label><input type="checkbox" name="checkbox-one[]" value="C some text">C some text</label>
    <label><input type="checkbox" name="checkbox-one[]" value="D some text">D some text</label>
    <label><input type="checkbox" name="checkbox-one[]" value="Е some text">Е some text</label>
    <label><input type="checkbox" name="checkbox-one[]" value="F some text">F some text</label>

    <input type="submit" value="submit">
</form>

However, it would arguably be better to do this in your code which populates the form source. This way the user will never see what the values were (assuming that's important to your logic). Using JS means that they will still be able to see the values that were originally loaded in the source of the page.

Upvotes: 3

Related Questions