Как использовать jquery для публикации выпадающих значений в другой форме PHP - PullRequest
0 голосов
/ 26 апреля 2011

Спасибо за ваше время, я потратил значительную часть своего дня, погугляя каждый возможный способ, и я не могу найти ясный простой ответ. Я перепробовал все, что мог придумать, и нашел здесь отличные ответы. Я очень надеюсь, что кто-то может мне помочь. Я провел большую часть своего исследования jquery на этом сайте, но безрезультатно, я все еще ищу ответы. Здесь я также нашел несколько полезных статей, я просто не должен полностью понимать или упускать из виду некоторые простые факты. Я определенно новичок во всем этом, поэтому давайте сделаем это легко и просто! Для начала я беру данные формы пользователя и проверяю с помощью php-скрипта, который, будем надеяться, будет общаться с базой данных и хранить информацию о форме.

Итак, вот формы кишок:

    <form method="post" action="test.php" name="contactform" id="contactform">
    <div class="grid_6" id="register">
    <center><h4>Required Information</h4></center>
    <p>
      <label for="name">Name:</label>
      <input name="name" id="name" type="text" />
    </p>
    <p>
      <label for="email">Your Email:</label>
      <input name="email" id="email" type="text" />
    </p>
    <p>
    <label for="trew">Contact Phone:</label>
    <input name="txtAreaCode" id="txtAreaCode" style="width: 30px;" maxlength="3" value=""type="text">
    <span style="color: rgb(255, 200, 46);">&nbsp;-&nbsp;</span>
    <input name="txtPrefix" id="txtPrefix" style="width: 30px;" maxlength="3" value=""type="text">
    <span style="color: rgb(255, 200, 46);">&nbsp;-&nbsp;</span>
    <input name="txtPhone" id="txtPhone" style="width: 45px;" maxlength="4" value=""type="text">
    <span style="color: rgb(255, 200, 46);">&nbsp;-&nbsp;</span>
    <input name="txtPhoneExt" id="txtPhoneExt" style="width: 35px;" maxlength="10" value=""type="text">
    ext.
    </p>
    <p>
      <label for="zip">Zip Code:</label>
      <input name="zip" id="zip" type="text" />
    </p>
    <p>
      <label for="school">Name of School:</label>
      <input name="school" id="school" type="text" />
    </p>
    <p>
      <label for="title">Affiliation</label>
      <select name="title">
      <option selected="NULL">Please Select</option>
      <option value="student">Student</option>
      <option value="parent">Parent</option>
      <option value="teacher">Teacher</option>
      <option value="booster">Booster</option>
      <option value="clubpres">Club President</option>
      <option value="principal">Principal</option>
      <option value="ptsa">PTSA</option>
      </select>
    </p>
    </div>
    <div class="grid_6" id="contactinfo">
    <center><h4>Additional Information</h4></center>
    <p>
      <label for="color">School Colors:</label>
      <input name="color" id="color" type="text" />
    </p>
    <p>
      <label for="mascot">Mascot:</label>
      <input name="mascot" id="mascot" type="text" />
    </p>
    <p>
      <label for="tagline">Tagline/Motto:</label>
      <input name="tagline" id="tagline" type="text" />
    </p>
    <p>
      <label for="sbsize">Approximate Student Body Size:</label>
      <input name="sbsize" id="sbsize" type="text" />
    </p>
    <p>
      <label for="level">Interest Level:</label>
      <select name="level">
      <option value="1">Interested</option>
      <option value="2">Slightly Interested</option>
      <option value="3">Moderately Interested</option>
      <option value="4">Highly Interested</option>
      <option value="5">Extremely Interested</option>
      </select>
    </p>
    <p>
      <label for="verify">1 + 3 =</label>
      <input name="verify" id="verify" class="small" type="text" />
    </p>
    <button class="fr" type="submit" id="submit">Send</button>
  </form>
  </div>

Я беру эту форму и делаю ее красивой с помощью jquery, теперь именно здесь я испытываю самую головную боль в своей жизни, я потратил час на переписывание с нуля, думая, что у меня были синтаксические ошибки или что-то в этом роде. Приходите, чтобы узнать, что эта маленькая жемчужина была проблемой, все хорошо, мы все делаем ошибки. Вот файл формы jquery, это не мой проект, я даже не уверен, что это необходимо, но вот источник моих проблем, я их все разобрал, но 1 (надеюсь!).

  jQuery(document).ready(function(){

$('#contactform').submit(function(){

    var action = $(this).attr('action');

    $("#message").slideUp(750,function() {
    $('#message').hide();

    $('#submit')
        .after('<img src="./img/form/ajax-loader.gif" class="loader" />')
        .attr('disabled','disabled');

    $.post(action, { 
        name: $('#name').val(),
        email: $('#email').val(),
        txtAreaCode: $('#txtAreaCode').val(),
        txtPrefix: $('#txtPrefix').val(),
        txtPhone: $('#txtPhone').val(),
        txtPhoneExt: $('#txtPhoneExt').val(),
        zip: $('#zip').val(),
        school: $('#school').val(),
        title: singleValues = $("#title").val(),
        color: $('#color').val(),
        mascot: $('#mascot').val(),
        tagline: $('#tagline').val(),
        sbsize: $('#sbsize').val(),
        level: $('#level').val(),
        verify: $('#verify').val()
    },
        function(data){
            document.getElementById('message').innerHTML = data;
            $('#message').slideDown('slow');
            $('#contactform img.loader').fadeOut('slow',function(){$(this).remove()});
            $('#contactform #submit').attr('disabled',''); 
            if(data.match('success') != null) $('#contactform').slideUp('slow');

        }
    );

    });

    return false; 

});

    });

