CODEWITHSUNDEEP
jqueryhtml
MayuriS
MayuriS

Reputation: 387

Form not getting posted

when i try to click on submit button my form doesn't post or reload on submission why so?

   <form class="form1">
     <input type="text" value="ABC"/>
     <input type="text" value="DEF"/>
     <select name="acces_specfi" class="selectpicker" data-size="10" data-style="btn-info">
                    <option value="public">public</option>
                    <option value="private">private</option>
                </select>
    <button type="submit" class="btn-print"/>

--JS--

 jQuery('.btn-print').click(function(event){
                jQuery(".form1").find(':input').each(function(){
                    if(jQuery(this).val() && jQuery(this).attr('type') !== 'hidden'){

                        jQuery.trim(jQuery(this).replaceWith('<u>'+jQuery(this).val()+'</u>'));
                    }
                    else if(jQuery(this).val()===''){
                        jQuery(this).replaceWith('________');
                    }
                });
});

---Update--

this works 

   jQuery(".form1").find(':input').each(function(){

                    if(jQuery(this).attr('type') !== 'hidden'){
                        jQuery(this).hide();

                        jQuery(this).after('<u>'+jQuery(this).val()+'</u>');
                    }

                });

but all select option are shown in form of list i don't know why i think because of i'm using bootsrap select Bootstrap dropdown

other then select normal text input works great

---Update-----

i replace it with normal select its working great i think because bootstrap select adds extra button and div thats what was causing issue

text input

Upvotes: 0

Views: 68

Answers (3)

Aftab Muni
Aftab Muni

Reputation: 171

Use following:

jQuery('.btn-print').click(function(event){
                jQuery(".form1").find(':input').each(function(){
                    if(jQuery(this).val() && jQuery(this).attr('type') !== 'hidden'){

                        jQuery.trim(jQuery(this).replaceWith('<u>'+jQuery(this).val()+'</u>'));
                    }
                    else if(jQuery(this).val()===''){
                        jQuery(this).replaceWith('________');
                    }
                });
    $('.form1').submit();
});
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<form class="form1">
     <input type="text" value="ABC"/>
     <input type="text" value="DEF"/>
     <select name="acces_specfi" class="selectpicker" data-size="10" data-style="btn-info">
                    <option value="public">public</option>
                    <option value="private">private</option>
                </select>
    <input type="submit" class="btn-print" value='Submit'/>
</form>

Upvotes: 0

adricadar
adricadar

Reputation: 10219

You can add submit() function to your form inside click event.

jQuery(".form1").submit();

Note: You should use it before you replace the input tags. If you need to use it after, you can keep the input fields and make them hidden.

If you don't want a redirect to happen you have to make an async submit.

$('.form1').submit(function(e){
  e.preventDefault();
  //do some verification
  $.ajax({
    url: 'your/page/that/catch/the/request',
    data: $(this).serialize(),
    success: function(data)
    {
      //callback methods go right here
    }
  });
});

Upvotes: 1

Manish Shukla
Manish Shukla

Reputation: 1365

Hi you are missing name attribute

 <input type="text" value="ABC"/>
 <input type="text" value="DEF"/>

these lines should be

 <input type="text" name="abc" value="ABC"/>
 <input type="text" name="def" value="DEF"/>

Upvotes: 0

Related Questions