I have a survey on a website, and there seems to be some issues with the users hitting enter (I don&#39;t know why) and accidentally submitting the survey (form) without clicking the submit button. Is there a way to prevent this?  

I&#39;m using HTML, PHP 5.2.9, and jQuery on the survey.

Prevent users from submitting a form by hitting Enter

Is there some easy way to handle multiple submit buttons from the same form? For example:

    &lt;% Html.BeginForm(&quot;MyAction&quot;, &quot;MyController&quot;, FormMethod.Post); %&gt;
    &lt;input type=&quot;submit&quot; value=&quot;Send&quot; /&gt;
    &lt;input type=&quot;submit&quot; value=&quot;Cancel&quot; /&gt;
    &lt;% Html.EndForm(); %&gt;

Any idea how to do this in ASP.NET Framework Beta? All examples I&#39;ve googled for have single buttons in them.

How do you handle multiple submit buttons in ASP.NET MVC Framework?

In this particular case, what options do I have to make these inputs call a function when I press Enter?

Html:
&lt;!-- language: html --&gt;
    &lt;form&gt;
        &lt;input type=&quot;text&quot; ng-model=&quot;name&quot; &lt;!-- Press ENTER and call myFunc --&gt; /&gt;
        &lt;br /&gt;
        &lt;input type=&quot;text&quot; ng-model=&quot;email&quot; &lt;!-- Press ENTER and call myFunc --&gt; /&gt;
    &lt;/form&gt;

&lt;!-- language: js --&gt;

    // Controller //
    .controller(&#39;mycontroller&#39;, [&#39;$scope&#39;,function($scope) {
        $scope.name = &#39;&#39;;
        $scope.email = &#39;&#39;;
        // Function to be called when pressing ENTER
        $scope.myFunc = function() {
           alert(&#39;Submitted&#39;);
        };
    }])

Submit form on pressing Enter with AngularJS

Let&#39;s say you create a wizard in an HTML form. One button goes back, and one goes forward. Since the *back* button appears first in the markup when you press &lt;kbd&gt;Enter&lt;/kbd&gt;, it will use that button to submit the form.

Example:

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-html --&gt;

    &lt;form&gt;
      &lt;!-- Put your cursor in this field and press Enter --&gt;
      &lt;input type=&quot;text&quot; name=&quot;field1&quot; /&gt;

      &lt;!-- This is the button that will submit --&gt;
      &lt;input type=&quot;submit&quot; name=&quot;prev&quot; value=&quot;Previous Page&quot; /&gt;

      &lt;!-- But this is the button that I WANT to submit --&gt;
      &lt;input type=&quot;submit&quot; name=&quot;next&quot; value=&quot;Next Page&quot; /&gt;
    &lt;/form&gt;

&lt;!-- end snippet --&gt;

I would like to get to decide which button is used to submit the form when a user presses &lt;kbd&gt;Enter&lt;/kbd&gt;. That way, when you press &lt;kbd&gt;Enter&lt;/kbd&gt; the wizard will move to the next page, not the previous. Do you have to use `tabindex` to do this?


Multiple submit buttons in an HTML form

This is what I found by Firebug in Firefox.

```
Values of disabled inputs will not be submitted
```

Is it the same in other browsers?

If so, what&#39;s the reason for this?


Values of disabled inputs will not be submitted

I have the following javascript in my page which does not seem to be working.

    $(&#39;form&#39;).bind(&quot;keypress&quot;, function(e) {
      if (e.keyCode == 13) {               
        e.preventDefault();
        return false;
      }
    });

I&#39;d like to disable submitting the form on enter, or better yet, to call my ajax form submit.  Either solution is acceptable but the code I&#39;m including above does not prevent the form from submitting.

jquery disable form submit on enter

Using jQuery&#39;s &#39;submit&#39; - is there a way to pass additional parameters to a form? I am NOT looking to do this with Ajax - this is normal, refresh-typical form submission.

	$(&#39;#submit&#39;).click(function () {
		$(&#39;#event&#39;).submit(function () {
			data: { 
			form[&#39;attendees&#39;] = $(&#39;#attendance&#39;).sortable(&#39;toArray&#39;).toString();
		});
	});

