John Thornton John Thornton - 2 years ago 65
Javascript Question

Passing data from one form field to another

I am trying to customize a form on a Wordpress site. This form has two fields which will share the same exact data (Post Title and Location). Rather than have the user enter the same information in two different fields, I am looking for a way to have the user enter the Location in the Location field, and then have that same input passed on to the Post Title field (which will be hidden) before the form is submitted.

I have done some research on this and it seems like jquery is need to make this happen. I'm not at all knowledgeable with jquery, so I need some clarification on how to make this happen. If you could, please explain how to implement the jquery code into the page. Do I have to create a jquery file and then call that file on this page? As I said, I know nothing about jquery. Thanks.

Note: Having issues with jquery event that will work with autocomplete drop down. All events I've tried are only passing text I type manually. When I click on an autocomplete dropdown suggestion, any text I didnt type manually is not passed to the second field.

Here is the current code I am working with:

<input type="text" id="location" name="location" tabindex="17" data-geo="formatted_address" placeholder="<?php echo esc_attr__( 'Provide full street address', APP_TD ); ?>" class="required" value="<?php echo esc_attr( $project->_hrb_location ); ?>" />
<input name="post_title" type="hidden" value="<?php echo esc_attr( $project->_hrb_location ); ?>" class="required" />

Answer Source

This JavaScript function is going to take the value entered in the field Location and will post to the field Post_ID accordingly.

 var swap_val = function  (val){
            var input = document.getElementById("post_title");
            input.value = val;


Enter Location to see it in the Post ID:
<input type="text" id="location" name="location" tabindex="17" data-geo="formatted_address"  
class="required" value="" onkeyup='swap_val(this.value);'/>
Post ID:
<input name="post_title"  id = "post_title" type="text" value="" class="required" />

A Pen

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download