logo
Tags down

shadow

How to separate input field values in React?


By : Simon Harrop
Date : October 17 2020, 06:10 AM
help you fix your problem I have a list of inputs that are generated based on the number of items in an array: , Here is one way to do that
code :
const items = ['firstName', 'lastName'];

const itemInputs = items.map(
  name => <Input key={name} name={name} value={this.state[name]} onChange={event => this.updateItem(name, event)} />,
);

updateItem = (name, event) => {
  this.setState({ [name]: event.target.value });
}


Share : facebook icon twitter icon

Getting the values of multiple checkboxes and displaying in a separate input text field


By : Fernando
Date : March 29 2020, 07:55 AM
this will help , You can use length property;
code :
var var1 = jQuery('input#bulb1:checked').length;
var var2 = jQuery('input#bulb2:checked').length;
var var3 = jQuery('input#bulb3:checked').length;
var var4 = jQuery('input#bulb4:checked').length;
$(':checkbox').change(function () {
    var var1 = $('input#bulb1:checked').length.toString(10);
    var var2 = $('input#bulb2:checked').length.toString(10);
    var var3 = $('input#bulb3:checked').length.toString(10);
    var var4 = $('input#bulb4:checked').length.toString(10);
    $('#binary').val(var1 + var2 + var3 + var4);
})

Add/Remove Input Fields Dynamically and preview field values in separate div


By : Aungphyo Pyae
Date : March 29 2020, 07:55 AM
it fixes the issue
I want to get the values from the text boxes as they are typed to the values in the separate div.
code :
<button id="btn-add">Add</button>

<div id="source"></div>
<div id="preview"></div>
// --- Main functions --- //
function _createTextInput() {
  var inputWrapper = document.createElement('div');
  var inputElement = document.createElement('input');
  var removeBtn    = document.createElement('button');

  $(removeBtn)
    .html("Remove")
    .addClass("btn-remove-input-wrapper");

  $(inputWrapper)
    .addClass('input-wrapper')
    .append(inputElement)
    .append(removeBtn);

  return inputWrapper;
}

function _createRadioInput() {
  var radioWrapper = document.createElement('div');
  var radioElement = document.createElement('input');
  var radioLabel   = document.createElement('label');

  $(radioWrapper)
    .append(radioElement)
    .append(radioLabel);

  radioElement.type = 'radio';
  radioElement.name = 'group';
  return radioWrapper;
}

// --- Helper functions --- //

function getIndex(me) {
  return $(me).parent().index();
}

function getRadioElement(me) {
  return $('#radio div:nth-child(' + (getIndex(me) + 1) + ')');
}

// --- Event handlers --- //

$('#btn-add').click(function() {
  $('#source').append(_createTextInput());
  $('#radio').append(_createRadioInput());
});

$(document).on('click', '.btn-remove-input-wrapper', function() {
  getRadioElement(this).remove();
  $(this).parent().remove();
});

$(document).on('keyup', '.input-wrapper input', function() {
  var index = getIndex(this);
  var inputText = $(this).val();
  getRadioElement(this).children('label').html(inputText);
});

Iterating over dynamically generated input field ids and using keyup to get their values in a separate input field


By : priti danawale
Date : March 29 2020, 07:55 AM
fixed the issue. Will look into that further If I understood right your question I think you're looking for something like that:
code :
var fields = $("#mandatory").find("input"),
    ids = [];

