We Keep Coding

Save specific combinations out of a list on PHP?

This is kind of such a specific question that I don't know where to start despite googling so I came here for advice.
Let's say on my page I have three sliders, one has three different color options for a square. The second has three different color options for a circle, and the third has three different color options for say, a triangle. And then a submit button.
How would I go about making it possible for the user to select a color of each and then submit, so it will save the specific combination to the backend? Any advice on how this would be done?

You have to name all your inputs and they values will be sended ehwn you submit the form.
Example:
<form action="" method="post">
<input type="range" min="1" max="100" value="50" name="square">
<input type="range" min="1" max="100" value="50" name="circle">
<input type="range" min="1" max="100" value="50" name="triangle">
<input type="submit" value="">
</form>

You can set a form in HTML with all the inputs format and then send the information of each input to your specific URL
<form action="../doStuff.php" method="post">
<input type="range" min="1" max="3" value="1" name="square">
<input type="range" min="1" max="3" value="1" name="circle">
<input type="range" min="1" max="3" value="1" name="triangle">
<input type="submit" value="Send Information">
</form>
Each input lets you choose a number from 1 to 3. The rest you can define it with javascript

Disable Chrome's saved credit card info on an input field

I am having trouble disabling Chrome's payment method dropdown that is supposed to appear when you click in the credit card field but it is appearing when you click in a subject input field. Please note, the HTML is generated automatically and cannot be edited directly, I will need to adjust using JS.
<form>
<div id="subject_row" class="form-row form-text eCardFields show">
<div class="form-content">
<span class="field-required"></span>
<label for="ecard_subjectname">Subject: *</label>
<input type="text" name="ecard_subjectname" id="ecard_subjectname" value="" maxlength="50" placeholder="disabled only for this component">
<input type="hidden" name="ecard_subjectsubmit" id="ecard_subjectsubmit" value="true">
</div>
</div>
</form>
This is what I have tried:
//attempt 1
$('#ecard_subjectname').attr('autocomplete', 'new-password');
//attempt 2
$('#ecard_subjectname').attr('autocomplete', 'off');

Try using terrylinooo's disableAutoFill for jQuery: https://github.com/terrylinooo/jquery.disableAutoFill

Angular 5 DOM two way binding input number and slider

I try to use a slider and input of type number at the same time. I create the objects in runtime so I would like to do it just in the DOM.
If I change the value of the slider the input gets the same value but not the other way around.
And also there is not value in the input number in the beginning.
..
*ngFor="let vk of selectedVK"
..
<div class="row">
<div class="col-md-7">
<input
type="range"
ngModel
name="slider"
#slider="ngModel"
min="0"
max="{{vk.max}}"
step="10"
value="{{vk.max/2}}"/>
</div>
<div class="col-md-5">
<input
type="number"
class="form-control"
[value]="slider.value"
max="{{vk.max}}"
min=0>
</div>
<p>{{slider.value}}</p>
</div>

You need to use two-way data binding.
With two-way data binding, when properties in the model get updated, so does the UI. When UI elements get updated, the changes get propagated back to the model.
<input
type="number"
class="form-control"
[(ngModel)]="slider.value"
max="{{vk.max}}"
min=0>

Shifting jQuery focus to next div separated input

I have 3 inputs for every div container (e.g. first-section, second-section ...), and I have several such div containers on my page, similar to this:
...
<div id="first-section">
<fieldset>
<legend>First Section</legend>
<input type="number" placeholder="000" id="input1" min="0" max="255" autofocus maxlength="3" required>
...
</fieldset>
</div>
<div id="second-section">
<fieldset>
<legend>Second Section</legend>
<input type="number" placeholder="000" id="input2" autofocus min="0" max="255" maxlength="3" required>
...
how can I use jQuery to move from input1 to input2 to input3 (not shown) to input4 (not shown) only after the user has entered the maxlength of input which is set to 3? My jQuery below does not work because when I move onto the third input (not shown), it keeps resetting the focus back to input 2.
$(':input').keyup(function(e){
if($(this).val().length==$(this).attr('maxlength')){
$(this).nextAll(':input').first().focus();
if($('#input1').val().length==$('#input1').attr('maxlength')){
$('#input2').focus();
}
}
})

You can find the div that contains the current input, then find the next sibling of the div and the input inside the next div element and set the focus to that.
$(this).closest('div').next().find(':input').first().focus();
Demo: Fiddle

The above one has following issues:
unable to move to previous tab once its filled.
skips the text box which is already filled.
makes things worst if you have JS validations on any input fields.
Use the below jQuery plug-in its easy to configure and use:
Developer Site: http://www.mathachew.com/sandbox/jquery-autotab/
Documentation: https://github.com/Mathachew/jquery-autotab/blob/master/README.md
Includes both Angular and React examples
Cheers...

change value of 2 fields depending on dropdown and radio button selection

I am trying to replicate the sort of functionality which is present on this website. The price, mentioned above the 'Get a Protective Plan' button, updates with respect to different options selected from the dropdown and the radio button selected.
Now I have a form which has 2 read-only input field's for 'Price' and 'Price-2' and I want the value of those fields to be updated depending on the selection of the dropdown options and the radio button by the user. So basically, the values of the read-only input fields, which needs to be updated, will be an addition of the values of the selected dropdown option and the radio button.
Here's a rough example of the form which I've created along with the dropdown and the radio buttons:
<form action="#" method="post">
<label>Last Name*</label>
<input type="text" name="lastname" value="" required="true">
<select id="p1">
<option value="1">$1</option>
<option value="2">$2</option>
<option value="3">$3</option>
<option value="4">$4</option>
<option value="5">$5</option>
</select>
<input id="p2" type="radio" name="price2" value="50">$50<br/>
<input id="p2" type="radio" name="price2" value="100">$100
<label>Price</label>
<input type="text" name="Price" readonly="readonly" value="">
<input type="text" name="Price-2" readonly="readonly" value="">
<input type="submit" value="Submit">
</form>
So in this form if I select the second option from the dropdown whose value is '2' and then I select the first radio button whose value is '50', I'd want the value of the 'Price' and the 'Price-2' fields to automatically become '$52'. I know this can be achieved using jQuery but I cannot really figure out how as I am still learning it. Looking forward to get a solution. Thanks.

you can accomplish using JQuery,
Here is a Fiddle Demo for your desired result.