jQuery - add additional parameters on submit (NOT ajax)

I have a HTML form where I use several buttons. The problem is that no matter which button I  click, the form will get submitted even if the button is not of type &quot;submit&quot;. e.g. Buttons like :`&lt;button&gt;Click to do something&lt;/button&gt;`, result in form submission.

It&#39;s quite painful to do an `e.preventDefault()` for each one of these buttons.

I use jQuery and jQuery UI and the website is in HTML5.

Is there a way to disable this automatic behavior?



Disable form auto submit on button click

I have a simple form that submits text to my SQL table. The problem is that after the user submits the text, they can refresh the page and the data gets submitted again without filling the form again. I could redirect the user to another page after the text is submitted, but I want users to stay on the same page.

I remember reading something about giving each user a unique session id and comparing it with another value which solved the problem I am having but I forgot where it is.

How to prevent form resubmission when page is refreshed (F5 / CTRL+R)

I have the following code:

    &lt;script type=&quot;text/javascript&quot;&gt;
            function SubmitForm()
            {
                
                form1.submit();
            }
            
            function ShowResponse()
            {
                
            }
    &lt;/script&gt;
    .
    .
    .
    &lt;div&gt;
        &lt;a href=&quot;#&quot; onclick=&quot;SubmitForm();&quot;&gt;Click&lt;/a&gt;
    &lt;/div&gt;

I want to capture the html response of `form1.submit`? How do I do this? Can I register any callback function to form1.submit method?


How do I capture response of form.submit

