I am trying to make it so that this comment form on my wordpress website can not be submitted if the user does not enter enough data into the textarea.
I wrote this for the header
<script>
function CheckLength()
{
var msg_area = document.getElementById("Message");
msg_area.innerHTML = "";
if (document.getElementById("commentarea").value.length < 100) {
msg_area.innerHTML = "YOU DID NOT ENTER ENOUGH INFO FOR YOUR REVIEW";
}
else document.getElementById("commentform").submit();
}
</script>
And my form looks like this
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" name="commentform" id="commentform">
<p><input size="36" type="text" name="author" /> Name <span class="required">*</span></p>
<p><input size="36" type="text" name="email" /> Email <span class="required">*</span> (Not Published)</p>
<p><input size="36" type="text" name="url" /> Website</p>
<p><input size="36" type="text" name="server_ip" id="server_ip" /> Server IP/Hostname</p>
<p><?php show_subscription_checkbox(); ?></p>
<p><textarea name="comment" id="commentarea" cols="100%" rows="20"></textarea></p>
<p align="right"><input type="button" name="submit" id="submit" value="Submit Review" tabindex="5" onClick="CheckLength()"></p>
<span id="Message" style="color:#ff0000"></span>
<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
<?php /* do_action('comment_form', $post->ID); */ ?>
</form>
The form spits out the error "YOU DID NOT ENTER ENOUGH INFO FOR YOUR REVIEW" if I type in less then 100 chars, but if I type more then a 100 chars the form does not submit. If I change the input type to submit it does submit, but it doesn't matter if < 100
Change the name of your input button.
The error I get using your markup is that submit is not a function, because it thinks I'm referring to the submit button. The following should work:
<input type="button" name="submitbtn" id="submitbtn" value="Submit Review" tabindex="5" onClick="CheckLength()">
Could you do this?
Put the check in the "onsubmit" event for the form:
<form action="wp-comments-post.php" onsubmit="return CheckLength();" method="post" name="commentform" id="commentform">
You'll have to update you function to return a Boolean:
<script type="text/javascript">
function CheckLength()
{
var msg_area = document.getElementById("Message");
msg_area.innerHTML = "";
if (document.getElementById("commentarea").value.length < 100) {
msg_area.innerHTML = "YOU DID NOT ENTER ENOUGH INFO FOR YOUR REVIEW";
return false;
}
return true;
}
</script>
Then remove the onclick event from your submit button.
Can you try this?
<script>
function CheckLength()
{
var msg_area = document.getElementById("Message");
msg_area.innerHTML = "";
if (document.getElementById("commentarea").value.length < 100)
{
msg_area.innerHTML = "YOU DID NOT ENTER ENOUGH INFO FOR YOUR REVIEW";
return false;
}
else
{
document.getElementById("commentform").submit();
return true;
}
}
</script>
Related
here is my code
this is simple form. I am trying to call on click event on button click
render: function () {
return (
<form className="commentForm">
<input
type="text"
placeholder="Your name"
value={this.state.author}
onChange={this.handleAuthorChange}
/>
<input
type="text"
placeholder="Say something..."
value={this.state.text}
onChange={this.handleTextChange}
/>
<input type="submit" value="Post" />
</form>
);
You forgot to pass the onSubmit event for form
render: function () {
return (
<form className="commentForm" onSubmit={this.submit}>
<input
type="text"
placeholder="Your name"
value={this.state.author}
onChange={this.handleAuthorChange}
/>
<input
type="text"
placeholder="Say something..."
value={this.state.text}
onChange={this.handleTextChange}
/>
<input type="submit" value="Post" />
</form>
);
submit: function() {
// do your stuff
}
try this:
<form className="commentForm" onSubmit={this.handleSubmit}>
<input
type="text"
placeholder="Your name"
value={this.state.author}
onChange={this.handleAuthorChange}
/>
<input
type="text"
placeholder="Say something..."
value={this.state.text}
onChange={this.handleTextChange}
/>
<input type="submit" value="Post" />
</form>
Can you try like this
handleTextChange(e) {
const { name, value } = e.target;
this.setState({
[name]: value
});
}
_handleSubmit(e) {
e.preventDefault();
let { author, text} = this.state;
// dispatch the submit function
}
render: function () {
return (
<form className="commentForm" onSubmit={this._handleSubmit}>
<input
type="text"
placeholder="Your name"
name="author"
value={this.state.author}
onChange={this.handleAuthorChange}
/>
<input
type="text"
placeholder="Say something..."
name="text"
value={this.state.text}
onChange={this.handleTextChange}
/>
<input type="submit" value="Post" />
</form>
);
u want onclick method here it is onsubmit same work of onclick.
handleSubmit(){
console.log(this.state.author);// u can see the value of autor and say somthing input vale in here it is coming right value or not
console.log(this.state.text);
axios.post(route,{
name:this.state.author, //these name and say are the variable whice are use to take the values to back end
Say :this.state.text
}).then({response}); //here u cn give some thing to disply after data add to database.
}
<form className="commentForm" onsubmit={this.handleSubmit.bind(this)}>
<input
type="text"
placeholder="Your name"
value={this.state.author}
onChange={this.handleAuthorChange}
/>
<input
type="text"
placeholder="Say something..."
value={this.state.text}
onChange={this.handleTextChange}
/>
<input type="submit" value="Submit" />
</form>
You need not have separate onChange for two fields unless you do something different in each of them.
Render:
<form className="commentForm" onSubmit={this.handleSubmit}>
<input
type="text"
placeholder="Your name"
name="author"
onChange={this.handleChange}
/>
<input
type="text"
placeholder="Say something..."
name="text"
onChange={this.handleChange}
/>
<button type="submit" >submit</button>
</form>
When submit is clicked :
handleSubmit = (e) => {
e.preventDefault();
console.log(this.state.author) //whatever you want to process the data with...
}
You can have single handleChange to set the state
handleChange = (e) => {
const { value, name } = e.target;
this.setState({ [name]: e.target.value })
}
I want to disable the remember me password prompt of IE/firefox/chrome browser
may developer and blog suggest me to add autocomplete ="off" in <form> tag
but it's not working.
Please give suitable answer thank in advance..
//You can change the type of the password field to text before submitting the form
<script type="text/javascript">
function validate() {
return true;
}
function copyPass() {
document.getElementById("hidPassword").value = document.getElementById("passwordField").value;
if (document.getElementById("passwordField").value != "") {
var passwordLength = document.getElementById("passwordField").value.length;
document.getElementById("passwordField").value = "•".repeat(passwordLength);
}
document.getElementById("passwordField").type = 'text';
}
function changeType() {
document.getElementById("passwordField").type = 'password';
document.getElementById("passwordField").value = document.getElementById("hidPassword").value;
}
</script>
<form method="post" action="yoururl" runat="server">
<input type="text" name="username" />
<input type="password" id="passwordField" name="passwordField" onfocus="javascript:changeType()" onblur="javascript: copyPass()" />
<input type="hidden" name="hidPassword" id="hidPassword" value="" />
<input type="submit" runat="server" name="btnsubmit" value="Submit" onclick="javascript:return validate()" />
</form>
Instead of setting autocomplete="off" on a <form> tag, set it on the individual <input> tags.
For browser support, see caniuse.
Sir
this a part of our mini project and the code use to work well without the option to upload an image.Here we are having a folder "missingCaseImage" inorder to stre the uploaded image. But this code shows that the image already exist while pressing procced button
<!DOCTYPE html PUBLIC >
<?php
include("connection.php");
session_start();
if(isset($_POST['proceed']))
{
$ctype=$_POST['id13'];
$email=$_POST['email'];
if($ctype=='Missing'){
$MCImage=$_FILES['missingImage']["name"];
if (file_exists("../missingCaseImage/" . $MCImage))
{
?>
<script>
alert('Image Name already exists');
window.location.href='dem.php';
</script>
<?php
exit;
}
else
{
move_uploaded_file($_FILES["missingImage"]["tmp_name"],"../missingCaseImage/" .
$_FILES["missingImage"]["name"]);
}
}
$insert="insert into cregister(e_mail,image,cs_type,) values('$email','$MCImage')";
mysql_query($insert);
$lastid = mysql_insert_id();
$_SESSION['cno']=$lastid;
header("location:printform.php");
}
?>
<html >
<?php
if(isset($_GET['error'])){$error=$_GET['error'];} else{$error="";} // if error happaning echo this $error msg
?>
<fieldset>
<form id="form1" name="form1" method="post" action="">
<h3>CASE REGISTRATION FORM</h3>
<P>
<label for="id1">EMAIL ID</label>
<input name="email" type="email" class="validate[required,custom[email]]" id="email" value="<?php echo $_SESSION['email'];?>"
readonly/>
<br />
<P>
<label for="id1">CASE TYPE</label>
<select name="id13" class="validate[required]" id="id13" onChange="missingCase(this.value)">
<option>Murder</option>
<option>Robbery</option>
<option>Vehicle</option>
<option>Missing</option>
<option>Others</option>
</select>
<br />
<P style="display:none;" id="missingImageP" >
<label for="missingImage">UPLOAD IMAGE</label>
<input type="file" name="missingImage" class="uploadMC"/>
<p>
<input name="proceed" type="submit" id="proceed" value="PROCEED"? />
<p>
</form>
</fieldset>
</html>
<script>
function missingCase(mc){
//alert(mc);
if(mc=='Missing'){
$('#missingImageP').show();
}
else{
$('#missingImageP').hide();
}
}
</script>
So now the problem is whenever i try to upload a photo and click on proceed button it always displays Image Name already exists... Why is that so how can i rectify it
NOte: All the required script for validation were been included ..
Thankyou in advance...
input name 'btnSaveScore' is clicked When keypress ENTER in TextBox.
I do not want to call 'btnSaveScore' when keypress ENTER in TextBox.
I guess that 'btnSaveScore' is a default button.
Can I set default button = false ?
//Code
#using (Html.BeginForm("ScoreStudent", "Score", FormMethod.Post))
{
...
...
...
<input name ="btnSaveScore" id="btnSaveScore" value="submit score" type="submit" />
}
//End Code
Help me please, Thank you.
This isn't an MVC problem - this is a HTML issue. If your button isn't supposed to submit the form then don't use type="submit" use type="button" instead.
Alternatively you can solve it using JS
$("#form").keypress(function(e){
return e.which != 13;
}
Add onkeydown attribute in your textbox in following way:
onkeydown="if (event.keyCode == 13) return false;"
Your textbox should be like this:
<input type="text" id="textboxId" onkeydown="if (event.keyCode == 13) return false;" />
Try this
<input name ="btnSaveScore" id="btnSaveScore" value="submit score" type="submit" />
to
<input name ="btnSaveScore" id="btnSaveScore" value="submit score" type="button" />
Thank you everyone.
Code below is work for me
$('#textboxname').live("keypress", function (e)
{
if (e.keyCode == 13)
{
// do something
e.preventDefault();
return false;
}
});
and
#using (Html.BeginForm("ScoreStudent", "Score", FormMethod.Post))
{
...
...
<input name ="btnSaveScore" id="btnSaveScore" value="submit score" type="submit" />
}
Instead of styling the data-valmsg-summary produced by Html.ValidationSummary() in a custom way, I would like to just show the box with the twitter bootstrap style applied to it whenever the field validation fails. How would I go about doing this? Currently my markup looks like this:
..
<script src="#Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<div class="container">
<div class="row-fluid">
<br />
<br />
<br />
<br />
</div>
<div class="row-fluid">
<form class="navbar-form pull-right" action="/Login?ReturnUrl=%2F" method="post">
<h3 class="modal-header">Please sign in</h3>
<input data-val="true" data-val-required="The Username field is required." id="Username" name="Username" type="text" class="input-large" placeholder="Username">
<input data-val="true" data-val-required="The Password field is required." id="Password" name="Password" type="password" class="input-large" placeholder="Password">
<label class="checkbox">
<input type="checkbox" value="remember-me">
Remember me
</label>
<button type="submit" class="btn btn-danger">Sign in</button>
<br />
<br/>
<div data-valmsg-summary="true" class="alert alert-danger alert-block" id="formval" >
<span class="close pull-right" data-dismiss="alert">×</span>
<strong>Ooops!</strong> You seem to be missing something:
<ul>
<li style="display: none"></li>
</ul>
</div>
</form>
</div>
</div>
I've tried adding the style="display: none" to my div, but that does not seem to do the trick either.
I was looking for something else and stumbled on this. Thought I would post the answer for the next person since I am 5 months late. Add to your document ready.
//I dont want to validate my ajax forms take that if statement out if you want 2.
if ($('form:not([data-ajax="true"])').length != 0) {
var settings = $.data($('form:not([data-ajax="true"])')[0], 'validator').settings;
settings.submitHandler = function (form) {
//success
form.submit();
};
}
$("form").bind("invalid-form.validate", function (form, validator) {
var errors = validator.numberOfInvalids();
var message = "<ul>";
//loop thru the errors
for (var x = 0; x < validator.errorList.length; x++) {
var $group = $(validator.errorList[x].element).parent().parent(); //gets bootstrap class of form-group
var $element = $(validator.errorList[x].element); // gets the element to validate
var elementMessage = validator.errorList[x].message; // gets the message
$group.addClass("has-error"); // adds the bootstrap class has-error to the group
$element.popover({ content: elementMessage, placement: "right" }).popover("show"); // adds a popover
message += "<li>" + elementMessage + "</li>"; //appends message to list
}
message += "</ul>";
// Function I have to add alert to the page, but basically you can do whatever you want with the message now.
RegisterError("There was some errors with your submission!", message, false);
});