0

I want to check input field, that i created with jquery. If someone press on the button "einen Schritt hinzufügen" jquery will create into the div all_steps, this structur:

<div class="step">
  <div class="header_step">Schritt '+ (x + 1) +' des Tutorial\'s</div>
  <div class="body_step">
    <a class="create_tutorial_a">Titel des Schrittes</a>
    <input name="input_title_name'+x+'" class="create_tutorial_input" />
    <br>
    <a class="create_tutorial_a">Bild</a><input type="file" />
    <br><br>
    <a class="create_tutorial_a_full_width">Beschreibung des Schrittes</a>
    <br>
    <textarea class="create_tutorial_textarea" name="input_description_name'+x+'">
    </textarea>
  </div>
</div>

Here is my jquery code: 

$(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".all_steps"); //Fields wrapper
    var add_button      = $("#add_step"); //Add button ID
    var remove_step     = $("#remove_step");
    
    var x = 0; //initlal text box count
    $(add_button).click(function(){ //on add input button click
        if(x < max_fields){ //max input box allowed
            $(wrapper).append('<div class="step"><div class="header_step">Schritt '+ (x + 1) +' des Tutorial\'s</div><div class="body_step"><a class="create_tutorial_a">Titel des Schrittes</a><input name="input_title_name'+x+'" class="create_tutorial_input" /><br><a class="create_tutorial_a">Bild</a><input type="file" /><br><br><a class="create_tutorial_a_full_width">Beschreibung des Schrittes</a><br><textarea class="create_tutorial_textarea" name="input_description_name'+x+'"></textarea></div>');
            x++; //text box increment
        }
    });
   
    $(remove_step).click(function(){ //user click on remove text
        $('.all_steps .step:last').remove();
        x--;
    });
    
    $(submit).click(function(){
        
    });
});

and here is my html code:

<section>
    <article>
        <div class="step">
            <div class="header_step">Erstelle dein eigenes Tutorial</div>
            <div class="body_step">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
        </div>
        <form method="post" action="index.php?content=create_tutorial">
        <div class="step">
            <div class="header_step">Allgemeines zum Tutorial</div>
            <div class="body_step">
                <a class="create_tutorial_a">Titel des Tutorial's</a><input class="create_tutorial_input"/>
                <br>
                <a class="create_tutorial_a">Autor des Tutorial's</a><input class="create_tutorial_input"/>
                <br><br>
                <a class="create_tutorial_a_full_width">Beschreibung des Schrittes</a>
                <br>
                <textarea class="create_tutorial_textarea"></textarea>
            </div>
        </div>
        
        <div class="all_steps">
            
        </div>
        
        <div class="step">
            <div class="body_step">
                <input class="create_button" type="button" id="submit" value="Erstellen"/>
                <input type="button" class="create_button" id="add_step" value="Schritt hinzufügen"/>
                <input type="button" class="create_button" id="remove_step" value="Schritt entfernen"/>
            </div>
        </div>
        </form>
        
    </article>
    <div class="clearBoth"></div>
</section>

Now i want to check all fields, that were created with jquery after "erstellen" button is pressed. How can I refer to the dynamically created input fields to check them?

MyPage

jarlh
  • 42,561
  • 8
  • 45
  • 63
Name
  • 564
  • 1
  • 8
  • 18
  • Create an empty object, for example `var inputs={};`. Then, when you create the inpus, save them into this object, so you can use it as a reference later on submit. You can loop through the inputs object with an each loop, and get the values with .val() – Balázs Varga May 05 '15 at 12:49
  • How can i index through the object's? – Name May 05 '15 at 12:57
  • If you use .push(something) to add the values, you don't need to know the index. Later on submit, each will loop throught the whole array, also don't need indexes. – Balázs Varga May 05 '15 at 13:00

2 Answers2

0

You can loop with jQuery within steps and you d'ont need to know the index of each step just see how it works with code below

$(submit).click(function(){

    /* looping steps */
    $('.all_steps .step').each(function(){
        var step = this;
        /* Here select what inputs you need and do the checks */
        /* Example */
        console.log(     $(step).find('.create_tutorial_input').val() );
        console.log(     $(step).find('.create_tutorial_textarea').val() );

    });

});

Working copy https://jsfiddle.net/a0f69pu4/

ustmaestro
  • 1,233
  • 12
  • 20
  • I think it will not work with dinamycally created objects, because when jQuery loads, and attach the .click event to the .step object, the inputs we're talking about doesn't exists. I've already faced this problem not too long ago... – Balázs Varga May 05 '15 at 13:02
  • here we talking about form submit event, when his fired $('.all_steps .step') will return all div.step – ustmaestro May 05 '15 at 13:13
  • Oh, really... sorry about that. A fiddle to prove it: http://jsfiddle.net/a0f69pu4/ :) – Balázs Varga May 05 '15 at 13:18
0

you can use a thirdparty jquery plugin like this http://formvalidation.io/ also check Validate fields using JQuery validation without any submit? and https://formden.com/blog/validate-contact-form-jquery

Community
  • 1
  • 1
carlos a.
  • 188
  • 10