CODEWITHSUNDEEP
javascriptjqueryhtml
Mike Boory
Mike Boory

Reputation: 187

Is there a way to simplify this into only a few lines of jQuery

I am trying to display input values of a form into their corresponding div/p tags. So whenever a user starts typing into an input field, that value will be written in the input box as well as in a p tag else where on the page.

I have my jQuery looking at every individual form field and displaying that info to an assigned p tag. Is there a way to write this code so I do not have to create multiple lines of code for each form field?

Write now it is checking for if there is a change in the form, and then seeing if the field has a value and if so displaying the information in the p tag, if not it makes the p tag empty.

He is what I have working now. 

$('#webform-client-form-1').on('change',function(e){
  /* Distributor Name INPUT   */
  var distributorNameInput=$('#edit-submitted-distributor-name').val();
      if( !$("#edit-submitted-distributor-name").val() ) {
       $(".distributor-name p").html("");
    } else {
       $(".distributor-name p").html("<strong>Distributor Name</strong> <br/>" + distributorNameInput);
    };
/* Year INPUT   */
    var YearInput=$('#edit-submitted-year').val();
    if( !$("#edit-submitted-year").val() ) {
        $(".year p").html("");
    }else {
        $(".year p").html("<strong>Year</strong> <br/>" + YearInput);
    };
    /* General Information INPUT   */
    var generalinfoInput=$('#edit-submitted-general-information').val();
    if( !$("#edit-submitted-general-information").val() ) {
        $(".general-info").html("");
    }else{
       $(".general-info").html("<h2>General Information</h2> <p>" + generalinfoInput + "</p>");
    };
});
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
 <form enctype="multipart/form-data" action="/" method="post" id="webform-client-form-1" accept-charset="UTF-8">
  <p>
   <label>Distributor Name*</label>
   <input type="text" id="edit-submitted-distributor-name" name="submitted[distributor_name]" value=" " size="60" maxlength="128" class="form-text required">
 </p>
 <p>
  <label for="edit-submitted-year">Year*</label>
  <select id="edit-submitted-year" name="submitted[year]" class="form-select">
    <option value="2015" selected="selected">2015</option>
    <option value="2016">2016</option>
  </select>
</p>
</form>
<div class="preview" id="preview">
  <div class="distInfo">
    <div class="distributor-name">
      <p><strong>Distributor Name</strong> <br>Text will go here</p>
    </div>
    <div class="year">
      <p><strong>Year</strong> <br>2015</p>
    </div>
  </div>
</div>

Upvotes: 1

Views: 111

Answers (3)

ojovirtual
ojovirtual

Reputation: 3362

You can create an array of objects and iterate over it. This is great if you are thinking on adding new elements, because you will only need to add them to the array.

$('#webform-client-form-1').on('change',function(e){
    var elements=new Array(
    {valueToCheck:'edit-submitted-distributor-name',className:'distributor-name', label: 'Distributor Name'},
    {valueToCheck:'edit-submitted-year',className:'distributor-name', label: 'Distributor Name'},
    {valueToCheck:'edit-submitted-distributor-name',className:'distributor-name', label: 'Distributor Name'},
    );
    //check'em
    elements.forEach(function(element){
        var myValue=$("#"+element.valueToCheck).val();
        $("."+element.className+" p").html( myValue ? "<strong>"+element.label+"</strong> <br/>" + myValue: "");
    });
}

Upvotes: 0

Justinas
Justinas

Reputation: 43441

Instead of using IDs you can use classes and data attributes to pass input target element:

$(document).ready(function() {
  $(document).on('change input paste', '.input', function() {
    $($(this).data('target')).text($(this).val());
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="input" data-target="#text-input" />
<select class="input" data-target="#select-input">
  <option value=""></option>
  <option value="A">A</option>
  <option value="B">B</option>
</select>

<hr/>
<div id="text-input"></div>
<div id="select-input"></div>

Upvotes: 3

Machigatta
Machigatta

Reputation: 118

you probably meaning something like inline if

/* Distributor Name INPUT   */
var distributorNameInput = $('#edit-submitted-distributor-name').val();
$(".distributor-name p").html( distributorNameInput ? "<strong>Distributor Name</strong> <br/>" + distributorNameInput : "");

/* Year INPUT   */
var YearInput = $("#edit-submitted-general-information").val();
$(".year p").html( YearInput ? "<strong>Year</strong> <br/>" + YearInput: "");

/* General Information INPUT   */
var generalinfoInput = $('#edit-submitted-general-information').val();
$(".general-info").html( generalinfoInput ? "<h2>General Information</h2> <p>" + generalinfoInput : "");

The syntax for an inline if is

condition ? true code: false code

Upvotes: 0

Related Questions