fields.each(function(){
		$(this).on("keyup", function(){
    	var val = "";
      ids = [];
      fields.each(function(){
        val += $(this).val() + (fields.length === ($(this).index() + 1) ? "": ", ");    
        
        ids.push($(this).get(0).id);
      });
      $("#detail").val(val);
      console.log(ids)
    });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="attributes">
<div id="mandatory">
<input id="one" class="one" value="54"/>
<input id="two" class="two" value="55"/>
<input id="three" class="three" value="587"/>
</div>
</div>
<input id="detail" type="text" />

Make a date-like html input field in React (auto separate numbers with dots)


By : user116095
Date : March 29 2020, 07:55 AM
this one helps. Done it with the checking in function in React.
It goes like this:
code :
let val = event.target.value.trim()
    let name = event.target.name
    if(name === "birthDate" && (val.length === 2 || val.length === 5 ) && this.state.birthDate.slice(-1) === ".") {
        val = val.slice(0, -1)
    }
    if(name === "birthDate" && (val.length === 2 || val.length === 5 ) &&  this.state.birthDate.slice(-1) != ".") {
        val = val+'.'
    }

how to get input field values in react?


By : user3519330
Date : March 29 2020, 07:55 AM
will help you Here is my solution https://codesandbox.io/s/pensive-lake-erynd
pass function to KeyValue component to get values when input changes
code :
  const handleChangeKeyValues = name => value => {
    setState(prevState => {
      const newValues = {
        ...prevState.values,
        [name]: value
      };

      return {
        ...prevState,
        values: newValues
      };
    });
  };
const KeyValue = ({ onChange, values = { firstName: "", lastName: "" } }) => {
  const handleChangeInput = event => {
    const { value, name } = event.target;

    const newFormValue = { ...values, [name]: value };

    onChange(newFormValue);
  };

  return (
    <Form.Group widths="equal">
      <Form.Input
        value={values.firstName}
        fluid
        label="Key"
        name="firstName"
        placeholder="First name"
        onChange={handleChangeInput}
      />
      <Form.Input
        value={values.lastName}
        fluid
        label="Value"
        name="lastName"
        placeholder="Last name"
        onChange={handleChangeInput}
      />
      <Icon style={{ top: 30, position: "relative", left: 10 }} name="delete" />
      <Form.Input
        style={{ display: "none" }}
        fluid
        label=""
        placeholder="Last name"
      />
    </Form.Group>
  );
};
Related Posts Related Posts :
  • How do I add a counter to show how many times a div element has been clicked?
  • Calling A function using vue.js components and properties
  • How to check type of "typeof" in JavaScript?
  • Recursive function to determine if number is even or odd by subtracting two from n until n = 0 or 1
  • How to fix:"Refused to run the JavaScript URL because it violates the following Content Security Policy..."
  • Can't access value inside of props object
  • How map and filter over array of objects?
  • How to invert d3 color ramps d3-scale-chromatic d3.interpolateViridis
  • Comparing two variables JavaScript
  • Google Pay & Web Payment Request API:
  • How to pass date as parameter in javascript function
  • why i have this error "Expected an assignment or function call and instead saw an expression no-unused-expressions&
  • calculate the full turns of a circle
  • Applying spread operator on object with getter
  • How do I hide a parent div when child div contains a certain text?
  • How to Stream Live Audio With Low Latency
  • React: How to close a modal from child opened from parent component
  • how to find tab close and clear local storage
  • Function returning undefined value, a bit confused
  • Assignment involving generic property of generic object fails to typecheck correctly within generic function
  • What is output for foo.x
  • Remove singular element from an object's key array
  • How to fix lag issue over time in my Three.js game
  • async await promise.all map not resolving promises
  • Print an HTML document to PDF using JavaScript
  • Getting illegal invocation, after using $.ajax inside of $(doocument).keypress function
  • DebounceTime emits all the events which was captred during the time
  • Mongoose 5.x disallows passing a spread of operators
  • javascript onkeypress limit characters when pasting
  • How to fire an event only if specific-time has lapsed after scrolling has been stopped
  • How to filter an array of objects based on another array of objects?
  • Best way to switch between two colours with javascript?
  • Calling asynchronous function but returning result synchronously
  • Can't inject custom repository
  • How do I fix the Cordova error: Failed to fetch platform <<<<< HEAD?
  • Javascript: Store a global variable for a single page application
  • Node: Load/read the content of a page from external website(domain)
  • What is the difference between Object and object type
  • How to detect focusout on parent div not on child div in Angular4
  • How to end program after right answer?
  • How to use dot notation after +
  • Error from anonymous function: unexpected token <
  • Refresh a particular component in Angular
  • RegEx for validating three alphanumeric conditions
  • How to upload html file in the google and let it view by everyone?
  • Use Array.map on an 2-dimensional Array
  • Not sure whether I have syntax errors or errors with the code
  • How to fix process.nextTick is not a function with Calgolia places.js?
  • React Text Annotation
  • Is it possible to change the input type of an input element inside a <td> using <td> id with the use of java
  • Render functional component on variable change
  • Using Javascript to write a function which compares two trees and returns true if they are equal in structure and in val
  • How to save results from dynamic cascading drop down list?
  • How to pass arguments to function in functional component in React
  • Is there a way to view the contents of a predefined function like alert()?
  • object use own method in javascript
  • How do I replace NaN with 0 when doing division in javascript?
  • How to link two JavaScript files together? NO HTML
  • Angular 7 - how to make initial input value visible for JSON?
  • How to get previous state value in reactjs
  • shadow
    Privacy Policy - Terms - Contact Us © 35dp-dentalpractice.co.uk