Question

我已经看了很多类似的帖子，但是他们似乎都没有回答我的需要，所以这里有。你也可以认识到我从这里使用的很多代码 - 所以如果有人看到自己的工作，请提前感谢！

我试图创建一个相对简单的表单，允许访问者保存重要日期，以便我们发送产品推荐。

当设置为显示时，我的虚拟表单发布正常，但我无法让克隆的表单工作。在点击更新时，我会获得包含所有数据的webhook网址，但它不会发布或重定向我，就像在虚拟表单上一样。

我已尝试更改克隆上的表单ID并调用它，将新表单添加到新div并且我尝试过的任何内容似乎都无法正常工作。我对我的无法工作感到有些不安，所以任何帮助都会非常感激！

提前致谢

HTML：

 <div class="dynamicInput" id="occasion_00"  >

  <form class = "occasion-form" id="occasion-01" > 
  <button type="button" class="close-form"><i class="fa fa-times fa-2x" aria-hidden="true" ></i></button>
         <h3 id="title">Add A Reminder</h3>
    <div class="form-block">

      <input type="hidden" name="email" value="{{ customer.email }}">
      <input type="hidden" name="site" value="UK">
   <label for="header" id="occasion-title">Who are we shopping for?</label> 

    <input type="text" id="occasion-info" name="header_01" style="padding: 6px 4px" value="" placeholder="Please enter their name" >  

     <label for="who" id="occasion-title">What is their relationship to you?</label>
     <select class="dropdown" id="occasion-info" name="who_01" select="invalid { color: gray; }">

 <option value=""disabled selected hidden>They are my...</option>
<option value="Wife/Girlfriend/Female Partner">Wife/Girlfriend/Female Partner</option>
<option value="Husband/Boyfriend/Male Partner">Husband/Boyfriend/Male Partner</option>
<option value="Mum">Mum</option>
<option value="Dad">Dad</option>
<option value="Brother">Brother</option>
<option value="Sister">Sister</option>
<option value="Grandma">Grandma</option>
<option value="Grandad">Grandad</option>
<option value="Aunt">Aunt</option>
<option value="Uncle">Uncle</option>
<option value="Niece">Niece</option>
<option value="Nephew">Nephew</option>
<option value="Other Male Family">Other Male Family</option>
<option value="Other Female Family">Other Female Family</option>
<option value="Best friend - female">Best friend - female</option>
<option value="Best friend - male">Best friend - male</option>
<option value="Other">Other</option>
</select> 

      <div style="clear: both;"></div>





<label for="what" id="occasion-title">What's the occasion?</label>

<select class="dropdown" id="occasion-info" name="what_01" select="invalid { color: gray; }" >

<option value="" disabled selected hidden>Please select one</option>                    
<option value="Birthday">Birthday</option>
<option value="Anniversary">Anniversary</option>
<option value="Valentines Day">Valentines Day</option>
<option value="Mothers Day">Mothers Day</option>
<option value="Fathers Day">Fathers Day</option>
<option value="First Date">First Date</option>
<option value="Christmas">Christmas</option>
<option value="Just Because">Just Because</option>
</select>
  <div style="clear: both;"></div>    


  <label for="when" id="occasion-title">When is it?</label>
  <input type="date"  id="occasion-info" name="when_01" value="" placeholder = "DD/MM/YYYY">

<div style="clear: both;"></div> 

<label for="metal" id="occasion-title">What's their favourite metal?</label>
<select class="dropdown" id="occasion-info" name="metal_01" select="invalid { color: gray; }" >
<option value="" disabled selected hidden>Please select one</option>    
<option value="Gold">Gold - Any</option>
<option value="White Gold">White Gold</option>
<option value="Yellow Gold">Yellow Gold</option>
<option value="Rose Gold">Rose Gold</option>
<option value="Silver">Silver</option>
<option value="Platinum">Platinum</option>
<option value="Titanium">Titanium</option>
<option value="Any">They don't mind</option>       
<option value="Other">Other</option>
</select>

<div style="clear: both;"></div>                             

<label for="gemstone" id="occasion-title">Do they have a preferred gemstone?</label>
<select class="dropdown" id="occasion-info" name="gemstone_01" select="invalid { color: gray; }" >
<option value="" disabled selected hidden>Please select one</option>    
<option value="Diamond">Diamond</option>
<option value="Pearl">Pearl</option>
<option value="Opal">Opal</option>
<option value="Rose Gold">Rose Gold</option>
<option value="Silver">Silver</option>
<option value="Platinum">Platinum</option>
<option value="Titanium">Titanium</option>
<option value="Any">They don't mind</option>       
<option value="Other">Other</option>
</select>

<div style="clear: both;"></div>                             


<button type="submit" class="occasion-submit"><i class="fa fa-calendar-check-o fa-lg" aria-hidden="true"></i>SAVE THE DATE</button>
    </div>
   </form>

    </div>   
    </div>
   <div class="occ-clone">
    </div>

JQUERY：

//new form submission//
$('.occasion-submit' ).on('click', function(){
  $(this).closest('form').submit(function(e){

    e.preventDefault();
    $.ajax({
        url:'ZAPIER WEBHOOK URL',
        type:'POST',
        data:$(this).serialize(),
        success:function(){
          // Redirect to another success page
          window.location = "XXX"; //this is my page url in the real code//
        }
    });
});
});  


//create new form //

       $( document ).ready(function() { 

      var current_id = '{{nextoccasion}}' //SHOPIFY TAG FOR COUNTING


        $('#add-btn').click(function(){
         nextElement($('#occasion_00'));
           $(".savedoccasions").hide();
          $('#add-btn').hide();

        })

        function nextElement(element){
            var newElement = element.clone();
            var id = current_id;
            current_id = id;
            var title_id = current_id;
            if(id <10)id = "0"+id;
            newElement.attr("id",element.attr("id").split("_")[0]+"_"+id);

            var field = $('#occasion-info[name^=who]').attr("name");
            $('#occasion-info[name^=who]', newElement).attr("name", field.split("_")[0]+"_"+id );
           var field2 = $('#occasion-info[name^=what]').attr("name");
            $('#occasion-info[name^=what]', newElement).attr("name", field2.split("_")[0]+"_"+id );
           var field3 = $('#occasion-info[name^=when]').attr("name");
            $('#occasion-info[name^=when]', newElement).attr("name", field3.split("_")[0]+"_"+id );
           var field4 = $('#occasion-info[name^=metal]').attr("name");
            $('#occasion-info[name^=metal]', newElement).attr("name", field4.split("_")[0]+"_"+id );
          var field5 = $('#occasion-info[name^=header]').attr("name");
            $('#occasion-info[name^=header]', newElement).attr("name", field5.split("_")[0]+"_"+id );
          var field6 = $('#occasion-info[name^=gemstone]').attr("name");
         $('#occasion-info[name^=gemstone]', newElement).attr("name", field5.split("_")[0]+"_"+id );
            newElement.appendTo($(".occ-clone"));
          $(newElement).show();
        }

       });

Answer 1

只需用这个替换你的代码。您不需要再次使用表单提交，只需单击按钮

即可提交表单

$(function(){
    $(document).on('click', '.occasion-submit', function(e){    
        e.preventDefault();
        $.ajax({
            url:'ZAPIER WEBHOOK URL',
            type:'POST',
            data:$(this).serialize(),
            success:function(){
                // Redirect to another success page
                window.location = "XXX"; //this is my page url in the real code//
            }
        }); 
    }); 
});

Jquery克隆表单未提交

1 个答案: