jquery submit form

I am trying to submit a form inside a modal window using jquery.

the form tag is:

<form action="forms_SPedit.asp" method="post" class="form-horizontal" id="form2" name= "form2">

I am using this script but the problem is that the form submits on load of the page instead of when I click the 'submit' button

<button type="submit" class="btn btn-primary" >Save changes</button>

and the script:

<script>
         $('#edit-modal').on('show.bs.modal', function(e) {
             
             var $modal = $(this),
                 esseyId = e.relatedTarget.id;
                          $modal.find('.edit-content').html(esseyId);
             
         })
             
                  
            $("form[name='form2']").submit()
</script>
LVL 1
AleksAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
That's because your .submit() is in the page load and not inside the event handler
// Not sure what show.bs.modal is but this does
// not look like a click handler

$('#edit-modal').on('show.bs.modal', function(e) {
	var $modal = $(this),
	esseyId = e.relatedTarget.id;
	$modal.find('.edit-content').html(esseyId);
})
// This appears to be in the onload
$("form[name='form2']").submit()

Open in new window


But now I am confused - you want to use jquery to submit the form when you press the submit button ... Why? Why not just let the submit button do what it is supposed to do?

To submit a form on an event you need to do something like this

$(function() {
  // ON LOAD FUNCTIONALITY HERE
 ...
   // SET UP EVENT HANDLER
    $('SOME_SELECTOR').click(function(e) {
      e.preventDefault();
      // INSIDE EVENT HANDLER 
      // NOT IN ON LOAD
      $('form[name="form2"]').submit();
  });
});

Open in new window

AleksAuthor Commented:
Julian,

I am not familiar with jquery I am trying to figure things out still.

If I want the button to do the submit how would I change this code ?

--

$(function() {
  // ON LOAD FUNCTIONALITY HERE
 ...
   // SET UP EVENT HANDLER
    $('SOME_SELECTOR').click(function(e) {
      e.preventDefault();
      // INSIDE EVENT HANDLER
      // NOT IN ON LOAD
      $('form[name="form2"]').submit();
  });
});

--

button:

<button type="submit" class="btn btn-primary" >Save changes</button>

Do I need to add code to the button ?
AleksAuthor Commented:
I tried the following:

Form:

<form action="forms_SPedit.asp" method="post" class="form-horizontal" id="form2" form="form2"></form>

Submit button:

<button type="submit" class="btn btn-primary" id = "mdlsave" >Save changes</button>

Script (from you)


<script>
         $('#edit-modal').on('show.bs.modal', function(e) {
             
             var $modal = $(this),
                 esseyId = e.relatedTarget.id;
                          $modal.find('.edit-content').html(esseyId);
             
         })
             
             $(function() {
  // ON LOAD FUNCTIONALITY HERE

   // SET UP EVENT HANDLER
    $('mdlsave').click(function(e) {
      e.preventDefault();
      // INSIDE EVENT HANDLER
      // NOT IN ON LOAD
      $('form[name="form2"]').submit();
  });
});
</script>

But still won't submit the form  :#
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Julian HansenCommented:
I am confused though - why do you need jquery to make a button submit? Form buttons by default submit the form - so why do you need JQuery to do it?
AleksAuthor Commented:
I have a normal submit button. Above is the code.
AleksAuthor Commented:
This is to submit the form:

<button type="submit" class="btn btn-primary" id = "mdlsave"  name = "mdlsave" >Save changes</button>

And this is the code you sent with the selector with the name 'mdlsave'

             $(function() {
   // ON LOAD FUNCTIONALITY HERE
  ...
    // SET UP EVENT HANDLER
     $('mdlsave').click(function(e) {
       e.preventDefault();
       // INSIDE EVENT HANDLER
       // NOT IN ON LOAD
       $('form[name="form2"]').submit();
   });
 });

But the form still not submitting. I tried without the code and just use a simple form and the submit button but for some reason it won't submit.
Julian HansenCommented:
That is probably because of the errors in your markup.

