We Keep Coding

Rename text (change space per point) in input with javascript

look this: i chargue this file.. and it shows like this
and i need to rename it like that:
I would like to automatically rename spaces by periods, and delete other characters like [,()!;'\[\]}{=]
I honestly do not have a script, because I do not know how to do it, I had one but it was a disaster haha; I broke all the html :/
I just need to modify the text in input. script in javascript or jquery
I clarify that the texts are always different
I leave you a jsfiddle https://jsfiddle.net/qwertyip/j4dcsL7n/12/
I hope you can help me, regards

I am unsure when you want to modify the value, but this will update the value for you:
// Get a reference to the element in question
let renameThese = Array.from(document.querySelectorAll("input[name^='rename']"));
// Loop through all the elements to be renamed
renameThese.map(el =>
// Replace the spaces with periods and remove all the other characters.
el.value = el.value.replace(/\ /g, '.').replace(/[\[\]\{\}\(\)\;\!\;\'\=]/g, ''));
<table id="list-files" class="table table-striped table-condensed table-hover">
<thead>
<tr>
<th width="35">
<div class="checkbox-custom checkbox-default">
<input type="checkbox" id="select-all-files" checked="">
<label for="select-all-files"></label>
</div>
</th>
<th>File</th>
<th>Size</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="checkbox-custom checkbox-default"><input name="files[]" checked="" type="checkbox" value="2"><label></label></div>
</td>
<td class="pt-none pb-none">
<div>
<div class="pull-left mt-xs mr-xs">PDF Shaper Professional v8.9 (2-click run) / </div>
<div style="overflow:hidden"><input class="form-control input-sm m-none" style="background-color: transparent" type="text" name="rename[2]" value="PDF S[]{}haper Professional v8.9 (2-click run).exe"></div>
</div>
</td>
<td>17.2 MiB</td>
</tr>
<tr>
<td>
<div class="checkbox-custom checkbox-default"><input name="files[]" checked="" type="checkbox" value="2"><label></label></div>
</td>
<td class="pt-none pb-none">
<div>
<div class="pull-left mt-xs mr-xs">PDF Shaper Professional v8.9 (2-click run) / </div>
<div style="overflow:hidden"><input class="form-control input-sm m-none" style="background-color: transparent" type="text" name="rename[2]" value="PDF S[]{}haper Professional v8.9 (2-click run).exe"></div>
</div>
</td>
<td>17.2 MiB</td>
</tr>
</tbody>
</table>
Note: If you leave a comment when you would like to update the value, leave a comment and will update, else, here you go.

Reading values from a dynamic table form

OK. So I am assisting my backend developer with some form submission issues. Here's the scenario :
There is a table inside a html form with two columns and dynamic rows. The user can click on an Add button to insert a row with one text input for each column. I did that using jQuery. Here's how the table looks after the user has inserted two rows :
<form>
...
<tbody class="table-hover addScreen">
<tr>
<td class="text-left"> <input name="screenNameTextBox" type="text" id="screenNameTextBox" value="a"> </td>
<td class="text-left"> <input name="seatsAvlTextBox" type="text" id="seatsAvlTextBox" value="b"> </td>
</tr>
<tr>
<td class="text-left"> <input name="screenNameTextBox" type="text" id="screenNameTextBox" value="c"> </td>
<td class="text-left"> <input name="seatsAvlTextBox" type="text" id="seatsAvlTextBox" value="d"> </td>
</tr>
</tbody>
...
</form>
Now we have no idea how to read this data on the server side when the submit button is clicked. We tried this :
string textboxval1 = screenNameTextBox.value;
string textboxval2 = seatsAvlTextBox.Value;
but that only gives us the first set of values. Please suggest what are the best practices when doing something like this.
PS : I'm an iOS dev so forgive me if i said some blunder. ;-)

Just a quick example of my comment,
function readForm(){
event.preventDefault;
var resultsBox= document.getElementById('results');
var screenNames=document.getElementsByClassName('screenNameTextBox');
var seatsAv=document.getElementsByClassName('seatsAvlTextBox');
for(var i=0;i<=screenNames.length;i++){
resultsBox.innerHTML+=screenNames[i].value+' '+seatsAv[i].value+'<br>';
}
}
<form onsubmit="readForm();">
Enter some values:<br>
<input type="text" class="screenNameTextBox"/>
<input type="text" class="seatsAvlTextBox"/>
<input type="text" class="screenNameTextBox"/>
<input type="text" class="seatsAvlTextBox"/>
<input type="submit" />
</form>
<div id="results">results :<br></div>

Angular.js - ng-disabled on checkbox and still submit a valid form?

I'm using angular.js and trying to verify the form before actually submitting it. This is my HTML so far:
<form name="form" class="css-form" novalidate>
<table>
<tr>
<td>
<input type="text" ng-model="branch.phone_number" name="uPhone" required="" />
<br />
<div ng-show="form.$submitted || form.uPhone.$touched">
<div ng-show="form.uPhone.$error.required">Insert phone number!</div>
</div>
</td>
</tr>
<tr>
<td>
<input type="checkbox" ng-model="branch.approved" ng-checked="branch.approved === 1" required="" ng-disabled="checkUser()" />
</td>
<tr/>
<tr>
<td align="right">
<input type="button" ng-click="reset()" value="Reset" />
</td>
<tr/>
<tr>
<td align="left">
<input type="submit" ng-click="form.$valid && save()" value="Save" />
</td>
</tr>
</table>
</form>
And this is my checkUser function:
$scope.checkUser = function() {
return (user.get().is_admin === 1) ? false : true;
};
Basically, if ng-model="branch.approved" is not truthy, the form won't allow to submit it. If I delete the ng-disabled attribute, the form submits.
What's going on and how to solve it? Thanks!

Your checkbox is required - when the control is disabled, it is not setting any value.
Remove the required="" attribute from input type="checkbox" and it should work as you expect

try this:
use ng-disabled="user.is_admin" then use ng-change on checkbox like this ng-change="checkUser()"
change the function to
$scope.checkUser = function() {
$scope.user = user.get();
};
i guess the user admin state can change during the form life... otherwise u don't need the change event just use ng-disabled="user.is_admin" and initialize the user object inside the controller

Submit multiple forms with one Submit All button in AngularJS

I have a form in Angular setup like the following.
Users can make changes and submit one at a time and it works as expected but I'd like to add a "Submit All" that would submit each item one at a time as though the user were pressing the submit button for each. Im a little stumped on the best way to do this. As of right now I cannot submit them as a batch due to API constraints. I would also like to keep jQuery out of the equation.
My first thought is to create a new object that contains the info for each item and then loop over it and submit that way. I am unsure how to set this up in my controller.
<div class="table-responsive">
<table class="table table-striped">
<thead>
<th>Name</th>
<th></th>
<th>Age</th>
<th>Kids</th>
<th></th>
</thead>
<tbody>
<tr class="pending-item animate-repeat"
data-ng-repeat="user in Users"
data-ng-form="userForm"
role="form"
data-ng-submit="submitUser(user, userDetails)"
novalidate>
<td class="img-container">
<img data-ng-src="{{user['image']['url']}}"
alt="{{user['image']['alt'] || ' '}}"
class="img-responsive" >
</td>
<td class="col-xs-6">
<div class="user-info">
<p class="user-name">
{{user['name']}}
</p>
</div>
</td>
<td>
<div class="input-group input-group-sm">
<span class="input-group-addon">Age</span>
<input type="number" min="0"
name="age"
class="form-control age"
data-ng-init="userDetails.age = user['age']"
data-ng-model="userDetails.age"
required>
</div>
</td>
<td>
<div class="input-group input-group-sm">
<input type="number" min="0" step="1"
name="kids"
class="form-control kids"
data-ng-disabled="user['kids'] === true"
data-ng-pattern="/^\d+$/"
data-ng-init="userDetails.kidsCount = user['kids']['quantity']"
data-ng-model="userDetails.kidsCount"
required>
<div class="input-group-addon"># of kids</div>
</div>
</td>
<td>
<div class="btn-group btn-col">
<button type="submit"
class="btn btn-success btn-sm"
data-ng-disabled="userForm.$invalid || userDetails.working"
data-ng-click="submitUser(user, userDetails)">
Submit
</span>
</button>
</div>
</td>
</tr>
</tbody>
</table>
<button ng-click="submitAllUsers()">Submit All Users</button>
</div>

Yes, create a object in your controller, say $scope.formData={}, and then bind it with your elements using ng-model or data-ng-model and then on button click pass this object in your controller and do the required stuff.

AngularJS Input Auto Focus

currently I'm learning the AngularJS. I have a problem in autofocusing an element.
My idea is:
If a span element is clicked, it is hid and it triggers the input element to appear (with autofocus).
Here is the code that I've made so far:
<table>
<thead>
<tr>
<th>Words</th>
</tr>
</thead>
<tr>
<td ng-if="!edit" class="animate-if">
<span ng-click="$parent.edit = true" style="border: none;"> Some words </span>
</td>
<td ng-if="edit" class="animate-if">
<input type="text" value="Some words" ng-blur="$parent.edit = false" style="background: #d7d7d7;">
</td>
</tr>
</table>
I have it working, but the input text element is not automatically focused immediately after it appears. I've read some reference in show/hide and autofocusing input text element using directive. But they don't really helpful for me.
Thanks for your response.

try this
<input type="text" value="Some words" ng-focus="$parent.edit = true" ng-show="$parent.edit = true" style="background: #d7d7d7;">