This chapter is from the book
This chapter is from the book
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
- 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" />
<a href="makeSpice" class="ingredientType">change to spice</a><br /></span> - Save recipe.html and upload it to your web server
.
The new links have been added to the input boxes. - 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 + '" /> <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.
- 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) { - Get the existing value of the input:
var oldElement = $(this).closest('span'); var oldElementValue = $(this).closest('span') .find('input').val(); - 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 + '" /> <a href="makeIngredient" class="ingredientType">change to ingredient</a><br /></span>';
- Replace the old input with the new input:
$(oldElement) .replaceWith(newElement);
- Set the new input’s value based on what was already entered in the form:
$(newElement).find('input') .val(oldElementValue); - 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 + '" /> <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.
- 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
.
The input has been changed to reflect its status as a spice.
TIP
When you add an ingredient, the creation of another input element occurs and has the “change to spice” link added 
.
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 
.
)
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!