CODEWITHSUNDEEP
javascriptjqueryhtmlcss
inaz
inaz

Reputation: 1785

How to change each textbox value based on onchange each selectbox

There are many divs that named record .in these divs I have a select box that changes the value and attribute of the textboxes. the code works well. but the problem is when a select box change, all of the textbox values will be change. how to change a value of textboxes base on each select box. not all of them? here are my codes:

 

$(function () {
    $('select[name=type]').change(function () {
        var $option = $(this).find(":selected");
        $('input[name=hostInput]').attr('pattern', $option.attr('data-pattern'));
        $('input[name=hostInput]').attr('placeholder', $option.attr('data-placeholder'));
        $('input[name=hostInput]').attr('title', $option.attr('data-title'));
    });
});
  .to_validate:invalid {
    color: navy;
    outline: none; 
    border-color: #ff1050;
    box-shadow: 0 0 10px #ff0000;
}
.record {
    width:50%; 
    border:1px solid blue;
}
  

<html>
    <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>
    <body>
        <form>
            <div class="record">
                <select name="type" class="minimal">
                    <option value="Record" selected hidden>Record</option>
                    <option value="NS" data-pattern="(?!\d+(?:\.\d+){3}$)(([a-zA-Z\d]|[a-zA-Z\d][a-zA-Z\d-]*[a-zA-Z\d])\.)*([A-Za-z\d]|[A-Za-z\d][A-Za-z\d-]*[A-Za-z\d])" data-placeholder="Hostname" data-title="Wrong host">NS</option>
                    <option value="MX" data-pattern="(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])" data-placeholder="IP address" data-title="Wrong Ip Placeholder">MX </option>
                </select>
                <br/>
                <input type="text" name="hostInput" placeholder="Hostname" class="to_validate" pattern="(?!\d+(?:\.\d+){3}$)(([a-zA-Z\d]|[a-zA-Z\d][a-zA-Z\d-]*[a-zA-Z\d])\.)*([A-Za-z\d]|[A-Za-z\d][A-Za-z\d-]*[A-Za-z\d])" title="Wrong host"/>
            </div>
            <br/>
            <div class="record">
                <select name="type" class="minimal">
                    <option value="Record" selected hidden>Record</option>
                    <option value="NS" data-pattern="(?!\d+(?:\.\d+){3}$)(([a-zA-Z\d]|[a-zA-Z\d][a-zA-Z\d-]*[a-zA-Z\d])\.)*([A-Za-z\d]|[A-Za-z\d][A-Za-z\d-]*[A-Za-z\d])" data-placeholder="Hostname" data-title="Wrong host">NS</option>
                    <option value="MX" data-pattern="(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])" data-placeholder="IP address" data-title="Wrong Ip Placeholder">MX </option>
                </select>
                <br/>
                <input type="text" name="hostInput" placeholder="Hostname" class="to_validate" pattern="(?!\d+(?:\.\d+){3}$)(([a-zA-Z\d]|[a-zA-Z\d][a-zA-Z\d-]*[a-zA-Z\d])\.)*([A-Za-z\d]|[A-Za-z\d][A-Za-z\d-]*[A-Za-z\d])" title="Wrong host"/>
            </div>
            <button type="submit">Submit</button>
        </form>
    </body>
</html>

Upvotes: 1

Views: 103

Answers (2)

Angelo Michel
Angelo Michel

Reputation: 265

You could also write the JavaScript part like this. With jQuery you can chain commands, it is exactly the same answer though but might be easier to read. Furthermore, you can use .data('nameOfAttr') for data-name-of-attr values in html (see http://api.jquery.com/data/#data-html5)

Generally I don't use 'siblings' since this doesn't always work (depends heavily on your html structure). When you work in a team where other people can edit your code as well you can also look for the closest('.record') and find in that scope your input. This way your code will work whenever it is a sibling or not, eg. if the select is wrapped in a div or span (this is something common when you customise your selectbox).

Performance tip: Ideally you don't use [name=nameHere] selectors because this type of selector is quite slow compared to id and className selectors (#id or .js_some_class_name). But this code is not part of a bigger JavaScript application (by the looks of it), so you are fine if you use this selector. 

$(function() {
  $('select[name=type]').change(function() {
    var $option = $(this).find(":selected");

    $(this).closest('.record').find('input[name=hostInput]')
        .attr('pattern', $option.data('pattern'))
        .attr('placeholder', $option.data('placeholder'))
        .attr('title', $option.data('title'));
  });
});

Upvotes: 1

guradio
guradio

Reputation: 15565

$(function() {
  $('select[name=type]').change(function() {
    var $option = $(this).find(":selected");
    $(this).siblings('input[name=hostInput]').attr('pattern', $option.attr('data-pattern'));
    $(this).siblings('input[name=hostInput]').attr('placeholder', $option.attr('data-placeholder'));
    $(this).siblings('input[name=hostInput]').attr('title', $option.attr('data-title'));
  });
});
.to_validate:invalid {
  color: navy;
  outline: none;
  border-color: #ff1050;
  box-shadow: 0 0 10px #ff0000;
}
.record {
  width: 50%;
  border: 1px solid blue;
}
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
  <form>
    <div class="record">
      <select name="type" class="minimal">
        <option value="Record" selected hidden>Record</option>
        <option value="NS" data-pattern="(?!\d+(?:\.\d+){3}$)(([a-zA-Z\d]|[a-zA-Z\d][a-zA-Z\d-]*[a-zA-Z\d])\.)*([A-Za-z\d]|[A-Za-z\d][A-Za-z\d-]*[A-Za-z\d])" data-placeholder="Hostname" data-title="Wrong host">NS</option>
        <option value="MX" data-pattern="(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])" data-placeholder="IP address" data-title="Wrong Ip Placeholder">MX</option>
      </select>

      <br/>

      <input type="text" name="hostInput" placeholder="Hostname" class="to_validate" pattern="(?!\d+(?:\.\d+){3}$)(([a-zA-Z\d]|[a-zA-Z\d][a-zA-Z\d-]*[a-zA-Z\d])\.)*([A-Za-z\d]|[A-Za-z\d][A-Za-z\d-]*[A-Za-z\d])" title="Wrong host" />

    </div>
    <br/>
    <div class="record">
      <select name="type" class="minimal">
        <option value="Record" selected hidden>Record</option>
        <option value="NS" data-pattern="(?!\d+(?:\.\d+){3}$)(([a-zA-Z\d]|[a-zA-Z\d][a-zA-Z\d-]*[a-zA-Z\d])\.)*([A-Za-z\d]|[A-Za-z\d][A-Za-z\d-]*[A-Za-z\d])" data-placeholder="Hostname" data-title="Wrong host">NS</option>
        <option value="MX" data-pattern="(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])" data-placeholder="IP address" data-title="Wrong Ip Placeholder">MX</option>
      </select>

      <br/>

      <input type="text" name="hostInput" placeholder="Hostname" class="to_validate" pattern="(?!\d+(?:\.\d+){3}$)(([a-zA-Z\d]|[a-zA-Z\d][a-zA-Z\d-]*[a-zA-Z\d])\.)*([A-Za-z\d]|[A-Za-z\d][A-Za-z\d-]*[A-Za-z\d])" title="Wrong host" />

    </div>


    <button type="submit">Submit</button>
  </form>
</body>

</html>

Use this context with .siblings()

Description: Get the siblings of each element in the set of matched elements, optionally filtered by a selector.

  1. Using this context will get you the current select.
  2. Using siblings() will get you the siblings of the current select then giving parameter input[name=hostInput] will get the exact input

Upvotes: 3

Related Questions