You have two <form> declarations both of which terminate on the same line they are declared.

You need to fix those. Please refer to the sample
http://www.marcorpsa.com/ee/t962.html
Julian HansenCommented:
To clarify
<form action="forms_SPedit.asp" method="post" class="form-horizontal" id="form2" form="form2"></form>

Open in new window


You need to put your controls between the <form> tags

<form action="forms_SPedit.asp" method="post" class="form-horizontal" id="form2" form="form2">
PUT YOUR FORM FIELDS HERE - NOT OUTSIDE
</form>

Open in new window

AleksAuthor Commented:
Yes of course. Here is my whole form code:

--

 <form action="forms_SPedit.asp" method="post" class="form-horizontal" id="form2" form="form2"></form>
                    <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h3 class="modal-title">Edit form</h3><small>Please select the Beneficiary that will fill out the form and update the description.</small>
   
                </div>
                  <div class="panel-body">
                      <div >
                        <div class="ibox float-e-margins">
                          
                        <div class="form-group"><label class="col-sm-2 control-label">Beneficiary</label>
<div class="col-sm-10">
<select class="form-control m-b" name="account">
 <option>option 1</option>
 <option>option 2</option>
 <option>option 3</option>
 <option>option 4</option>
 </select>
 </div>  </div>
                          
                     
<div class="form-group"><label class="col-sm-2 control-label">Description</label>
<div class="col-sm-10"><input id = "idfield" name "idfield" type="text" class="form-control" placeholder="Mr. | Ms." value="<%=request("formcaseid")%>"></div>
</div>  
                    

                        
                        </div>
                      </div>
                    </div>
               
                <div class="modal-footer">
                      <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
                                   <button type="submit" class="btn btn-primary" id = "mdlsave"  name = "mdlsave" >Save changes</button>
                </div>
            </div>
            </form>

----
Julian HansenCommented:
As mentioned before - you are closing your form outside of your form variables

<form action="forms_SPedit.asp" method="post" class="form-horizontal" id="form2" form="form2"></form> <!-- WRONG! - YOUR FORM CLOSE MUST GO AT THE END OF YOUR FORM
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

Open in new window


Again I refer you to the sample link I posted - I have posted a snippet here - take a look at how the <form> is defined - the closing </form> comes at the end. As you have it you are creating an empty form - the submit button is outside of the form and so is never going to do anything
<form action="forms_SPedit.asp" method="post" class="form-horizontal" id="form1">
  <div class="modal-header">
	<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
	<h3 class="modal-title">Edit form:<div class="modal-body edit-content"></div> </h3><small>Please make the necessary changes, save and close.</small>
	<div>Value passed in from click - this will submit with the form as parameter 'idvalue'<input type="text" name="idvalue" /></div>
  </div>
  <div class="panel-body">
	<div >
	  <div class="ibox float-e-margins">
		<div class="form-group">
		  <label class="col-sm-2 control-label">Beneficiary</label>
		  <div class="col-sm-10">
			<select class="form-control m-b" name="account">
			  <option>option 1</option>
			  <option>option 2</option>
			  <option>option 3</option>
			  <option>option 4</option>
			</select>
		  </div>
		</div>
		<div class="form-group">
		  <label class="col-sm-2 control-label">Description</label>
		  <div class="col-sm-10">
			<input type="text" class="form-control" placeholder="Mr. | Ms." value="value from recordset">
		  </div>
		</div>
	  </div>
	</div>
  </div>
  <div class="modal-footer">
	<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
	<button type="submit" class="btn btn-primary" >Save changes</button>
  </div>
</div>
</form>

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
AleksAuthor Commented:
Seems to me there was an extra tag there because the form was closed at the bottom .. let me delete it and try ..
AleksAuthor Commented:
Ok cool ! .. the form submits. I will close this ticket and concentrate on passing the value to the form.
AleksAuthor Commented:
Thanks for the patience  :#
Julian HansenCommented:
You are welcome.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.