JQuery: изменение содержимого в контактной форме при нажатии кнопки

Question

Я использую JQuery для изменения содержимого div и заменяю его формой контакта после нажатия кнопки. Я никогда не могу заставить это работать вообще , Я на правильных линиях? Или, может быть, есть лучший способ сделать это?

Заранее спасибо.

<div class="container"> 
    <div class="row"> 

    <div id="quote"> 
     <div class="col-md-6"> 
     <h3>Lorem ipsum</h3> 
     <p>Lorem ipsum dolor sit amet, no inani everti tincidunt mea, dicam discere mandamus te mea. Odio enim nam te, id oportere facilisis qui. Phaedrum perpetua an his, mea ea facete vivendum. Cu dolor nusquam percipit his.Idque augue temporibus vix an, at cum mandamus democritum. Autem persequeris qui cu. Duo cu menandri eloquentiam efficiantur, vel suavitate corrumpit te. Nam te habemus scripserit, in has oratio minimum interpretaris. Nibh illud id mea, cu meliore alienum vituperatoribus est. Meis fabellas constituto cu vel, paulo omnes fierent ad sea. Nihil graecis epicuri mel ut, elaboraret percipitur ex sit. Sit nullam iudicabit eu. Ut sumo luptatum vim, cu pri aperiam volumus. Ut nam ornatus assueverit, vidisse dolorem habemus id pro. Pro putent indoctum erroribus cu, per an suscipit salutatus complectitur. At oblique euismod molestiae ius. Oratio referrentur at nam. Quod amet viderer ne ius, illud interesset eu sea, pri harum sonet ex. In propriae accusamus duo, per ignota maiestatis te. Duo ut vidit ipsum imperdiet, ea aliquid deseruisse vis. Pri quodsi appareat assueverit ea. Vis ad possim quaeque, sit quodsi impetus detraxit ut. Id est mucius propriae, ius eu integre graecis facilisi. Putant ornatus mei cu, habeo aliquando in pro, per diam mutat platonem in. Ne sea diceret abhorreant, option salutatus repudiandae an pri, ex ius nisl suavitate intellegebat.</p> 

     <div class="col-md-3 col-md-offset-9"> 
      <a href="#quote" class="btn btn-block btn-large btn-success">Get Quote</a> 
     </div> 
     </div> 
    </div> 

    <div class="col-md-6"> 
     <img src="img/image.png"> 
    </div> 

    </div> 
    <script> 
    $(document).ready(function(){ 
     $("#quote").click(function(){ 

     $("#quote").html(" 

     <div class="row"> 
     <div class="col-md-6"> 
     <h1>Contact Us</h1> 

     <form class="form-horizontal"> 

     <div class="form-group"> 
     <label name="Name" class="col-sm-2 control-label">Name</label> 
     <div class="col-sm-6"> 
     <input type="text" class="form-control" placeholder="Your Name"> 
     </div> 
     </div> 

     <div class="form-group"> 
     <label name="email" class="col-sm-2 control-label">Email</label> 
     <div class="col-sm-6"> 
     <input type="text" class="form-control" placeholder="Your Email"> 
     </div> 
     </div> 

     <div class="form-group"> 
     <label name="message" class="col-sm-2 control-label">Message</label> 
     <div class="col-sm-6"> 
     <textarea rows="5" class="form-control" placeholder="Please enter your message"></textarea> 
     </div> 
     </div> 

      <!-- Checkboxes --> 
     <div class="form-group"> 
     <label for="website" class="col-sm-2 control-label">Favourite Search Engine</label> 
     <div class="col-sm-6"> 

     <label class="checkbox-inline"><input type="checkbox" value="option1">YouTube</label> 
     <label class="checkbox-inline"><input type="checkbox" value="option2">Google</label> 
     <label class="checkbox-inline"><input type="checkbox" value="option3">Yahoo</label> 
     <label class="checkbox-inline"><input type="checkbox" value="option4">Baidu</label> 
     </div> 
     </div> 

      <!-- Radio Buttons--> 
     <div class="form-group"> 
     <label for="gender" class="col-sm-2 control-label">Gender</label> 
     <div class="col-sm-6"> 
     <label class="radio-inline"><input type="radio" name="genderRadio" value="option1">Male</label> 
     <label class="radio-inline"><input type="radio" name="genderRadio" value="option2">Female</label> 
     </div> 
     </div> 

      <!-- Drop Down Menu--> 
     <div class="form-group"> 
     <label for="urgency" class="col-sm-2 control-label">Gender</label> 
     <div class="col-sm-6"> 
     <select class="form-control"> 
     <option>Urgent</option> 
     <option>Medium</option> 
     <option>Low</option> 
     </select> 
     </div> 
     </div> 

      <!-- Submit Button --> 
     <div class="form-group"> 
     <div class="col-sm-offset-2 col-sm-6"> 
     <button type="submit" class="btn btn-primary">Submit</button> 
     <button type="submit" class="btn btn-default">Clear</button> 
     </div> 
     </div> 



     </form> 

     </div> 
     </div> 

     "}); 
     }); 
    </script> 

</div> 
</div> 

Answer 1

Есть несколько проблем с вашим кодом, но все они проистекают из того, что вы встроили большой фрагмент HTML в свой JS.

Попробуйте сохранить HTML и JS полностью разделенными. Одна строка HTML в вашем JS не всегда страшно, но для такого длинного блока HTML определенно не вставлять его в JS, как вы сделали там:

1. легко вводить ошибки и синтаксических ошибок (которые вы сделали там, такие вещи, как неэкранированных двойные кавычки)
2. это трудно поддерживать
3. это выглядит неаккуратно

---

Вместо этого поместите оба <div> с вашей HTML с начала.

Очевидно, что вы не хотите, чтобы вторая <div> была видна при первой загрузке страницы, поэтому скройте ее с помощью CSS (display: none;). Таким образом, она не будет видна пользователю вообще при загрузке страницы.

Тогда в вашем JS, когда кнопка нажата, просто используйте $("#myFirstDiv").hide(), чтобы скрыть первую <div> и $("#mySecondDiv").show() показать контактную форму <div>.

Answer 2

Это цитата проблема ...

$("#quote").html(" 

    <div class="row"> 
     <div class="col-md-6">..."); 

Поставит <div class= в элементе ...

избежать двойные кавычки внутри вашего HTML или переключиться на одинарные.

Answer 3

Для лучшей читаемости и удобства обслуживания вы должны поместить html в отдельный файл и загрузить файл или часть файла, используя приведенное ниже.

$("#quote").load("HtmlPageUrl"); 

или раздела на странице:

$("#quote").load("HtmlPageUrl #container");