передать значение формы в src url iframe с jquery

Question

Я с ума сошел, чтобы попытаться сделать то, что кажется таким простым. У меня есть форма, где я спрашиваю почтовый индекс. Я использую colorbox для всплытия лайтбокса с iframe после ввода вашего почтового индекса. Мне нужно передать значение zip-кода из формы в исходный URL-адрес iframe. Моя форма код выглядит следующим образом:

<div class="form-zip-start"> 
    <p>Enter your zip code to begin your search:</p> 
    <form id="submit" action="#" name="submit" method="post"> 
     <input name="zip" id="zip" type="text" value="" class="zip-start" />    
     <div class="form-submit"><a href="/form.htm" rel="zipformSubmit" class="zipformSubmit">Submit</a></div> 
    </form> 
</div> 

Мой код выглядит расслоение плотной, как это:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
<script src="/ppc/colorbox/colorbox/jquery.colorbox.js"></script> 
<script> 
    $(document).ready(function(){ 
     $("a[rel=zipformSubmit]").click(function() { $("form#submit").submit(function(e) { 
     var zip = $('#zip').attr('value'); 
     colorbox({href: "?zip=" + zip, iframe:true, innerWidth:800, innerHeight:600}); 
    }); 
    }); 
    }); 
</script> 

конечный результат должен быть загружен IFrame как ... SRC = "/ form.htm почтовый индекс = 92108"

значение 92108 должно быть от формы ввода под названием „молния“

я не могу показаться, чтобы получить значение почтового индекса, чтобы передать правильно. Может так или иначе показать мне, что я делаю неправильно?

Спасибо!

Answer 1

Вам необходимо использовать preventDefault(), чтобы браузер не перешел по ссылке, также вы делаете свои действия внутри события отправки своей формы, но у вас нет кнопки отправки, и вы не запускаете событие отправки , так что событие никогда не срабатывает. В этом случае вам не нужно вводить форму, поэтому вы можете просто использовать событие click click для открытия iframe, используя данные, введенные в форму. Как и

<script> 
     $(document).ready(function() { 
     $("a[rel=zipformSubmit]").click(function(e) { 
      e.preventDefault(); 
      var zip = $('#zip').val(); 
alert("about to open colorbox with zipcopde " + zip); 
      $.colorbox({href: "?zip=" + zip, iframe:true, innerWidth:800, innerHeight:600}); 
     }); 
     }); </script> 

Примечание: некоторые проверки будет хорошо if (zip.length > 0) { } и т.д.

Добавлено после Комментарий:

для того, чтобы принести в ваш $_GET['Source'] вы должны добавить скрытое поле формы:

<div class="form-zip-start"> 
     <p>Enter your zip code to begin your search:</p> 
     <form id="submit" action="#" name="submit" method="post"> 
<input type='hidden' name='source' id='source' value='<?php echo $_GET['Source']; ?>' /> 
      <input name="zip" id="zip" type="text" value="" class="zip-start" />    
      <div class="form-submit"><a href="/form.htm" rel="zipformSubmit" class="zipformSubmit">Submit</a></div> 
     </form> 
    </div> 

затем введите js:

<script> 
      $(document).ready(function() { 
      $("a[rel=zipformSubmit]").click(function(e) { 
       e.preventDefault(); 
       var zip = $('#zip').val(); 
       var source = $('#source').val(); 
    alert("about to open colorbox with zipcopde " + zip); 
       $.colorbox({href: "?source="+source+"&zip=" + zip, iframe:true, innerWidth:800, innerHeight:600}); 
      }); 
      }); </script> 

Answer 2

Trie это, я изменил

var zip = $('#zip').attr("value"); 

с этим

var zip = $('#zip').val(); 

JS код:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
<script src="/ppc/colorbox/colorbox/jquery.colorbox.js"></script> 
<script> 
    $(document).ready(function(){ 
     $("a[rel=zipformSubmit]").click(function(){ 
      $("form#submit").submit(function(e) { 
       var zip = $('#zip').val(); 
       colorbox({href: "?zip=" + zip, iframe:true, innerWidth:800, innerHeight:600}); 
       }); 
      }); 
     }); 
</script>