php - How to load HTML into a <div> using jQuery in WordPress?


So this is mybuildInputFields.php file, which contains the markup I want to load into my#add_input_fields div located in myarticlePostForm.php file. Both files are in the same directory in my theme file:


<fieldset id="add_fields">
  <legend>Add Fields</legend>
<input type="button" value="Preview form" id="preview" />
<input type="button" value="Add a field" id="add" />


    <div id="form-container">


                <div id="add_input_fields" href="<?=get_template_directory_uri(); ?>/buildInputFields.php" onload="loadInputFields();"></div>


And here is my jQuery:


function loadInputFields() {
    var href = $('#add_input_fields').attr('href');

    return false;  //to prevent default action

I have enqueued and registered .js files as so in my functions.php file in WP. All .js files are located in the theme file's js folder:


function loadInputFields_js() {
        get_template_directory_uri() . '/js/loadInputFields.js',

add_action('wp_enqueue_scripts', 'loadInputFields_js');

And I have included it in my header.php file in WP:




    <script type="text/javascript" src="<?=get_template_directory_uri();?>/js/loadInputFields.js"></script>

    <?php wp_head(); ?>


<body <?php body_class(); ?>>

    <div id="container">
    //end of header.php

Basically what I'm doing is creating a form for people to post their own articles on my site. This is just one part of the form. In this part of the form, I'm attempting to load in markup that will be accompanied by other jQuery code that features a "plus sign" and "minus sign" to add and remove input fields for people who want to add in cited sources.

The#add_input_fields div is where I want to load my markup in from thebuildInputFields.php file. I want to load it using my jQuery fileloadInputFields.js which is supposed to select the#add_input_fields div, get its href value, set a equal to a local variable, and then load it back into the div using the.load() function.

Any advice? I have been trying for two days and all I can do now is huddle up in the corner, pull over my hoodie, and sob endless tears.

NOTE: I understand that a div element cannot use an href attribute. I simply structured the code this way so anyone reading can get an idea of what I'm trying to accomplish because I have a terrible way of trying to explain things. You're help is desired and appreciated!

People are also looking for solutions to the problem: php - Clean url mod_rewrite not working


Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.