I'm working on a basic form that has one textarea and one submit button:
<form action="admin-post.php" method="post">
<textarea style="width:630px;" aria-hidden="true" class="wp-editor-area" rows="6" autocomplete="off" cols="71" name="author_message" id="author_message"></textarea>
<p class="submit">
<input type="submit" value="Post Message" class="button button-primary" id="submit" name="submit">
</p>
</form>
I want the submit button to be enabled only if there is some text entered within the textarea. How can I do this using Javascript?
Note that I cannot change the the value or HTML code of the submit button.
If you need continuous verification solve it like this (without changing the button attributes):
<textarea style="width:630px;" aria-hidden="true" class="wp-editor-area" rows="6" autocomplete="off" cols="71" name="author_message" id="author_message" onkeyup="if(this.textLength != 0) {submit.disabled = false} else {submit.disabled = true}"></textarea>
and modify the body tag:
<body onload="submit.disabled = true">
Cheers
JSFiddle
edit:
If you cannot modify the body tag, just add the disabled attribute to the button.
Working code here JSBIN :) i used HTML Disable attribute
You need to find the submit button in the DOM first and disable it and then attach an event listener to the textarea, wherein you disable/enable the submit button based on whether the textarea is empty or not:
document.getElementById("submit").disabled = true;
document.getElementById("author_message").addEventListener('change', func, false);
function func(){
document.getElementById("submit").disabled = (document.getElementById("author_message").value==='') ;
}
Here is the JsFiddle.
Related
I created a form where users can input words in a textarea as tags and submit them as a string using JavaScript. The feature I want to add is to disable the submit button whenever the textarea is empty (does not contain any tags).
Here is what I have tried so far:
HTML
<form>
<textarea onkeyup="success()" name="tags" id="tag-input1" required>
</textarea>
<p class="instruction">Press enter to add a new word</p>
<!-- Disable Submit Button -->
<input type="submit" id="submit" class="save" value="Submit">
</form>
JavaScript
function success() {
if (document.getElementById("tag-input1").value === "") {
document.getElementById('submit').disabled = true;
} else {
document.getElementById('submit').disabled = false;
}
}
DEMO
I think you could check value length.
At first, try to add disabled attribute to your submit button in html.
<input type="submit" id="submit" class="save" value="Submit" disabled="true">
Then in here is your success function code;
function success() {
document.getElementById('submit').disabled = !document.getElementById("tag-input1").value.length;
}
As per my knowledge, that is not how disable works. Disable is a html attribute that stops user from writing data in the perticular text.
Try providing error message when value of perticular message is empty
You can use conditional statements for that
I have a form with id theForm which has the following div with a submit button inside:
<div id="placeOrder"
style="text-align: right; width: 100%; background-color: white;">
<button type="submit"
class='input_submit'
style="margin-right: 15px;"
onClick="placeOrder()">Place Order
</button>
</div>
When clicked, the function placeOrder() is called. The function changes the innerHTML of the above div to be "processing ..." (so the submit button is now gone).
The above code works, but now the problem is that I can't get the form to submit! I've tried putting this in the placeOrder() function:
document.theForm.submit();
But that doesn't work.
How can I get the form to submit?
Set the name attribute of your form to "theForm" and your code will work.
You can use...
document.getElementById('theForm').submit();
...but don't replace the innerHTML. You could hide the form and then insert a processing... span which will appear in its place.
var form = document.getElementById('theForm');
form.style.display = 'none';
var processing = document.createElement('span');
processing.appendChild(document.createTextNode('processing ...'));
form.parentNode.insertBefore(processing, form);
It works perfectly in my case.
document.getElementById("form1").submit();
Also, you can use it in a function as below:
function formSubmit()
{
document.getElementById("form1").submit();
}
document.forms["name of your form"].submit();
or
document.getElementById("form id").submit();
You can try any of this...this will definitely work...
I will leave the way I do to submit the form without using the name tag inside the form:
HTML
<button type="submit" onClick="placeOrder(this.form)">Place Order</button>
JavaScript
function placeOrder(form){
form.submit();
}
You can use the below code to submit the form using JavaScript:
document.getElementById('FormID').submit();
<html>
<body>
<p>Enter some text in the fields below, and then press the "Submit form" button to submit the form.</p>
<form id="myForm" action="/action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br><br>
<input type="button" onclick="myFunction()" value="Submit form">
</form>
<script>
function myFunction() {
document.getElementById("myForm").submit();
}
</script>
</body>
</html>
HTML
<!-- change id attribute to name -->
<form method="post" action="yourUrl" name="theForm">
<button onclick="placeOrder()">Place Order</button>
</form>
JavaScript
function placeOrder () {
document.theForm.submit()
}
If your form does not have any id, but it has a class name like theForm, you can use the below statement to submit it:
document.getElementsByClassName("theForm")[0].submit();
I have came up with an easy resolve using a simple form hidden on my website with the same information the users logged in with. Example: If you want a user to be logged in on this form, you can add something like this to the follow form below.
<input type="checkbox" name="autologin" id="autologin" />
As far I know I am the first to hide a form and submit it via clicking a link. There is the link submitting a hidden form with the information. It is not 100% safe if you don't like auto login methods on your website with passwords sitting on a hidden form password text area...
Okay, so here is the work. Let’s say $siteid is the account and $sitepw is password.
First make the form in your PHP script. If you don’t like HTML in it, use minimal data and then echo in the value in a hidden form. I just use a PHP value and echo in anywhere I want pref next to the form button as you can't see it.
PHP form to print
$hidden_forum = '
<form id="alt_forum_login" action="./forum/ucp.php?mode=login" method="post" style="display:none;">
<input type="text" name="username" id="username" value="'.strtolower($siteid).'" title="Username" />
<input type="password" name="password" id="password" value="'.$sitepw.'" title="Password" />
</form>';
PHP and link to submit form
<?php print $hidden_forum; ?>
<pre>Forum</pre>
I have a form which has 2 inputs, really simple.
<form class="cform">
<input type="text" name="cname" class="cname" id="cname" autofocus placeholder="Firstname Lastname">
<div class="floatl regards"><input type="submit" value="Submit" class="submit" id="submit"></div>
</form>
My JQuery is:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$("#submit").click(function()
{
var CName = $("#cname").val();
console.log(CName);
});
</script>
My problem is when I add a word in textbox and click on submit button it doesn't show anything in console unless I type the same word again and submit it! And it works on second click.
I notice that it doesn't work untile it add that words in the URL and I should write exactly the same word for the second time and click on submit if I want it to work!
How can I fix this error? which part of my code is wrong!?
The click on your button will submit the form using GET method to the current page that why you saw the word on the link after the click, all you need to prevent that is to change the type of button to button instead of submit, that will prevent the page from refresh :
<input type="text" name="cname" class="cname" id="cname" autofocus placeholder="Firstname Lastname">
Or you could add e.preventDefault() or return false; instead in your js code :
$("#submit").click(function(e){
e.preventDefault(); //That will prevent the click from submitting the form
var CName = $("#cname").val();
console.log(CName);
return false; //Also prevent the click from submitting the form
});
Hope this helps.
$("#submit").click(function(){
var CName = $("#cname").val();
console.log(CName);
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="cform">
<input type="text" name="cname" class="cname" id="cname" autofocus placeholder="Firstname Lastname">
<div class="floatl regards"><input type="button" value="Submit" class="submit" id="submit">
</div>
</form>
When you click the submit button the page will reload and your jQuery definition won't be recognized. In order to prevent that use a html button instead of a input submit button.
Or you can use e.preventDefault(); inside your function call that will prevent to submit the form. In order to use that you have to pass the event as parameter using function(e) {}
This is my code.
HTML
<form id="add_new_video" method="post" class="appnitro" style="margin-left:70px;" action="<?php echo base_url()?>videos/save">
<input type="text" name="name">
<button type="submit" class="dark_text_link" disabled id="submit" href="javascript:void(0);" onclick="return addVideo();">Add New Video</button>
</form>
And the JS is
function addVideo() {
//disables the onclick event of the element for 1 seconds
document.getElementById('submit').disabled = true;
setTimeout(function(){document.getElementById('submit').disabled = false;},1000);
document.getElementById('add_new_video').submit();
}
When I click the submit button, the button gets disabled for a second and re appears but the form does not submit. I'm still a newbie in javascript so there might be things I overlooked. Any idea ?
Several things
Never use the reserved word "submit" in a form element's name or ID - it will hide the submit event handler from the JavaScript
use the onsubmit to disable the button instead of using weird inline handlers. There is no href on a button for example
You should not disable a button you need to click before clicking it
Like this:
<form id="add_new_video" method="post" class="appnitro" style="margin-left:70px;" action="<?php echo base_url()?>videos/save">
<input type="text" name="name">
<button type="submit" id="buttonSub" class="dark_text_link">Add New Video</button>
</form>
using
window.onload=function() {
document.getElementById("add_new_video").onsubmit=function() {
document.getElementById('buttonSub').disabled = true;
setTimeout(function(){document.getElementById('buttonSub').disabled = false;},1000);
}
}
You do not actually need to ENABLE the form button again since you submit to the same page. The button will be enabled when the page reloads - this is of course not true if you target the form elsewhere
Replace button with this tag element.
<input type="submit" class="dark_text_link" disabled id="btnsubmit" href="javascript:void(0);" onclick="return addVideo();"/>
I have a website that is set up to be used on mobile devices. The user can draw on a canvas element and then click the "submitButton" button to save the canvas to a server. When the user clicks the button, the "submitButton" button disappears and a "submittingButton" button appears in it's place. All this is working correctly. In fact, the entire project is working correctly after I changed the "submittingButton" button to a type=button instead of type=submit.
My question is, however, when I change the style.display of the "submittingButton" button, if I set the style.display to block, the form is not submitted (which is what I want) but the button is displayed on a new line. However, if I set the style.display to inline or inline-block, the form is submitted, the page refreshed, and the drawing is cleared. Why does the form submit when the style.display is set to inline or inline-block but not submit when the style.display is set to block?
Here are the relevant parts of my code:
function sendImage(){
if(window.hasBeenDrawn){
document.getElementById("signError").style.display="none";
document.getElementById("submitButton").disabled=true;
document.getElementById("clearButton").disabled=true;
window.wasSent=true;
document.getElementById("submitButton").style.display="none";
document.getElementById("submittingButton").style.display="";
//document.getElementById("submittingButton").style.display="block";
saveImage();
}
And the HTML:
<form method="post" action="" class="sigPad">
<div id="receipt" style="text-align:center">
<div class="sig sigWrapper">
<canvas style="width:85%; height:95%; margin-top:25px" height="300" class="pad" id="myCanvas" />
<input type="hidden" name="output" class="output" />
</div>
<br />
</div>
<div id="clearSubButtons">
<button id="clearButton" onclick="redoSig(); return false;" > </button>
<button id="submitButton" type="submit" onclick="sendImage()"> </button>
<button id="submittingButton" style="display:none;"> </button>
</div>
</form>
PS. I have the code working as expected, by changing the "submittingButton" to type=button. I don't want the form to submit, the saveImage() function uses an ajax post to submit the image to the server.
I have no idea why changing the display value of the button causes it to submit the form, however I can offer the following.
By default, a button element in a form is a submit button, so if you have a button that you don't what to act as a submit button, give it a type of button (or use an input element with a type of button), so:
<button id="clearButton" onclick="redoSig(); return false;" > </button>
would be better as:
<button id="clearButton" type="button" onclick="redoSig();">Clear</button>
or
<input id="clearButton" type="button" onclick="redoSig();" value="Clear">
so there is no chance of the form submitting when it's clicked. Similarly for the submittingButton button, change it to a button then it can't submit the form.
Finally, all you seem to be doing is changing the label of the button. You can probably do that using something like:
<form onsubmit="return modifiedSubmit(this);" ...>
...
<input name="submitButton" type="submit" value="Submit signature">
</form>
and the function:
function modifiedSubmit(form) {
if (form.submitButton) {
form.submitButton.value = "Submitting...";
form.submitButton.disabled = true;
window.setTimeout(function(){form.submit();}, 10);
return false;
}
}
Untested of course, but hopefully you get the idea. The timeout is to ensure the button label changes before the form submits, otherwise browsers may decide that since they are in the process of navigating to another page, they won't do any DOM updates and so won't change the label.