Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Ajax and JavaScript

  • Print
  • + Share This
This chapter is from the book

Changing an Input Element

Let’s make one other change to the form. Assume the user wants to designate that an ingredient is really a spice. To accomplish the change, you’ll use the replaceWith() manipulator to change the input.

To use replaceWith() to change an element

  1. Modify the first two ingredient inputs of recipe.html to create a link that will trigger the change to a spice, as seen in the following highlighted markup (Script 4.5.html):
    <span class="inputSpan">
    <input name="recipeIngredient[]" placeholder="Ingredient" />&nbsp;<a href="makeSpice" class="ingredientType">change to spice</a><br /></span>
  2. Save recipe.html and upload it to your web server red-a.jpg.
    04_figure_22_a.jpg

    red-a.jpg The new links have been added to the input boxes.

  3. Open jquery.custom.js and modify the function you created in the previous exercise to account for the additional link. The section you need to add is highlighted:
    $('.inputSpan')
    .filter(':last')
    .html('<span class="inputSpan"><input name="recipeIngredient[]" placeholder="Ingredient" value="' + lastInputData + '" />&nbsp;<a href="makeSpice" class="ingredientType">change to spice</a><br /></span>');

    By making this modification, you ensure that the link to change the input element is available.

  4. Create a new function in jquery.custom.js. The function will determine what kind of input is available and make the needed change:
    $('#ingredients').on('click', '.ingredientType', function(e) {
    e.preventDefault();
    var ingredientType = $(this).attr('href');
    if('makeSpice' == ingredientType)
    {
  5. Get the existing value of the input:
    var oldElement = $(this).closest('span');
    var oldElementValue = $(this).closest('span')
    .find('input').val();
  6. Create the new input element and assign it to a variable to be used later in the function:
    var newElement = '<span class="inputSpan"><input name="recipeSpice[]" placeholder="Spice" value="' + oldElementValue + '" />
    &nbsp;<a href="makeIngredient" class="ingredientType">change to ingredient</a><br /></span>';
  7. Replace the old input with the new input:
    $(oldElement)
    .replaceWith(newElement);
  8. Set the new input’s value based on what was already entered in the form:
    $(newElement).find('input')
    .val(oldElementValue);
  9. Add the remainder of the function to change the input back to an ingredient input if requested:
    else {
    var oldElement = $(this).closest('span');
    var oldElementValue = $(this).closest('span')
    .find('input').val();
    var newElement =
    '<span class="inputSpan"><input name="recipeIngredient[]" placeholder="Ingredient" value="' + oldElementValue + '" />&nbsp; <a href="makeSpice" class="ingredientType">change to spice</a>
    <br /></span>';
    $(oldElement)
    .replaceWith(newElement);
    $(newElement).find('input')
    .val(oldElementValue);
    }
    });

    The functionality of the else condition is exactly the same as the if condition, except that it changes the input type back to ingredient.

  10. Save jquery.custom.js and upload it to your web server. Reload recipe.html in your browser and click one of the “change to spice” links red-b.jpg.
    04_figure_23_b.jpg

    red-b.jpg The input has been changed to reflect its status as a spice.

04_figure_24_c.jpg

red-c.jpg New inputs have been added, ready to take their place in the recipe as an ingredient or a spice.

Take a look at your DOM inspection tool, and you’ll see the changes you put into place red-d.jpg.

04_figure_25_d.jpg

Click to view larger image

red-d.jpg The replaced input elements are evident when inspecting the DOM.

There should be no doubt that jQuery makes it very easy to manipulate DOM elements. The library excels at adding, removing, measuring, and changing elements on every web page you create. The library’s ability to modify markup is a valuable set of tools that lets you worry less about existing markup—giving you the power to make sensible changes that will allow your functions to operate effectively.

You also learned how to chain jQuery methods to create complex functions. Chaining makes your code compact, easy to read, and efficient.

Next you’re going to ramp up your understanding and use of selectors. Selector boot camp ahead!

  • + Share This
  • 🔖 Save To Your Account