从克隆元素中获取数据

时间:2014-02-18 13:57:47

标签: javascript jquery html

我有问题。在我的形式我有div

<div class="wyksztalcenie">
<select id="szkola">
    <option value="Wyższe">Wyższe</option>
    <option value="Średnie">Średnie</option>
    <option value="Zawodowe">Zawodowe</option>
</select> 
<input class="cos1" id="nazwa" name="nazwaszkoly" placeholder="nazwa uczelni/szkoły" type="text" /> 
<input class="cos1" id="kierunek" name="kier" placeholder="kierunek" type="text" /> 
<input class="cos1" id="rok" name="rok" placeholder="rok ukończenia" type="text" />
</div>

我已经克隆了这个div五次,我的问题是从输入中获取数据并在克隆div中选择。在这个用户选择教育水平(高中,大学等),然后我以“Select-input-input-input”格式将其发送到数据库。这没关系,但只有第一个div保存到数据库中。 任何人都可以帮助我

3 个答案:

答案 0 :(得分:0)

假设上面代码的五个相同副本,这样的东西应该可以工作,你可以通过索引引用.wyksztalcenie的每个实例:

// selects the first (index zero) instance of the cloned div
// substitute 1-4 for the zero to get the others
//
$('.wyksztalcenie').eq(0).find('select').val();

如果您想全部循环使用它们,请使用each()

$('.wyksztalcenie').each(function() {
    var myVal = $(this).find('select').val();
    // do something with myVal
});

答案 1 :(得分:0)

name元素添加select属性,并将所有id属性替换为class。 然后,所有名称属性都应附加[](例如:kier[])。

然后你可以在处理页面的数组中找到它们中的所有五个。

答案 2 :(得分:0)

我已经模拟了你的问题;

HTML (我猜,你已经克隆过它了):

<div class="wyksztalcenie">
<select class="szkola">
    <option value="Wyższe">Wyższe</option>
    <option value="Średnie">Średnie</option>
    <option value="Zawodowe">Zawodowe</option>
</select> 
<input class="cos1" id="nazwa" name="nazwaszkoly" placeholder="nazwa uczelni/szkoły" type="text" /> 
<input class="cos1" id="kierunek" name="kier" placeholder="kierunek" type="text" /> 
<input class="cos1" id="rok" name="rok" placeholder="rok ukończenia" type="text" />
</div>
<div class="wyksztalcenie">
<select class="szkola">
    <option value="Wyższe">Wyższe</option>
    <option value="Średnie">Średnie</option>
    <option value="Zawodowe">Zawodowe</option>
</select> 
<input class="cos1" id="nazwa" name="nazwaszkoly" placeholder="nazwa uczelni/szkoły" type="text" /> 
<input class="cos1" id="kierunek" name="kier" placeholder="kierunek" type="text" /> 
<input class="cos1" id="rok" name="rok" placeholder="rok ukończenia" type="text" />
</div>
<div class="wyksztalcenie">
<select class="szkola">
    <option value="Wyższe">Wyższe</option>
    <option value="Średnie">Średnie</option>
    <option value="Zawodowe">Zawodowe</option>
</select> 
<input class="cos1" id="nazwa" name="nazwaszkoly" placeholder="nazwa uczelni/szkoły" type="text" /> 
<input class="cos1" id="kierunek" name="kier" placeholder="kierunek" type="text" /> 
<input class="cos1" id="rok" name="rok" placeholder="rok ukończenia" type="text" />
</div>
<div class="wyksztalcenie">
<select class="szkola">
    <option value="Wyższe">Wyższe</option>
    <option value="Średnie">Średnie</option>
    <option value="Zawodowe">Zawodowe</option>
</select> 
<input class="cos1" id="nazwa" name="nazwaszkoly" placeholder="nazwa uczelni/szkoły" type="text" /> 
<input class="cos1" id="kierunek" name="kier" placeholder="kierunek" type="text" /> 
<input class="cos1" id="rok" name="rok" placeholder="rok ukończenia" type="text" />
</div>

<input type="button" id="send" value="Send"/>

<强> JS:

$("#send").on("click", function() {
    var html ="";
    var counter = 1;
    $('.wyksztalcenie').each(function() {
        var selectValue = $(this).find('select').val();

        var inputOne = $(this).find('#nazwa').val();
        var inputTwo = $(this).find('#kierunek').val();
        var inputThree = $(this).find('#rok').val();

        html += "select-" + counter + "=" + selectValue + "&input-" + counter + "=" + inputOne + "&input-" + counter + "=" + inputTwo + "&input-" + counter + "=" + inputThree;
        html += "&";
        counter++;
    });
    html = html.substring(0, html.length-1);

    // Send data here
});

您可以在此处查看工作演示: http://jsfiddle.net/4egzF/

注意:将selectbox id更新为class。 ID必须是唯一的