&gt; **Possible Duplicate:**  
&gt; [HTML: Submitting a form by pressing enter without a submit button](https://stackoverflow.com/questions/477691/html-submitting-a-form-by-pressing-enter-without-a-submit-button)  

&lt;!-- End of automatically inserted text --&gt;

How can I submit a form with just the Enter key on a text input field, without having to add a submit button?

I remember this worked in the past, but I tested it now and the form doesn&#39;t get submitted unless there&#39;s a submit-type input field inside it.

Submit form with Enter key without submit button?

I&#39;ve seen a number of posts on here saying not to use the `$_REQUEST` variable. I usually don&#39;t, but sometimes it&#39;s convenient. What&#39;s wrong with it?

What&#39;s wrong with using $_REQUEST[]?

Im trying to submit a HTML form using AJAX using [this example](http://jquery.malsup.com/form/).

My HTML code:

    &lt;form id=&quot;formoid&quot; action=&quot;studentFormInsert.php&quot; title=&quot;&quot; method=&quot;post&quot;&gt;
        &lt;div&gt;
            &lt;label class=&quot;title&quot;&gt;First Name&lt;/label&gt;
            &lt;input type=&quot;text&quot; id=&quot;name&quot; name=&quot;name&quot; &gt;
        &lt;/div&gt;
        &lt;div&gt;
            &lt;label class=&quot;title&quot;&gt;Name&lt;/label&gt;
            &lt;input type=&quot;text&quot; id=&quot;name2&quot; name=&quot;name2&quot; &gt;
        &lt;/div&gt;
        &lt;div&gt;
            &lt;input type=&quot;submit&quot; id=&quot;submitButton&quot;  name=&quot;submitButton&quot; value=&quot;Submit&quot;&gt;
        &lt;/div&gt;
    &lt;/form&gt;

My script:

    &lt;script type=&quot;text/javascript&quot;&gt;
        $(document).ready(function() { 
            $(&#39;#formoid&#39;).ajaxForm(function() { 
                alert(&quot;Thank you for your comment!&quot;); 
            }); 
        });
    &lt;/script&gt;

This is not working, I&#39;m not even getting the alert message
and when I submit I don&#39;t want to redirect to another page, I just want to show the alert message.

Is there a simple way of doing it?

PS: I have several fields, I have just put two as an example.

Submitting HTML form using Jquery AJAX

I am trying to capture the submit button press of my form and if the form is submitted, the page refreshes and I show a few hidden fields. I would like to capture whether the form has been submitted before or not and if it submitted on reload, I would like to unhide the hidden fields. I was trying to use a global variable to achieve this, however I was unable to make it work properly.

Here is what I tried:

&lt;!-- language: lang-js --&gt;

      var clicked = false;

      $(document).ready(function() {

        $(&quot;input[type=&#39;submit&#39;][value=&#39;Search&#39;]&quot;).attr(&quot;onclick&quot;, &quot;form.act.value=&#39;detailSearch&#39;; clicked = true;  return true;&quot;);

        if (clicked == true) {
          // show hidden fields
        } else {
          // don&#39;t show hidden fields
        }
      });

Any suggestions on what is wrong with this code?

Persist variables between page loads

I have the following HTML structure and I am trying to use Selenium to enter a value of `NUM`:


    &lt;div class=&quot;MY_HEADING_A&quot;&gt;
        &lt;div class=&quot;TitleA&quot;&gt;My title&lt;/div&gt;
        &lt;div class=&quot;Foobar&quot;&gt;&lt;/div&gt;
            &lt;div class=&quot;PageFrame&quot; area=&quot;W&quot;&gt;				
                 &lt;span class=&quot;PageText&quot;&gt;PAGE &lt;input id=&quot;a1&quot; type=&quot;txt&quot; NUM=&quot;&quot; /&gt;  of &lt;span id=&quot;MAX&quot;&gt;&lt;/span&gt; &lt;/span&gt;
    &lt;/div&gt;


Here is the code I have written:

    head = driver.find_element_by_class_name(&quot;MY_HEADING_A&quot;)
    frame_elem = head.find_element_by_class_name(&quot;PageText&quot;)

    # Following is a pseudo code. 
    # Basically I need to enter a value of 1, 2, 3 etc in the textbox field (NUM) 
    # and then hit RETURN key.
    ## txt  = frame_elem.find_element_by_name(&quot;NUM&quot;)
    ## txt.send_keys(Key.4)

How to get this element and enter a value‎‎‎‎‎‎‎? ‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎



How to locate and insert a value in a text box (input) using Python Selenium?

On submission of a form, I&#39;m trying to `doSomething()` instead of the default post behaviour. 

Apparently in React, [onSubmit is a supported event for forms.][1] However, when I try the following code:

    var OnSubmitTest = React.createClass({
        render: function() {
            doSomething = function(){
               alert(&#39;it works!&#39;);
            }
        
            return &lt;form onSubmit={doSomething}&gt;
            &lt;button&gt;Click me&lt;/button&gt;
            &lt;/form&gt;;
        }
    });

The method `doSomething()` is run, but thereafter, the default post behaviour is still carried out. 

You can test this in my [jsfiddle][2].

My question: How do I prevent the default post behaviour?


  [1]: http://facebook.github.io/react/docs/events.html#form-events
  [2]: https://jsfiddle.net/ayda5w9m/

Setting onSubmit in React.js

I need to have multiple submit buttons.

I have a form which creates an instance of Contact_Call.

One button creates it as normal.

The other button creates it but needs to have a different :attribute value from the default, and it also needs to set the attribute on a different, but related model used in the controller.

How do I do that?  I can&#39;t change the route, so is there a way to send a different variable that gets picked up by [:params]? 

And if I do then, what do I do in the controller, set up a case statement?

How do I create multiple submit buttons for the same form in Rails?

I have a submit button at the end of the form.

I have added the following condition to the submit button:

    onClick=&quot;this.disabled=true;
    this.value=&#39;Sending…&#39;;
    this.form.submit();&quot;

But when it moves to the next page, the parameters did not pass and null values are passed.


How to disable submit button once it has been clicked?

I am trying to fire a function using Jquery when the form submit button is clicked, but the function needs to fire BEFORE the form is actually submitted.

I am trying to copy some `div` tag attributes into hidden text fields upon submission, and then submit the form.

I have managed to get this to work using the `mouseover` function (when the submit button is hovered over), but this will not work on mobile devices using touch.

    $(&quot;#create-card-process.design #submit&quot;).on(&quot;mouseover&quot;, function () {
        var textStyleCSS = $(&quot;#cover-text&quot;).attr(&#39;style&#39;);
        var textbackgroundCSS = $(&quot;#cover-text-wrapper&quot;).attr(&#39;style&#39;);
        $(&quot;#cover_text_css&quot;).val(textStyleCSS);
        $(&quot;#cover_text_background_css&quot;).val(textbackgroundCSS);
    });

I have played around with the `submit` function, but the values are not saved within the fields as the function fires when the form is submitted and not before.

Many thanks.

jQuery function BEFORE form submission

I have a form that has two buttons. One for saving a record and the other for cancelling the save procedure. I am using the `rails.js` *(a common AJAX/jQuery plug-in for those of you not in the know)*  javascript file that works with jQuery for unobtrusive javascript/ajax calls. When I send the form data over ajax, I want the name and value of the button I clicked to be submitted with the rest of the data so that I can make a decision on what to do based on which button was clicked.

The method in the `rails.js` file uses `.serializeArray()` for sending form data to the server. The problem is that this doesn&#39;t include the name/value pair of the button I&#39;ve clicked. jQuery&#39;s website states that they do this on purpose (eventhough its my opinion that they should):

&quot;The `.serializeArray()` method uses the standard W3C rules for [successful controls][1] to determine which elements it should include; in particular the element cannot be disabled and must contain a name attribute. No submit button value is serialized since the form was not submitted using a button.&quot;

How can they assume that a form WASN&#39;T submitted using a button? This makes no sense and a wrong assumption I believe.

Under the W3C rules the button which was activated for the submission of a form is considered a **successful control**.

Since the developers of jQuery have decided to do this on purpose, can I assume that there is another method that **DOESN&#39;T** exclude the activated button in a serialization?

**EDIT: Here is quick example of what my form might look like...**

    &lt;!DOCTYPE html5&gt;
    &lt;html&gt;
    &lt;head&gt;
    &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;
      $(document).ready(function() {
        $(&#39;#form&#39;).submit(function(e) {
          // put your breakpoint here to look at e
          var x = 0;
        });
      });
    &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;form id=&quot;form&quot;&gt;
        &lt;input name=&quot;name&quot; type=&quot;text&quot;&gt;&lt;br/&gt;
        &lt;input name=&quot;commit&quot; type=&quot;submit&quot; value=&quot;Save&quot;/&gt;
        &lt;input name=&quot;commit&quot; type=&quot;submit&quot; value=&quot;Cancel&quot;/&gt;
      &lt;/form&gt;
    &lt;/body&gt;

  [1]: http://www.w3.org/TR/html401/interact/forms.html#h-17.13.2

jQuery serializeArray doesn&#39;t include the submit button that was clicked

I got an image with which links to another page using `&lt;a href=&quot;...&quot;&gt; &lt;img ...&gt; &lt;/a&gt;`.

How can I make it make a post like if it was a button `&lt;input type=&quot;submit&quot;...&gt;`?


How to make a submit out of a &lt;a href...&gt;...&lt;/a&gt; link?

I&#39;ve got a jsf 1.2 form with two buttons and several input fields. The first button discards the entered values and repopulates the page with values from a db, the second button saves the entered values. The problem occurs when the user presses enter while the cursor is in one of the input fields, the form gets submitted and the action associated with the first button gets executed.

The code looks like this:

    &lt;h:commandButton action=&quot;#{bean.reset}&quot; value=&quot;Reset&quot; /&gt;
    &lt;h:commandButton action=&quot;#{bean.save}&quot; value=&quot;Save&quot; /&gt;

    &lt;!-- h:datatable with several h:inputText elements --&gt;

Is it possible to declare a specific button as the default action when pressing enter? Is this behaviour actually specified somewhere?

Default action to execute when pressing enter in a form

The title speaks for itself... I have a couple of forms, one of them is just a single text input form and the other one is composed by two text inputs. I do not want any *submit button* in any of them, I want each form to submit whenever the user presses the ENTER button at any text input:

 1. The form composed by just one input submits everytime the user presses the ENTER button - **Perfect!**
 2. The second form composed by two text inputs does not behave this way, it does not submit when the user presses the ENTER button at any of both inputs.

Is there a way to make a form **with more than one text input** behave this way and avoid having a *submit button* in it?

HTML5: How to make a form submit, after pressing ENTER at any of the text inputs?

1. User submits a form with some basic data.

2. The data is received and treated by an action in the controller and more information that needs to remain private is added.

3. Then I need to send a post request to an external website with all of the combined data from the controller.

What is the best way to do this?

Submit POST data from controller to another website in Rails

I&#39;m trying to send a form&#39;s data using jQuery. However, data does not reach the server. Can you please tell me what I&#39;m doing wrong?

My HTML form:

    &lt;form id=&quot;contactForm&quot; name=&quot;contactForm&quot; method=&quot;post&quot;&gt;
    	&lt;input type=&quot;text&quot; name=&quot;nume&quot; size=&quot;40&quot; placeholder=&quot;Nume&quot;&gt;
    	&lt;input type=&quot;text&quot; name=&quot;telefon&quot; size=&quot;40&quot; placeholder=&quot;Telefon&quot;&gt;
    	&lt;input type=&quot;text&quot; name=&quot;email&quot; size=&quot;40&quot; placeholder=&quot;Email&quot;&gt;
    	&lt;textarea name=&quot;comentarii&quot; cols=&quot;36&quot; rows=&quot;5&quot; placeholder=&quot;Message&quot;&gt;&lt;/textarea&gt; 
    	&lt;input id=&quot;submitBtn&quot; type=&quot;submit&quot; name=&quot;submit&quot; value=&quot;Trimite&quot;&gt;
    &lt;/form&gt;

&lt;br&gt;
JavaScript (in the same file as the above form):   

    &lt;script type=&quot;text/javascript&quot;&gt;
    	$(document).ready(function(e) {
    	
            $(&quot;#contactForm&quot;).submit(function() {
    			$.post(&quot;getcontact.php&quot;, $(&quot;#contactForm&quot;).serialize())
    			// Serialization looks good: name=textInNameInput&amp;&amp;telefon=textInPhoneInput etc
    			.done(function(data) {
    				if (data.trim().length &gt; 0) {
    					$(&quot;#sent&quot;).text(&quot;Error&quot;);	
    				} else {
    					$(&quot;#sent&quot;).text(&quot;Success&quot;);
    				}
    			});
    			
    			return false;
    		})
        });
    &lt;/script&gt;

&lt;br&gt;
Server side PHP (*/getcontact.php*):

&lt;!- language:lang-php -&gt;

    $nume = $_REQUEST[&quot;nume&quot;]; // $nume contains no data. Also tried $_POST
    $email = $_REQUEST[&quot;email&quot;];
    $telefon = $_REQUEST[&quot;telefon&quot;];
    $comentarii = $_REQUEST[&quot;comentarii&quot;];

&lt;br&gt;
Can you please tell me what I am doing wrong?

---
##UPDATE
Checked `var_dump($_POST)` and it returned an empty array. 

The weird thing is that the same code tested on my local machine works fine.
If I upload the files on my hosting space it stops working. I tried doing an old-fashioned form without using jQuery and all data was correct. 

I don&#39;t see how this would be a server configuration problem. Any ideas?

Thank you!


Serializing and submitting a form with jQuery and PHP

Can someone help to change this to incorporate an image called `BUTTON1.JPG` instead of the standard `submit` button?

    &lt;form id=&#39;formName&#39; name=&#39;formName&#39; onsubmit=&#39;redirect();return false;&#39;&gt;
        &lt;div class=&quot;style7&quot;&gt;
            &lt;input type=&#39;text&#39; id=&#39;userInput&#39; name=&#39;userInput&#39; value=&#39;&#39;&gt;
            &lt;input type=&#39;submit&#39; name=&#39;submit&#39; value=&#39;Submit&#39;&gt;
        &lt;/div&gt;
    &lt;/form&gt; 

All Form Submit Solutions on Gang of Coders

Total of 26 Form Submit Solutions