javascript - Type = submit not working in the form of bootstrap? - Stack Overflow

admin管理员组

文章数量:1435859

    <form class="form-asd" role="form">
     <h2>REGISTER</h2>
       <hr />
           EmailAddress:

         <input class="form-control" type="text" id="email" required/>
           <br />
           Password:
         <input class="form-control" type="password" id="Password" required />
           User Type
         <input style="width: 2.2em;height:1.3em" id="ContributorRdb" type="radio" name="choose" value="Contributor" required/>Contributor
         <input style="width: 2.2em;height:1.3em"  id="CategoryRdb" type="radio" name="choose" required/>
            <select class="btn btn-default dropdown-toggle" id="Select" disabled="disabled">
                <option selected="selected" disabled="disabled">type</option>
                <option value="one">one</option>
                    <option value="two">two</option>
                <option value="three">three</option>
                <option value="four">four</option>

            </select>
            <br/        
          <input  class="btn btn-lg btn-sucess"  id="Register" value="Sign up"/>

</form>
<script>
   $(document).ready(function () {
   $('#Register').click(function () {
      alert("this is submitted");

   });
})

</script>

This above form works well without tag type= submit but when i modify the button to input class="btn btn-lg btn-sucess" id="Register" value="Sign up" type="submit" this form stops working so is there any way to use type ="submit" in this input tag.

    <form class="form-asd" role="form">
     <h2>REGISTER</h2>
       <hr />
           EmailAddress:

         <input class="form-control" type="text" id="email" required/>
           <br />
           Password:
         <input class="form-control" type="password" id="Password" required />
           User Type
         <input style="width: 2.2em;height:1.3em" id="ContributorRdb" type="radio" name="choose" value="Contributor" required/>Contributor
         <input style="width: 2.2em;height:1.3em"  id="CategoryRdb" type="radio" name="choose" required/>
            <select class="btn btn-default dropdown-toggle" id="Select" disabled="disabled">
                <option selected="selected" disabled="disabled">type</option>
                <option value="one">one</option>
                    <option value="two">two</option>
                <option value="three">three</option>
                <option value="four">four</option>

            </select>
            <br/        
          <input  class="btn btn-lg btn-sucess"  id="Register" value="Sign up"/>

</form>
<script>
   $(document).ready(function () {
   $('#Register').click(function () {
      alert("this is submitted");

   });
})

</script>

This above form works well without tag type= submit but when i modify the button to input class="btn btn-lg btn-sucess" id="Register" value="Sign up" type="submit" this form stops working so is there any way to use type ="submit" in this input tag.

• javascript
• twitter-bootstrap
• twitter-bootstrap-3
• bootstrap-typeahead

Share Improve this question Follow edited Jul 30, 2014 at 6:00 user764357 asked Jul 24, 2014 at 8:12 dpndradpndra 2,18844 gold badges2424 silver badges2929 bronze badges 3

• 1 This above form works well without tag What do you mean? Does it submit or show the alert? – Ron van der Heijden Commented Jul 24, 2014 at 8:15
• What do you mean by stops working? – BenM Commented Jul 24, 2014 at 8:17
• You not even mention what is the input type is ... This is not proper way... As you mention when you use submit, you must specify the right POST url to submit it – Anto king Commented Jul 24, 2014 at 8:17

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

I can imagine that the form doesn't work.

Form attributes

Wrong: <form class="form-asd" role="form">

This should contain action and method.

Good: <form class="form-asd" role="form" action="" method="post">

Submit button

Wrong: <input class="btn btn-lg btn-sucess" id="Register" value="Sign up"/>

Should contain the type

Good: <input type="submit" class="btn btn-lg btn-sucess" id="Register" value="Sign up"/>

jQuery (not sure if you even include the library)

Wrong: $('#Register').click(function () {

Never asume that users always click the button (you can also use the enter key)

Good: $('form').submit(function () { (I would use a class or id in the form tag)

jQuery 2

You don't prevent the default action, so your form will be submitted always.

You can add something like return false; or event.preventDefault(); in the jQuery callback.

Why not just submit the form, if that is what are you trying to attain. You can do this inside your document ready function like..

$('.form-asd).submit();

Or if this is the only form in your document then you can target the form using the form element selector like

$('form').submit();

Hope it helps :=)

you can do a following change to the code to make it work.

<input  class="btn btn-lg btn-sucess"  id="Register" value="Sign up"/>

to

<input type="button" class="btn btn-lg btn-sucess"  id="Register" value="Sign up"/>

but definitely you should use the best practices suggested in the previous answer.

I think you must set action for the form <form class="form-asd" role="form" action='youraction'> and you can call document.forms[0].submit() in javascript, It will submit form. Hope this help!

本文标签： javascriptTypesubmit not working in the form of bootstrapStack Overflow