I want to make a form like this, and i want to post the form - with javascript - in all the keydowns.
<form action="{$formaction}" enctype="multipart/form-data" method="post">
<input type="text" name="n">
<input type="password" name="pw">
<button name="in" type="submit">enter</button>
</form>
please tell me how to do this.
<form onkeydown="this.submit();">
<!-- form content -->
</form>
<body onkeydown="document.forms["myform"].submit();">
If you do that, the page will reload, just as if you were clicking the submit button.
What you probably want is to attach an onkeydown handler to the password field and submit key presses via AJAX.
For an example look at one of javascript auto-suggest libraries, e.g. AJAX Auto Suggest.
Related
I want to server-render an HTML form in such a way that it is not submittable until it has been asynchronously enhanced by my JavaScript.
It looks like there's no disabled attribute for the form element (MDN).
I could add a disabled attribute to the submit button (and then later remove this with JavaScript when ready), but the user could still submit the form by focusing any input and pressing Enter.
Is there any way to prevent submission without JavaScript (short of just hiding the form entirely in the server-rendered HTML, and unhiding it with JS)?
use type="button" attribute to your submit button and then change it to type="submit"
You can simply do
onsubmit="return false"
on the form tag:
<form onsubmit="return false">
<label>input
<input type="text" name="input" name="a" />
</label>
<input type="submit" value="submit" />
</form>
Sorry, answering my own question - it turns out it's easy to make a form unsubmittable (in Chrome 69 at least) just by disabling the submit button.
When the only submit button is disabled, then even focusing a text field and pressing Enter does not submit the form.
I was wondering how can I submit div data to MySQL. Im not used to javascript so I dont really know whats happening on the javascript part but how can I get or input the action="" part and method="" part and can I or should I add value="" to the hidden input???
Form html code:
<form onsubmit="document.getElementById('hidden_data').value=document.getElementById('showing_data').innerHTML;">
<input id="hidden_data" name="data" type="hidden"/>
<div id="showing_data" class="commenttext" contenteditable="true"></div>
<input type="submit" Value="Enter" id="submitthis">
</form>
Use the hidden field inside the form tag and use the JavaScript to put the value inside it. You can get the hidden field in the $_POST['hydName'].Put the data on the click of the submit button into the hidden field. Keep your action and method of the form same as required. After the click event is fired, it will submit the form to its action URL
<input type="submit" onclick="document.getElememtById('hidden').value = document.getElementById('div').innerHtml;" />
It works:
When the button is used
The problem is:
When pressing enter inside the text-field, the default action seems to be submit. I just want it to use the button available as default. Is this possible or will i have to highjack the enterpress with javascript?
Code:
<form>
<label>Password:<input type="password" id="pass" name="pass"></label>
<input type="button" value="hämta data" onclick="getData('password.txt')"/>
</form>
By default, pressing Enter in the last field of a form submits the form. Try this:
<form onsubmit="return false;">
so that submitting the form doesn't do anything.
I have a form as
<form action="" method="post">
<input name="Descripcion" type="hidden" value="" id="Descripcion" runat="server" />
<input id="Submit1" type="submit" value="Comprar" />
Instead of clicking on submit button i want that the form should be posted without clicking submit button with hidden fields
You can submit an html form from javascript by calling the form's .submit() method. e.g.:
document.getElementById('myform').submit();
Of course, you still need an action in your example so the form has somewhere to submit itself to. Also, you tagged your question asp.net. If this is a webforms page you should use the default form rather then adding your own form to the html markup. You submit the asp.net form by calling the __doPostBack() method.
you can build and submit a form with javascript you can call from other events or when loading a page
myform=document.createElement('form');
myform.method='post';
myform.target='_top';
myform.action='';
input1=document.createElement('input');
input1.type='hidden';
input1.name='Descripcion';
input1.value='';
myform.appendChild(input1);
document.appendChild(myform);
myform.submit();
You can also accomplish the same using jQuery:
$('myform').submit();
I want my submit button to be positioned somewhere that outside my form element? Do I have any options? With the exception of jquery.
Thanks,
rodchar
Another approach to this is merely to set the form attribute on the button:
<form id="first">
<input type="submit" form="second" value="Submit Second" />
</form>
<form id="second">
<input type="submit" form="first" value="Submit First" />
</form>
Fiddle: http://jsfiddle.net/52wgc2ym/
Original Answer
The natural behavior of a submit button is to submit the nearest form up its hierarchy. The only other way to get a button to submit a form which it doesn't reside in is to use JavaScript (which is what jQuery is, basically).
If necessary, you could reposition the submit button so that it appears as though it's not in the form visually when the page is rendered. You would do this using CSS, which may give the desired result(s).
The submit button needs to be inside the form, yes.
It seems strange to me to want it any other way, anyway. What would be the point if the input controls were in one place on the page, and the submit button was waaay over there somewhere else?
Yes, structurally the submit button needs to be inside a form element for the document to be valid X/HTML. But visually you can position the submit button anywhere you want with appropriate CSS (float, absolute/relative positioning, etc). You could also write JavaScript that will trigger the form submission and tie it to another element.
This is a common situation. I think this will do it (haven't tested it):
<form id="form1" action="someAction.cgi" method="GET">
<!-- other fields go here -->
</form>
<form id="form2" action="someOtherAction.cgi" method="GET">
<!-- other fields go here -->
</form>
<form>
<input value="Form One" type="button"
onclick="document.getElementById('form1').submit();"/>
<input value="Form Two" type="button"
onclick="document.getElementById('form2').submit();"/>
</form>
I'm not sure if you need that last <form>. I seem to remember browsers ignoring events if the button wasn't in a form.
Inputs of type submit only make sense as children of <form> elements. But using CSS I'm sure you can position it wherever you like. Remember form elements are "invisible" so just expand the tags around more of your content and you're covered. Here's the documentation on forms for HTML4, it's still appropriate.
This is the another type of answer getting more clear view from egrunin answer
<form id="form1" name="form1" action="someAction.cgi" method="GET">
<!-- other fields go here -->
</form>
<form id="form2" name="form2" action="someOtherAction.cgi" method="GET">
<!-- other fields go here -->
</form>
Calling by form id:
<form>
<input value="Form One" type="button"
onclick="document.getElementById('form1').submit();"/>
<input value="Form Two" type="button"
onclick="document.getElementById('form2').submit();"/>
</form>
or Calling by form name:
<form>
<input value="Form One" type="button"
onclick="document.form1.submit();"/>
<input value="Form Two" type="button"
onclick="document.form2.submit();"/>
</form>