Removing part of a form input's value with jQuery/JavaScript

Question

I have a hidden input on my page like so:

<input type="hidden" name="required" value="name,town,tel,email">

As people fill in it's associated form, certain other fields become required (i.e. State becomes required when choosing "USA" from a Country dropdown).

I have two functions, one named addToRequiredFields() and one named removeFromRequiredFields() which fire as USA is selected/de-selected, however the removal one doesn't seem to be working, and I can't figure out why.

function addToRequiredFields(string) {
    var required = $('input[name=required]').val();
    required += ',' + string;
    $('input[name=required]').val(required);
}

function removeFromRequiredFields(string) {
    var required = $('input[name=required]').val();
    required.replace(',' + string, '');
    $('input[name=required]').val(required);
}

The function is called at .on('change') of the Select dropdown.

did you try `required = required.replace(',' + string, '');` instead of just `required.replace(',' + string, '');` — Mohamed-Yousef, Apr 26 '17 at 08:24
Haha wow, it was that simple! Thanks Mohamed. I don't suppose you could help me `replace()` every instance of said string, not just one, could you? — mpdc, Apr 26 '17 at 08:27
BTW: `replace(',' + string, '')` doesn't work if `string` is at the beginning — hindmost, Apr 26 '17 at 08:27
Just a sidenote, the logic of which fields are mandatory should be done on the server. What's to stop me from simply editing this field to make nothing mandatory and send you a bad form? — Artless, Apr 26 '17 at 08:28
take a look at http://stackoverflow.com/questions/13574980/jquery-replace-all-instances-of-a-character-in-a-string — Mohamed-Yousef, Apr 26 '17 at 08:32
@Artless Actually all inputs at the server _must_ be validated. If you add one at the client side, then it's just an additional feature, useful for UX. Client side validation can always be bypassed. If he's doing that on the server already, then it's ok to what he tries to implement here. Although ... there are better approaches (put string into array eg and manipulate it) — KarelG, Apr 26 '17 at 08:37
@mpdc http://stackoverflow.com/questions/13683606/replace-all-instances-in-string-with-a-variable-as-the-search-javascript — Mohamed-Yousef, Apr 26 '17 at 08:40

score 0 · Answer 1 · answered Apr 26 '17 at 08:32

Though Its not a proper way to validate controls based on input value , I made a script for you .

function addToRequiredFields(string) {
    var required = $('input[name=required]').val();
    fieldsArray = required.split(",")
    fieldsArray.push(string)
    $('input[name=required]').val(fieldsArray.join());
}

function removeFromRequiredFields(string) {
    var required = $('input[name=required]').val();
    fieldsArray = required.split(",")
    fieldsArray = fieldsArray.filter(function(item) { 
    return item !== string
})
    $('input[name=required]').val(fieldsArray.join());
}

console.log($('input[name=required]').val())

addToRequiredFields("age")

console.log($('input[name=required]').val())

removeFromRequiredFields("name")

console.log($('input[name=required]').val())

removeFromRequiredFields("tel")

console.log($('input[name=required]').val())

addToRequiredFields("name")

console.log($('input[name=required]').val())

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<input type="hidden" name="required" value="name,town,tel,email">
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

</body>
</html>

score 0 · Answer 2 · answered Apr 26 '17 at 08:39

Use the below login inside yourremove function.removeFromRequiredFields

//var requiredArr = $('input[name=required]').attr('value');
    var requiredArr = "name,town,tel,email".split(',');
var rmvIndex = requiredArr.indexOf("tel")//"tel" is your string to be removed

var newArr = requiredArr.splice(rmvIndex, 1);

$('input').attr('value', newArr.join(','))// set value attribute after removing that string

Removing part of a form input's value with jQuery/JavaScript

2 Answers2