pass values from separate divs into a javascript function

Question

I have a form that has three separate divs within it.

<form method="post">
    <div id = "f1">
        <div class="label">Value 1:</div>
            <input type="text" name="name"/>
            <button id = "next1" type="button" onclick="checkValue()">Next</button>
        </div>
    <div id ="f2">
        <div class="label">Value 2:</div><br>
            <input type="text" name="name"/>
            <button type="button" onclick="checkValue()">Next</button><br>
        </div>
    <div id ="f3">
        <div class="label">Value 3:</div><br>
        <input type="text" name="name"/>
        <button type="button" onclick="checkValue()">Next</button><br>
    </div>
</div>
</form>

In my javascript function.

I have a fadein and fadeout attached to each div when the next button is pressed. When the "next1" button is pressed the first div will be faded out and the second div will fade in.

I want to check the values inputted in the first div when the user presses the first next button.

I know how to do this if i just passed in the whole form into my javascript function on the final submit button, but I would like to know how to do this after each next button is pressed.

I also will have more than one value in each of the divs (f1, f2, f3) but for simplicity I only included one value.

EDIT*: further explaintaion If i did this by passing in the form into checkValue. I could just do an onsubmit = "checkValue()". And then in my JS file, I would just include checkValue(form) as its parameter. If i want to do a check after every single button is pressed, I am not sure how to do this or what to pass in as its parameter.

Your question is a little confusing. So you want to know how to get the related input value in JavasScript when you click that input's button? — Seano666, Nov 19 '15 at 20:50
Where is implementation? You are asking for too much. At least give it a try and when you have any problem, you may ask here. — Osama Yawar Khawaja, Nov 19 '15 at 20:50
What happens on value checks? Will it stop next div from being shown if the value is insufficient to what you want? Also, add your javascript function. — AtheistP3ace, Nov 19 '15 at 20:50
Possible duplicate of [How to get the onclick calling object?](http://stackoverflow.com/questions/1553661/how-to-get-the-onclick-calling-object) — Félix Saparelli, Nov 19 '15 at 20:51
@Osama Yawar Khawaja - That is my issue I am not sure how to implement this. I have edited my post to explain my issue a bit further — user3264355, Nov 19 '15 at 20:56

score 1 · Accepted Answer · answered Nov 19 '15 at 20:55

Simple mock up hopefully to get you one your way.

Fiddle: http://jsfiddle.net/AtheistP3ace/krr3tgLx/1/

HTML:

<form method="post">
    <div id="f1" style="display: block;">
        <div class="label">Value 1:</div>
        <input type="text" name="name" />
        <button id="next1" type="button" onclick="checkValue(this)">Next</button>
    </div>
    <div id="f2">
        <div class="label">Value 2:</div>
        <br>
        <input type="text" name="name" />
        <button type="button" onclick="checkValue(this)">Next</button>
            <br>
    </div>
    <div id="f3">
        <div class="label">Value 3:</div>
        <br>
        <input type="text" name="name" />
        <button type="button" onclick="checkValue(this)">Next</button>
            <br>
    </div>
    </div>
</form>

JS:

function checkValue (button) {
    // Finds the sibling input of the button
    var input = $(button).siblings('input');
    // Gets input value
    var value = input.val();
    // Stops showing next div if no value
    if (value == '') {
        return false;
    }
    else {
        // Finds the parent div holding button and input
        var div = $(button).closest('div');
        // Fades out current div
        div.fadeOut();
        // Gets next div and fades it in
        div.next().fadeIn();
    }
}

CSS:

form > div {
    display: none;
}

Thanks for your answer. I will try this, however what happens when I have multiple input values in one every div. Can i denote the different values by using their respective name attributes? — user3264355, Nov 19 '15 at 21:01
Sure just do `$(button).siblings('input[name="someName"]');` for each one. — AtheistP3ace, Nov 19 '15 at 21:11
could you explain the CSS code a little? what does the form > div do? thanks for the help — user3264355, Nov 19 '15 at 21:13
Sure, that just says hide all the divs that are direct children of form. It was just a quick way to make only those top level divs hidden from the start so I could fade them in later. — AtheistP3ace, Nov 19 '15 at 21:15

score 0 · Answer 2 · answered Nov 19 '15 at 21:03

From my assumptions this is what you are looking for : Multipart form handler

Basically I wired up each button with a class

<button id = "next1" type="button" class="check-btn">Next</button>

Then I used Jquery to get all those buttons and find the parent div (based on your structure) and then get all the child inputs (can include selects etc). From here you can continue to tweak to perform a check on each type of input etc.

$(document).ready(function(){
    $('.check-btn').on('click',function(){
        var parent = $(this).parent('div');
        var elems = parent.find('input');
        alert(elems.length);
        //DO checks here for each element
    });
});

pass values from separate divs into a javascript function

2 Answers2