Хорошо, теперь вот где я вижу проблему: я пытаюсь получить значения множественного выбора, чтобы опубликовать последний и последний фрагмент кода, мой php-файл, который выполняет проверку, я разобрал пух для отладки. Но я уверен, что я предоставил более чем достаточно, чтобы исправить. так вот php ...

  <?php
if(trim($_POST['name']) == '') {
    echo '<div class="error-message">Attention! You must enter your name.</div>';
    exit();
} else {
    $name = trim($_POST['name']);
}

if(trim($_POST['email']) == '') {
    echo '<div class="error-message">Attention! You must enter your email.</div>';
    exit();
} else {
    $email = trim($_POST['email']);
}

if(trim($_POST['txtAreaCode']) == '') {
    echo '<div class="error-message">Attention! You must enter your txtAreaCode.</div>';
    exit();
} else {
    $txtAreaCode = trim($_POST['txtAreaCode']);
}

if(trim($_POST['txtPrefix']) == '') {
    echo '<div class="error-message">Attention! You must enter your txtPrefix.</div>';
    exit();
} else {
    $txtPrefix = trim($_POST['txtPrefix']);
}
    if(trim($_POST['txtPhone']) == '') {
    echo '<div class="error-message">Attention! You must enter your txtPhone.</div>';
    exit();
} else {
    $txtPhone = trim($_POST['txtPhone']);
}

if(trim($_POST['zip']) == '') {
    echo '<div class="error-message">Attention! You must enter your zip.</div>';
    exit();
} else {
    $zip = trim($_POST['zip']);
}

if(trim($_POST['school']) == '') {
    echo '<div class="error-message">Attention! You must enter your school.</div>';
    exit();
} else {
    $school = trim($_POST['school']);
}


if(trim($_POST['title']) != 'NULL') {
    echo '<div class="error-message">Attention! You must enter your title.</div>';
    exit();
} else {
    $title = trim($_POST['title']);
}


if(trim($_POST['verify']) == '') {
        echo '<div class="error-message">Attention! Please enter the verification number.</div>';
        exit();
    } else if(trim($_POST['verify']) != '4') {
        echo '<div class="error-message">Attention! The verification number you entered is incorrect.</div>';
        exit();
    }   
        echo 'working';     

?>

Теперь я уверен, что есть много обходных путей, я хотел бы знать, что мне нужно сделать, чтобы все это заработало. Я не могу отказаться от jQuery, поскольку это необходимо для проекта, я уверен, что это должно быть простое решение. Скрестив пальцы, как всегда, прости меня за то, что я зашел за борт, я просто чувствую, что должен показать вам, в чем моя проблема. Я заметил, что если я вообще не использую 2-й кусок кода, это творит чудеса, но, как я уже сказал, мне нужно его использовать ...

Из того, что я понял, я явно делаю что-то не так в разделе действий .post, так как он не публикует значения выпадающего списка.

Ответы [ 3 ]

1 голос
/ 26 апреля 2011

Я делаю много таких форм для приложений моей компании, и определенно есть несколько ярлыков, которые вы можете использовать.

  1. Сериализация данных, а не использование чистых идентификаторов. Таким образом, вам не нужно указывать КАЖДЫЙ идентификатор для отправки формы.
  2. Используйте сценарий проверки на внешнем интерфейсе, он сократит объем проверки на внутреннем уровне, о котором вам нужно беспокоиться, чтобы сообщить об ответе после отправки. Вы не можете избавиться от внутренней проверки, но использование внешнего средства проверки позволяет вам быстро и эффективно предупредить пользователя о потенциальной проблеме без «затрат» на отправку. Мне очень нравится встроенный скрипт валидатора .
  3. Если вы публикуете свои данные с помощью Ajax-вызова, а не просто сообщения, вы можете использовать коллбэк успеха для решения таких проблем, как проверка, модальные окна успеха и т. Д.
  4. Когда мне нужно сделать внутреннее оповещение о проверке, я обычно делаю один общий div оповещения в верхней части формы и сообщаю об этом через элемент success вызова Ajax (обычно отправляя JSON). Помните, Успех на Ajax означает, что транзакция произошла, вы все равно можете получать сообщения об ошибках из PHP и иметь дело с ошибкой. Делая только одно окно с предупреждением, я сохраняю массу работы и синтаксиса, поскольку большинство всех ошибок обрабатываются на внешнем интерфейсе, а внутренняя часть просто избыточна.

