jQuery « jQuery, массив, и куча элементов формы.

Здравствуйте, скажем у меня есть пример кода на html + jquery и мне нужно сделать так, чтобы при нажатии на кнопку, в зависимости от выбранных радибоксов, чекбоксов, текстовых полей, селектов (много их будет, даже вложенных) у меня в модальном диалоге в два разных таба вписывался (склеивался) некий, разный "текст". Он должен хранится наверное в массиве (на клиентской части), а также, например, если выбран первый радибокс, то текст берется из первого текстового поля и вставляется также где-то в текст (скажем 2 куска склеили, этот текст, и еще какой-то текст доклеили). Что-то я вот сам накодил, а далее с функцией проверки всех нажмяканых вещей из формы и вставки текста прошу Вашей помощи.


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="jquery-ui-1.8.13.custom.css" rel="stylesheet" />
<script  src="jquery-1.6.min.js" type="text/javascript"></script>
<script  src="jquery-ui-1.8.13.custom.min.js" type="text/javascript"></script>
</head>
<body>
<script>
 
  $(function() {
    $( "#tabs" ).tabs();
    $( "#dialog" ).dialog({
      autoOpen: false,
      modal: true,
      show: "blind",
      hide: "explode"
    });
    $( "#submit" ).click(function() {
      $( "#dialog" ).dialog( "open" );
      return false;
    });
    var obj={ item1: "one",
          item2: "two",
          item3: "three",
          item4: "abrakadabra",
          item5: "naletaj",
          item6: "jozhuk",        
         };
   
  });
 
 
  </script>
<form action="" method="">
  <div class="fieldset" id="">
    <h2>SELECT1:</h2>
    <div class="block">
      <select name="selectTestName1" id="selectTestId1">
        <option value="vTest1">TEST1</option>
        <option value="vTest2">TEST2</option>
        <option value="vTest3" selected="selected">TEST3</option>
      </select>
    </div>
  </div>
  <!-- .fieldset -->
 
  <div class="fieldset" id="set0">
    <h2>SELECT2:</h2>
    <div class="block">
      <select name="selectTestName2" id="selectTestId2">
        <option value="1">TEST4</option>
        <option value="2">TEST5</option>
        <option value="3">TEST6</option>
      </select>
    </div>
  </div>
  <!-- .fieldset -->
 
  <div class="fieldset" id="set1">
    <h2>RADIO1:</h2>
    <div class="block">
      <label id="label1">text1:
        <input type="text" name="text1" value="1000" id="text1" maxlength="4" />
      </label>
     

      <label for="radName1">
        <input type="radio" name="radName1" value="radValue1" id="radId1" />
        RADIO1TEST</label>
     

      <label id="label2" title="">texxt2:
        <input type="text" name="text2" value="1000" id="text2" maxlength="4" />
      </label>
     

      <label for="radname1">
        <input type="radio" name="radName1" value="radValue2" id="radId2" />
        RADIO2TEST</label>
    </div>
  </div>
  <!-- .fieldset -->
 
  <div class="fieldset">
    <h2>CHECKBOX1:</h2>
    <div class="block">
      <label for="">
        <input type="checkbox" name="" value="" id="checkBox1" />
        CHECKBOX1TEST</label>
     

      <label id="label3">text3:
        <input type="text" name="hh" value="150" id="hh" maxlength="3" />
        </label>
    </div>
  </div>
 

  <input type="submit" id="submit" value="BUTTON" onClick=""/>
</form>

<!-- D I A L O G + T A B S -->
<div id="dialog" title="Basic dialog">
  <div class="demo" id="tabsshow">
    <div id="tabs">
      <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
      </ul>
      <div id="tabs-1">
        <p></p>
      </div>
      <div id="tabs-2">
        <p></p>
      </div>
    </div>
  </div>
</div>
</body>
</html>
 

1 ответов


Ну так в чем вопрос: получайте поля формы с помощью селектора jQuery, а его значение с помощью .val() и на этом стройте свою логику, вешайте эту логику на submit формы и все должно получиться. Если хочется не писать много похожего кода то сделайте хэш-массив описывающий варианты и гуляйте по нему each()-ем. Как-то так:


$('form').submit(function()
{
  if ($('#field1').val()='variant1')
  {
    $('#tabs-2').apeend('Hello World!')
  }
});
 
или так:

$('form').submit(function()
{
  switch ($('#field1').val())
  {
    case 'variant1':
      $('#tabs-2').apeend('Hello World!')
    break;
    case 'variant2':
      $('#tabs-2').apeend('World Hello!')
    break;
  }
});
 

Или я не понял что вам нужно?