I'm working on something that involves ensuring the method of form submission is POST not GET when the method might have been omitted somehow and somewhere. A JS/jQuery function checks each form before submission for a particular class. If the class exists, it goes on to check the method. If the method is a GET, it should ignore it and submit the form. But if it is undefined or empty, it should proceed to set the method to POST then submit.
This is the JQuery used. The HTML follows.
$(document).ready(function() {
$('form').submit(function() {
if (this.find(':submit').is('.ckh-method')) {
if ((this.attr('method') !== "GET" && this.attr('method') == "") || this.attr('method') == undefined) {
this.setAttribute('method', 'POST');
return true;
}
}
})
});
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fontawesome-free/web-fonts-with-css/css/fontawesome-all.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<form class="form-horizontal" role="form" action="phpFile.php" method="">
<div class="row">
<div class="col-sm-12">
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-user-alt"></i>
</span>
<input type="text" class="form-control" placeholder="Username" name="username" id="username" required="required" value=''>
</div>
</div>
<div class="col-sm-12">
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-lock"></i>
</span>
<input type="password" class="form-control" placeholder="Password" name="password" id="password" required="required" value=''>
</div>
</div>
<p class="conditions col-sm-12">Forgot Username or Password?
<div class="text-center col-sm-12 error"></div>
</p>
<div class="col-sm-12" id="btn-hold">
<button type="submit" class="btn btn-success btn-block ckh-method">Log In</button>
</div>
<div class="col-sm-12">
<a type="button" class="btn btn-link btn-block" href="proceed.php">Sign Up</a>
</div>
</div>
</form>
</div>
</body>
</html>
Problem: The form method doesn't change on submission because there is a JS error somewhere in my code. I'm suspecting it has to do with the 'this' keyword. Maybe I used it wrongly. I've tried setting breakpoints so I can identify the issue but the form submits before I can step into the function (in my Developer's tool) and discover the problem. Can someone help me out?
var frm = document.getElementById("form1")
frm.addEventListener("submit" ,checkmethod )
function checkmethod(event){
event.preventDefault();
if(frm.method !="GET") frm.method = "POST";
frm.submit();
}
<form id="form1" action="" >
<button type="submit">submit</button>
</form>
Found your console error. bootstrap js requires jquery so i have corrected the sequence as below
first : Jquery JS
second : Bootstrap JS
also use $(this) instead of just this
use attr for setting attributes instead of setAttribute
$('form').submit(function() {
if ($(this).find(':submit').is('.ckh-method'))
{debugger;
if (($(this).attr('method') !== "GET" && $(this).attr('method') == "") || $(this).attr('method') == undefined) {
$(this).attr('method', 'POST');
return true;
}
}
})
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fontawesome-free/web-fonts-with-css/css/fontawesome-all.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form class="form-horizontal" role="form" action="phpFile.php" method="">
<div class="row">
<div class="col-sm-12">
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-user-alt"></i>
</span>
<input type="text" class="form-control" placeholder="Username" name="username" id="username" required="required" value=''>
</div>
</div>
<div class="col-sm-12">
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-lock"></i>
</span>
<input type="password" class="form-control" placeholder="Password" name="password" id="password" required="required" value=''>
</div>
</div>
<p class="conditions col-sm-12">Forgot Username or Password?
<div class="text-center col-sm-12 error"></div>
</p>
<div class="col-sm-12" id="btn-hold">
<button type="submit" class="btn btn-success btn-block ckh-method">Log In</button>
</div>
<div class="col-sm-12">
<a type="button" class="btn btn-link btn-block" href="proceed.php">Sign Up</a>
</div>
</form>
</div>
</body>
</html>
I edited the snippet:
$(document).ready({
$('form').submit(function() {
if ($(this).find(':submit').is('.chk-method')) {
if (($(this).attr('method') !== "GET" && $(this).attr('method') == "") || $(this).attr('method') == undefined) {
$(this).attr('method', 'POST');
return true;
}
}
})
})
Use $(this) instead of 'this' and attr() instead of setAttribute().
Related
I am a beginner on html, CSS & JSS and I am trying to create a simple alert onclick button to test some concepts. I have created simple contact form with bootstrap design and I would just like to create an alert display the message content on click of "send" button. I have written some code down however the alert is not displaying onclick.
Here is my html file code:
<h1 class="animate__animated animate__backInLeft">Contact me</h1>
<div class="barwrapper">
<div class="bar animate__animated animate__backInLeft animate__slow"></div>
</div>
<h2>Email</h2>
<div class="mb-3">
<input type="email" class="form-control" id="email" placeholder="name#example.com">
</div>
<h2>Message</h2>
<div class="mb-3">
<input class="form-control" id="message" rows="3">
</div>
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
<button onclick="getInputValue();" class="btn btn-primary me-md-2" type="button" id="send">Send</button>
</div>
And here is my js file code:
function getInputValue()
{
var inputVal = document.getElementById('#message').Value;
alert(inputVal)
}
My js file seems correctly linked to my html file :
<script src="script.js"></script>
Any idea ?
getElementById requires only the document id string, without the #
function getInputValue()
{
var inputVal = document.getElementById('message').value;
alert(inputVal)
}
You're very close, you need to declare your variable like this:
var inputVal = document.getElementById('message');
See the snippet below:
var inputVal = document.getElementById('message');
function getInputValue() {
alert(inputVal.value)
}
<h1 class="animate__animated animate__backInLeft">Contact me</h1>
<div class="barwrapper">
<div class="bar animate__animated animate__backInLeft animate__slow"></div>
</div>
<h2>Email</h2>
<div class="mb-3">
<input type="email" class="form-control" id="email" placeholder="name#example.com">
</div>
<h2>Message</h2>
<div class="mb-3">
<input class="form-control" id="message" rows="3"></input>
</div>
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
<button onclick="getInputValue();" class="btn btn-primary me-md-2" type="button" id="send">Send</button>
</div>
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 class="animate__animated animate__backInLeft">Contact me</h1>
<div class="barwrapper">
<div class="bar animate__animated animate__backInLeft animate__slow"></div>
</div>
<h2>Email</h2>
<div class="mb-3">
<input type="email" class="form-control" id="email" placeholder="name#example.com">
</div>
<h2>Message</h2>
<div class="mb-3">
<input class="form-control" id="message" rows="3">
</div>
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
<button onclick="getInputValue();" class="btn btn-primary me-md-2" type="button" id="send">Send</button>
</div>
</body>
<script src="index.js"></script>
</html>
Index.js:
function getInputValue()
{
var inputVal = document.getElementById('message').value;
alert(inputVal)
}
Basically, I write a text and send everything correctly. The problem is when I get this email sent, it comes typed type in HTML. For example ... if I write Thanks! ... and send the email ... while reading the email I sent ... it will be tagged ... I always get something like this: <p> Thanks! b> Thanks! </ b>. My objective is to only receive the text ... without the tags.
View
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.css" rel="stylesheet">
#using (Html.BeginForm("Index", "Email", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<div class="box box-info">
<div class="box-body">
<div class="form-group">
<input class="form-control" type="email" name="Destinatário" placeholder="Para:">
</div>
<div class="form-group">
<input class="form-control" name="Assunto" placeholder="Assunto:">
</div>
<div class="form-group">
<textarea id="summernote" name="Mensagem" class="form-control" style="height: 200px" placeholder="Introduza a Mensagem..."></textarea>
</div>
<div class="form-group">
<div class="btn btn-default btn-file">
<i class="fa fa-paperclip"></i> Anexo
<input type="file" name="Attachments" multiple="multiple">
</div>
<p class="help-block">Max. 32MB</p>
</div>
</div>
<div class="box-footer">
<div class="pull-right">
<button type="button" onclick="location.href='#Url.Action("DashboardV1", "Home")'" class="btn btn-default"><i class="fa fa-pencil"></i> Voltar</button>
<button type="submit" class="btn btn-primary"><i class="fa fa-envelope-o" id="sendEmail"></i> Enviar</button>
</div>
<button type="reset" class="btn btn-default"><i class="fa fa-times"></i> Limpar Tudo</button>
</div>
</div>
}
#section Scripts {
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js"></script>
<script type="text/javascript">
var message = "#ViewBag.Message";
$(function () {
if (message != "") {
alert(message);
}
});
</script>
<script>
$(document).ready(function () {
$('#summernote').summernote();
});
</script>
}
I am trying to add form validation using JavaScript. When I add
document.getElementById("one").setAttribute("ng-click", "insertData()");
to validateForm function, it does not work after I press the button.
When I move that line out of validateForm function it works, but does not perform form validation.
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>
<div class="container">
<div ng-app="myapp" ng-controller = "controller">
<div class="row">
<div id="divID"> </div>
<div class="col-sm-12 col-md-10 col-md-offset-1 ">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input class="form-control" id = "k" placeholder="Name" ng-model = "username" name="user_name" type="text" autofocus>
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-user"></i></span>
<input class="form-control" placeholder="NIC" ng-model = "nic" name="NIC" type="text" value="">
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"> #</span>
<input class="form-control" placeholder="Email" ng-model = "Email" name="email" type="email" value="">
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-lock"></i></span>
<input class="form-control" placeholder="Password" ng-model = "password" name="Password" type="password" value="">
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-lock"></i></span>
<input class="form-control" placeholder="Confierm Password" ng-model = "Conf_password" name="Conf_password" type="password" value="">
</div>
</div>
<div class="form-group">
<input type="submit" id = 'one' onclick="validateForm()" class="btn btn-lg btn-primary btn-block" value="Sign Up">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<Script>
function validateForm()
{
var x = document.getElementById("k").value;
if (x == "")
{
document.getElementById("k").setAttribute("placeholder", "Insert Name");
}
else
{
//document.getElementById("one").removeAttribute("onclick");
document.getElementById("one").setAttribute("ng-click", "insertData()");
}
}
// when add this part here code working fine ---- document.getElementById("one").setAttribute("ng-click", "insertData()");
var app = angular.module("myapp", []);
app.controller("controller",function($scope,$http){
$scope.insertData = function()
{
$http.post(
"Signup.php",
{'username':$scope.username,'nic':$scope.nic,'email':$scope.Email,'password':$scope.password,'Conf_password':$scope.Conf_password }
).then(function(data){
var result = angular.toJson(data.data);
var myEl = angular.element( document.querySelector( '#divID' ) );
if(result.replace(/^"|"$/g, '') == 1)
{
myEl.replaceWith("<div class='alert alert-success alert-dismissable fade in'><a href='#' class='close' data-dismiss='alert' aria-label='close'>×</a><strong>Success!</strong>You have sucessfully registerd. Please login</div>");
}
else
{
myEl.replaceWith(result.replace(/^"|"$/g, ''));
}
$scope.username = null;
});
}
});
</script>
Ok, what you are trying to do is not how angularjs works; i suggest you to read angularjs form documentation, especially the Binding to form and control state chapter.
Your code seems a clash between jquery and angularjs, i suggest to you to re read angularjs phonecat tutorial or, even better, to try the new version of angular
You need to tell Angular that you've added an attribute, otherwise it doesn't work. When adding an attribute to your template file, Angular knows, but when adding it by setAttribute(), Angular has no idea.
In your controller, add the following two dependencies:
app.controller("controller", function($compile, $document, $scope, $http) {
//
});
Now, after adding the attribute to the element, you need to re-compile it:
$document.getElementById("one").setAttribute("ng-click", "insertData()");
// Try this:
$compile($document.getElementById("one"));
// If it doesn't work, or gives an error, try this:
$compile($document.getElementById("one"))($scope);
Note: I use $document, not document
Documentation for $compile
Note: I cannot really test if this works for your code, but it should at least point you in the right direction. Your problem is that Angular doesn't know you added the attribute.
I am having a login page where the i have entered script to check the empty username and password, now want to change the class of password input to "has- error" and also do the same for username if the data entered by he user is wrong, ie if the username entered by the user does not exist in my database then the username field must show error and if the password is wrong the password field must show error. I am new to php and bootstrap which i have used for my page
javascript code is
<!-- Bootstrap Core JavaScript -->
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="../bower_components/metisMenu/dist/metisMenu.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="../dist/js/sb-admin-2.js"></script>
<script src="../dist/js/formValidation.min.js"></script>
<script src="../dist/js/formValidation.js"></script>
<script type="text/javascript">
function validateText(id)
{
if($("#"+id).val()==null || $("#"+id).val()=="")
{
var div = $("#"+id).closest("div");
div.addClass("has-error");
return false;
}
else
{
var div = $("#"+id).closest("div");
div.removeClass("has-error");
return true;
}
}
$(document).ready(function()
{
$("#custbtn").click(function()
{
if(!validateText("cusername"))
{
return false;
}
if(!validateText("cpassword"))
{
return false;
}
$("form#loginfom").submit();
});
});
</script>
the page code is:
<div class="row">
<div class=" col-lg-offset-3 col-lg-3">
<div class=" login-panel panel panel-default">
<div class="panel-heading">
<h3 class="panel-title text-center">Customer Login</h3>
</div>
<div class=" panel-body">
<form role="form" id="loginfom" action="../Connections/Logincust.php" method="post">
<fieldset>
<div class="form-group">
<input class="form-control" placeholder="Username" id="cusername" name="cusername" type="username" autofocus>
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" id="cpassword" name="cpassword" type="password" value="" autofocus>
</div>
<div class="checkbox">
<label>
<input name="remember" type="checkbox" value="Remember Me">Remember Me
</label>
</div>
<!-- Change this to a button or input when using this as a form -->
<button type="button" id="custbtn" class="btn btn-primary btn-lg btn-block"> Login </button>
</fieldset>
</form>
</div>
</div>
</div>
</div>
the code for logincust.php
I have a form that submits with empty required fields.
I'm using Twitter BootStrap with it.
I posted this example in jsFiddle.
Maybe is just an tag issue from BootStrap, but i'm really not seeing what is wrong.
3 things:
That is not how you use required.
You need to wrap your jQuery code in .ready().
Move the <button> element inside the <form> and make it type="submit".
Updated Code:
$(document).ready(function(){
$(".action").click(()=>{
$(".ajaxForm").submit();
});
$(".ajaxForm").submit(()=>false);
});
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<form class="ajaxForm">
<div class="container col-sm-6 col-xs-12">
<div class="form-group input-group">
<span class="input-group-addon">
Nome
</span>
<input type="text" class="form-control nome" required />
</div>
</div>
<div class="container col-sm-6 col-xs-12">
<div class="form-group input-group">
<span class="input-group-addon">
CPF
</span>
<input type="text" class="form-control cpf" required />
</div>
</div>
<button type="submit" class="action btn btn-success">Teste</button>
</form>
Updated jsFiddle
Thanks for the answers.
Since I have a button (div, actually) outside the form that will trigger the submit, I found my way by (quick fix) triggering a click on a hidden submit button.
The HTML:
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<form class="ajaxForm">
<div class="container col-sm-6 col-xs-12">
<div class="form-group input-group"> <span class="input-group-addon">
Nome
</span>
<input type="text" class="form-control nome" required />
</div>
</div>
<div class="container col-sm-6 col-xs-12">
<div class="form-group input-group"> <span class="input-group-addon">
CPF
</span>
<input type="text" class="form-control cpf" required />
</div>
</div>
<input type="submit" style="display:none" /> <!-- The hidden button -->
</form>
<button class="action btn btn-success">Teste</button>
The JavaScript:
$(".action").click(() = > {
$(".ajaxForm input[type='submit']").click();
});
$(".ajaxForm").submit(() = > false);
So, this quick fix will work, for now. Here is the jsFiddle updated.