Итак, вот пример того, как я заполнил бы форму на моем сайте:

<div id="error" style="display:none"></div>  <!-- error div, hidden -->

<form id="form">
  <input type="text" id="name" name="name" class="validator">  <!-- don't forget names! -->
  <input type="text" id="name" name="name2" class="validator">
  <button id="submit">Send</button>
</form>

<script type="text/javascript">
  $('#submit').click(function() {   // onclick of submit, submit form via ajax
    $.ajax({
      url: "url_to_submit_to.php",  //url to submit to
      timeout: 30000,
      type: "POST",
      data: $('#form).serialize(),  //gets form data, sends via post to processing page
      dataType: 'json',             //what to do with returned data, in this case, it's json
      error: function(XMLHttpRequest, textStatus, errorThrown)  {
         alert("An error has occurred making the request: " + errorThrown)
      },
      success: function(outstuff){
         if (outstuff.success == 1) {       //
             alert('success')
         } else {
             $('#error').html('there is an error, do something');
             //Do other stuff
         }
      }
    });
  });
</script>
1 голос
/ 26 апреля 2011

Да, вы должны добавить и id в выпадающее меню, иначе вы не можете назвать его как $("#title") в jquery

и в вашем jquery он попытается отправить, когда страница загрузится так, как вы ее называете, как

 jQuery(document).ready(function(){

Попробуйте изменить его на $(function(){

Надеюсь, это сработает

0 голосов
/ 26 апреля 2011

Странно, не правда ли, что вы красиво установили идентификаторы для всех других элементов в вашей форме, за исключением выпадающих списков, где вы устанавливаете только имена.

Формы передают значенияэлементы управления используют имя, но вы ссылаетесь на значение в своем коде jquery, используя идентификатор ('#').

Так что просто попробуйте изменить свои выпадающие объявления, чтобы они имели идентификаторы ... например:

<form method="post" action="test.php" name="contactform" id="contactform">
    <div class="grid_6" id="register">
    <center><h4>Required Information</h4></center>
    <p>
      <label for="name">Name:</label>
      <input name="name" id="name" type="text" />
    </p>
    <p>
      <label for="email">Your Email:</label>
      <input name="email" id="email" type="text" />
    </p>
    <p>
    <label for="trew">Contact Phone:</label>
    <input name="txtAreaCode" id="txtAreaCode" style="width: 30px;" maxlength="3" value=""type="text">
    <span style="color: rgb(255, 200, 46);">&nbsp;-&nbsp;</span>
    <input name="txtPrefix" id="txtPrefix" style="width: 30px;" maxlength="3" value=""type="text">
    <span style="color: rgb(255, 200, 46);">&nbsp;-&nbsp;</span>
    <input name="txtPhone" id="txtPhone" style="width: 45px;" maxlength="4" value=""type="text">
    <span style="color: rgb(255, 200, 46);">&nbsp;-&nbsp;</span>
    <input name="txtPhoneExt" id="txtPhoneExt" style="width: 35px;" maxlength="10" value=""type="text">
    ext.
    </p>
    <p>
      <label for="zip">Zip Code:</label>
      <input name="zip" id="zip" type="text" />
    </p>
    <p>
      <label for="school">Name of School:</label>
      <input name="school" id="school" type="text" />
    </p>
    <p>
      <label for="title">Affiliation</label>
      <select name="title" id="title">
      <option selected="NULL">Please Select</option>
      <option value="student">Student</option>
      <option value="parent">Parent</option>
      <option value="teacher">Teacher</option>
      <option value="booster">Booster</option>
      <option value="clubpres">Club President</option>
      <option value="principal">Principal</option>
      <option value="ptsa">PTSA</option>
      </select>
    </p>
    </div>
    <div class="grid_6" id="contactinfo">
    <center><h4>Additional Information</h4></center>
    <p>
      <label for="color">School Colors:</label>
      <input name="color" id="color" type="text" />
    </p>
    <p>
      <label for="mascot">Mascot:</label>
      <input name="mascot" id="mascot" type="text" />
    </p>
    <p>
      <label for="tagline">Tagline/Motto:</label>
      <input name="tagline" id="tagline" type="text" />
    </p>
    <p>
      <label for="sbsize">Approximate Student Body Size:</label>
      <input name="sbsize" id="sbsize" type="text" />
    </p>
    <p>
      <label for="level">Interest Level:</label>
      <select name="level" id="level">
      <option value="1">Interested</option>
      <option value="2">Slightly Interested</option>
      <option value="3">Moderately Interested</option>
      <option value="4">Highly Interested</option>
      <option value="5">Extremely Interested</option>
      </select>
    </p>
    <p>
      <label for="verify">1 + 3 =</label>
      <input name="verify" id="verify" class="small" type="text" />
    </p>
    <button class="fr" type="submit" id="submit">Send</button>
  </form>
  </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...