i want to submit a form using shift+enter button instead of pressing a simply Enter Button.
Pl help me out
If you still want to do this despite the usability problem that this poses...
$('#form').keydown(function(e) {
if( e.keyCode === 13 && e.shiftKey ) { // When "Shift + Enter"
$(this).trigger('submit');
} else { e.preventDefault(); }
});
I suggest use CTRL+ENTER to submit form。So that the user experience will be better。
<script language=javascript>
ie = (document.all)? true:false
if (ie){
function ctlent(eventobject){if(event.ctrlKey && window.event.keyCode==13){this.document.form1.submit();}}
}
</script>
<form action="http://www.TOMMYHU.CN" method=POST name=form1>
<textarea cols=95 name=Content rows=12 wrap=virtual onkeydown=ctlent()>
</textarea>
<input type=Submit value="Submit" name=Submit>
</form>
Have you tried?
$(document).keydown(function(e) {
if(e.keyCode==13 && e.keyCode==16){ // 13=enter 16=shift
//submit here
alert('submit now');
}
else{
e.preventDefault();
}
});
Improving on zhaixiaohu's idea:
<form action="." method="POST">
<textarea name="text"></textarea><br />
<button>Submit</button>
</form>
<script>
var textareas = document.getElementsByTagName("TEXTAREA");
for (var i = 0; i < textareas.length; ++i) {
textareas[i].addEventListener('keydown', function(ev) {
if(ev.ctrlKey && ev.keyCode === 13){
this.form.submit();
}
});
}
</script>
This…
is pure Javascript
attachs itself to all textareas, and submits the correct form
works only in modern browsers, but might be extended to work with more browsers
Related
I posted a smaller to this yesterday and was shown how to do this but it doesn't work and the user never got back to me and I have been working on the same problem for hours.
I am trying to post a checkbox array from jQuery to php, when I run my code nothing seems to happen and when I try var_dump($_POST) this is all I get
Using this question as a reference, it seems that jQuery doesn't handle arrays too well. You can use to snippet from the accepted answer and it should work just fine.
serialize().replace(/%5B%5D/g, '[]')
Change the submit to a button or better use the form's submit event
why data-type html?
Your php does not seem to react to the serialised data but returns a button...
try my code here: http://plungjan.name/SO/sport.php
I am not unravelling the check box array - that is up to you
<?PHP
if (isset($_POST['saved'])) {
echo "saved"; exit(0);
}
else if (isset($_POST['Submit'])) {
echo var_dump($_POST["sport"]); exit(0);
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Sports quiz</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(function() {
$('#myForm').on("submit", function(ev) {
ev.preventDefault(); // cancel submit
var $form = $(this);
if ($("[type=checkbox]:checked").length ==0) {
alert("Please check one or more");
return false;
}
var formData = $form.serializeArray();
formData.push({name:"Submit",value:"submit"}); // note I changed the name from submit to Submit
$.post('sport.php',formData, function(data) {
console.log("Data",data);
if (confirm('You want to save \n' + data + ' as your sport?')) {
formData = $form.serializeArray();
formData.push({name:"saved",value:"saved"});
$.post('sport.php',formData,function(data) {
console.log("Saved Data",data);
});
}
});
});
});
</script>
</head>
<body>
<form id="myForm">
<input type="checkbox" name="sport[]" value="Football">Football<br>
<input type="checkbox" name="sport[]" value="Rugby">Rugby<br>
<input type="checkbox" name="sport[]" value="Golf">Golf<br>
<input type="checkbox" name="sport[]" value="Basketball">Basketball<br>
<br> <input type="submit" class="btn btn-info" name="Submit" value="submit">
</form>
</body>
</html>
How do I type in a HTML textbox and if the first 3 characters dont match a set variable - then display an error? I need to lose the error and display text next to the input after the 3rd character
I'm thinking jQuery, AJAX, PHP - not sure. I just don't want to use an alert box.
And this needs to be before a user enters the submit button...
<form>
<input type="text" id="test"/><br>
<input type="button" id="txt" value="Submit" />
</form>
$(document).ready(function(){
$("#txt").click(function(){
var text = $("#test").val();
var comparingText = "yes";
if (text != comparingText){
alert( $("#test").val());
}
});
});
It will show this alert after write yes.
you can use it as you want.
$( "#test" ).keyup(function() {
var test = $( "#test" ).val();
if(test == 'yes'){
alert( "your Error msg" );
}
});
You can use a <span> element, next to the <input> element to display an error message and, as you said, avoid using the alert box.
JS
HTML
<form>
<input type="text" id="test" oninput="submitData(this.value)"/>
<span id="textError"></span><br/>
<input type="button" id="txt" value="Submit" />
</form>
JS
function submitData(input) {
if (input != "yes") {
document.getElementById("textError").innerHTML = "Your Error MSG";
} else {
document.getElementById("textError").innerHTML = "";
}
}
JS + jQuery
In this case I'm taking Mamunur Rashid's answer to complement the code.
HTML
<form>
<input type="text" id="test"/> <span id="textError"></span><br/>
<input type="button" id="txt" value="Submit" />
</form>
jQuery
$(document).ready(function(){
$("#test").keyup(function(){
var test = $("#test").val();
if (test != "yes") {
$("#textError").html("Your Error MSG");
} else {
$("#textError").html("");
}
});
});
Is it possible to submit a form by clicking a div-element as if it was submitted by the submit button?
So that this PHP works:
if(isset($_POST["share"])) { /* do something*/ }
Form:
<form id="form" action="publish.php" method="POST">
<textarea name="description" maxlength="500">Description...</textarea>
<input type="submit" name="share" value="Share" />
</form>
This does NOT post the share value, $_POST['share'].
if($(".post-form").length){
$(".post-form").click(function(event) {
$("#form").submit();
return false;
});
}
Yes this is possible by using the .submit() function. You can use it like so:
// Wait until the document has been fully loaded
$(document).ready(function() {
// Bind a click event to your element
$('div').click(function(event) {
// Submit the form
// The callback should add a hidden field with the name "share"
$('form').submit(function(eventObj) {
$('<input />').attr('type', 'hidden')
.attr('name', "share")
.attr('value', "Share")
.appendTo('form');
return true;
});
});
});
You can find more information here
Demo: jsfiddle
Set an id for submit button:
<input type="submit" name="share" value="Share" id="btn_submit" />
then you can control it in jquery like this:
$("#btn_submit").onclick(function(){
if(condition==true)
{
return true;
}
else
{
return false;
}
});
I am using a form with the method of GET to add to the query string.
I am running into an issue. When the form is submitted every field is sent and added to the query including with no values.
Example:
http://web.com/?filter-types=news&filter-document-type=&filter-topics=we-have-a-topic&filter-featured=&filter-rating=
Can I not add these to the query string if they are not set? !isset() or is there another way to do this?
You could alternatively manipulate the form inputs thru javascript, just a Mike said in the comments, on submit check the fields, if empty, disable them so that they wont be included on submission.
This is just the basic idea (with jQuery):
<form method="GET" id="form_inputs">
<input type="text" name="field1" value="field_with_value" /><br/>
<input type="text" name="field2" value="" /><br/><!-- empty field -->
<input type="text" name="field3" value="field_with_value" /><br/>
<input type="submit" name="submit_form" id="submit_form" value="Submit" />
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$('input[name="submit_form"]').on('click', function(e){
e.preventDefault();
$('form').children().each(function(i, e){
if($(e).is('input') && $(this).val() == '') {
$(this).prop('disabled', true);
// or $(this).attr('name', '');
}
});
$('form').submit();
});
</script>
Or if you do not want to use jquery at all:
document.getElementById('submit_form').addEventListener('click', function(e){
e.preventDefault();
var children = document.getElementById('form_inputs').childNodes;
for(i = 0; i < children.length; i++) {
if(children[i].type == 'text' && children[i].value == '') {
children[i].disabled = true;
}
}
document.getElementById('form_inputs').submit();
});
The reason all those keys show up in query string is because they exist as inputs in the form. If you don't want them sent, remove them from the form, or at least give them some meaningful defaults.
I guess you are looking a condition
if (!empty($_POST['var'])) {
}
OR
if (!isset($_POST['var']) && !empty($_POST['var'])) {
}
I have a form with the action set to "/resutls". But i have a txt input and i want to check if that is not empty to redirect to another location than "/results". Is this possible?
Code example as below:
<form id="results" action="/results" method="get">
<select id="country" name="country">
....
</select>
<input type="text" name="id">
<input type="submit" class="form-submit" value="Apply Search" name="submit">
</form>
Any ideas? Can this be done with jquery?
Sure you can do that in the submit handler. Warning: I wouldn't give a form control a name of id. It does cause confusion: if this refers to the form, should this.id refer to the id of the form or the text field with name="id"?
if( !!this.somefield.value ) { //did not want to write this.id.value !!!!
this.action = '/other-url';
} else {
this.action = '/results';
}
$(function() {
$('#results').on('submit', function(e) {
e.preventDefault(); // just so we can see that form action changes
if( !!this.somefield.value ) {
this.action = '/other-url';
} else {
this.action = '/results';
}
alert( this.action );
//$(this)[0].submit(); //now submit the form
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="results" action="/results" method="get">
<select id="country" name="country">
</select>
<input type="text" name="somefield">
<input type="submit" class="form-submit" value="Apply Search" name="submit">
</form>
Yes it is possible. Just set the form element's action property using jQuery .prop().
As a simple example:
var valid = false;
// go though validation here
if (false === valid) {
$('#results').prop('action', '/some/url/to/redirect/to');
}
HTML5 provides the "required" attribute wich will prevent the form for being posted, use it like this
<input type="text" name="id" required="required">
or, if you prefer to redirect to other page instead, you can do this
<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
<script>
$("#results").submit(function (e){
e.preventDefault();
if($("#results input[name='id']").length < 1){
window.location.href = "your detiny url";
}
else{
this.submit();
}
});
</script>