Monday 29 July 2013

Form auto fill using javascript and jquery. Passing and receiving parameters with windows.location

Scenario:

A Signup field with a signup button on index pages. if a user enter their email address and click on signup button it should be redirected to the devise signup path (new). And the email entered on the previous page should be filled in the signup registration form. first you need to override the devise registration form. which is partial.
I resolved the issue by using Javascript and jquery. below are the files I have made changes in.
_________________________________________________

index.html.erb
 
<%= render 'index_signup_label'%>

_________________________________________________

_index_signup_label.html.erb

<div class="signup-label" >
  <div style="margin-bottom: 5px"> <h2>Sign up for free</h2></br>
    <form action="/signup" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" novalidate>
    <input type="email" placeholder="Your best Email" value="" name="EMAIL" class="required email" id="mce-EMAIL">

    <%= button_tag "Free Signup", :id => 'signup-btn', :type => 'button',:class => "button primary" %>
   
</div></br>
    </form>
</div>

<script type="text/javascript">
$('#signup-btn').click(function(){
    var email = $("#mce-EMAIL").val();
    location.href = '<%= signup_path() %>?email='+email;
});

</script>
_____________________________________________

_user_form.html.erb

<p>
  <%= f.label :email, Spree.t(:email) %><br />
  <%= f.email_field :email, :class => 'title uemail', :onChange => 'changeallemail(this.value)', :onfocus => 'resetEl()' %>
</p>


<script type="text/javascript">
function get_param(name){
   if(name=(new RegExp('[?&]'+encodeURIComponent(name)+'=([^&]*)')).exec(location.search))
      return decodeURIComponent(name[1]);
}

$(document).ready(function() {
    var email = get_param('email');
    $('.uemail').val(email);
});
</script>





No comments:

Post a Comment