call a function when submit form [closed] - javascript

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I'm trying to call a function when submit form , this function showld work for all forms with div "#js_ajax_form".
( the javascript code works in chrome console
// html code
<form method="post" id="js_ajax_form" data-type="user.registration" action="signup">
<input type="text" name="val[first_name]" id="first_name" placeholder="First Name" value="" size="30">
<input type="text" name="val[last_name]" id="last_name" placeholder="Last Name" value="" size="30">
<input type="submit" value="Sign Up" class="button_register" id="js_registration_submit">
</form>
// javascript
var $Core = {};
function getParam(sParam)
{
return oParams[sParam];
}
$Core.form = function()
{
$("#js_ajax_form").submit(function(e)
{
var postData = $(this).serializeArray();
alert(postData);
e.preventDefault(); //STOP default action
e.unbind(); //unbind. to stop multiple form submit.
});
}

as long as you are using jQuery, the following code should work:
$("#myform").submit(function() {
myFunction();
// the form will continue on submission
});

Related

On form submission I get an error 'Method not allowed' - Javascript [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
The community reviewed whether to reopen this question 1 year ago and left it closed:
Original close reason(s) were not resolved
Improve this question
I have below html and javascript but on form submission I get an error Method not allowed though I would like to stay on the same index.html and show the success message.
I have debugged the javascript and it bypasses the if condition even I put valid info.
index.html
<form method="post" name="FrmEnquiry" id="FrmEnquiry" onsubmit=" return sendEnquiryform();">
<input name="name" id="name" required="required" placeholder="Your Name">
<input name="email" id="email" type="email" required="required" placeholder="Your Email">
<div class="clearfix"> </div>
<textarea name="message" id="message" cols="20" rows="5" required="required" placeholder="Message"></textarea>
<div class="submit">
<input id="submit" name="submit" type="submit" value="Submit">
</div>
</form>
<span id="sucessMessage"> </span>
javascript.js
var name = $('#name').val();
var email = $('#email').val();
var message = $('#message').val();
$.post('mail.php', '&name=' + name + '&email=' + email + message, function(
result,
status,
xhr
) {
if (status.toLowerCase() == 'error'.toLowerCase()) {
alert('An Error Occurred..');
} else {
alert(result);
$('#sucessMessage').html(result);
}
}).fail(function(xhr, status, error) {
console.log(error); // this shows 'method not allowed' and then i get below alert
alert('something went wrong. Please try again');
});
return false;
}
You need to add action tag to your form.
Like this:
<form method="post" name="FrmEnquiry" id="FrmEnquiry" onsubmit=" return sendEnquiryform();" action="">
You can add the value where you want to send the post to.
Also refer to: https://www.w3schools.com/tags/att_form_action.asp

TEXTBOX REQUIRED POPUP [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
How to I make a sweet alert error popup when form required textbox is empty and user clicked submit button. I want show instant popup danger alert that %This TextBox Is Required% in sweet alert. Such like JavaScript alert when textbox empty different is , that is js alert and I am talking about sweet alert instead of simple js alert. Please please help...
here is sweet alert if input text is empty
$('input[name="submit"]').on('click', function() {
if ($('input[name="fullname"]').val() == "") {
swal("fullname is required", '', 'error');
return false;
}
return true;
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<form action="#" method="POST">
<input type="text" name="fullname">
<input type="submit" value="submit" name="submit">
</form>
you need to check here you use jquery trim and val function.
val: Get the current value of input
trim: Remove the whitespace from the beginning and end of a string.
$('#button').on('click', function(){
if($.trim($('input[type="text"]').val()) == ''){
swal("Input can not be left blank")
return false;
}
return true;
})
.swal-footer {
text-align:center !important;
}
.swal-button {
background-color: red;
}
.swal-button:focus {
outline: none;
box-shadow: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<form action="#" method="POST">
<input type="text" name="fullname">
<input type="text" name="lastname">
<input type="submit" value="submit" id="button" name="submit"> </form>

how work activate function event onclick(or other function) when it is activated from browser? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 4 years ago.
Improve this question
Some day ago i'd write for asking what was the problem about onclick event doesn't activate when i clicked in a specific area of the browser. After check a guide i find it the problem end also the rappresentation of my simply test is trivial, i've known the mechanism for activating a particular function in browser text area.
Now that work it... i'd want add more detail of my question...what is the mechanism that activate my function from template html to tag <script></script> ?
<h3> Check is palindrome</h3>
<input type="text" id="input1" >
<input type="text" id="input2">
<br><br>
<input type="button" id="reload" onclick="myFunction()" value="ricarica">
<body >
<p onclick="check()" id="output" style="line-height: 1000px"> TEST</p>
</body>
//WHAT IS THE MECHANISM IN THIS POINT FOR ACTIVATE check()?
<script>
function check() {
var x = document.getElementById("input1").value;
var y = document.getElementById("input2").value;
if(x===y){
document.getElementById("output").innerHTML=" E' PALINDROMA "
}else document.getElementById("output").innerHTML=" NON E' PALINDROMA "";
}
function myFunction() {
location.reload(true);
}
</script>
</html>
Everything about your code is wrong. Like... literally everything. Here's a suggested alternative:
var out = document.getElementById('output');
document.getElementById('input').oninput = function() {
if( this.value.split('').reverse().join('') === this.value) {
out.innerHTML = "The input is a palindrome!";
}
else {
out.innerHTML = "The input is not a palindrome...";
}
};
<input type="text" id="input" />
<p id="output">Type something...</p>
From what I understand, move your check() function to the input field
<input type="text" id="text1" onclick="check()">
and remove from body
<body>

whats wrong with getElementById [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I want that on pressing submit button, if the input was not correct(i.e. only letters) than warning(id="fn_warn") becomes vissible, but the code is not working. I think their is problem with getElementById.
Function isAlpha checks whether the value is letters only or not.
<!DOCTYPE HTML>
<head>
</head>
<body>
<form>
First name
<input id="first_name" type="text"/>
<p id="fn_warn" style=" visibility: hidden; color: red;">#Please enter a valid name...</p>
<input class="button" onclick="validate();" type="submit" value="Submit" />
<input class="button" type="reset" />
</form>
</body>
</html>
<script>
function validate(){
var submit=false;
var x = document.getElementById("first_name");
if (isAplha(x.value)){
submit=true;
} else {
var y = document.getElementById("fn_warn");
y.style.visibility = "visible";
}
}
function isAlpha(value){
if (value.match(/^[A-Za-z]+$/)){
return true;
} else {
return false;
}
}
</script>
I would recommend two things: fixing your typo for your first if statement that says isAplha instead of isAlpha and, if that doesn't fix it, checking your browser's console for errors, which is always a good idea when you're working with JS.
You have "isAphla(x.value)" instead of isAlpha

Javascript isn't working with Jquery and ajax [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
<div class="RegisterFrame">
<form method="post" id="form" action="registeration.php" class="reg" enctype="multipart/form-data">
<input type="file" class="fileChooser" name="img">
<div class="uploadimg" name="imgUploader"><img src="" name='IDpic' class="IDpic"></div><br>
<text>Username</text><input type="text" class="textBox" name="user"><br>
<text>Password</text><input type="password" class="textBox" name="pass"><br>
<text>re-enter your password</text><input type="password" class="textBox" name="repass"><br>
<text>e-mail</text><input type="text" class="textBox" name="email"><br>
<text>re-enter your e-mail</text><input type="text" class="textBox" name="reemail"><br>
<button class="Con" type="submit">Done O.o</button><button class="Res" type="button">reset</button>
</form>
</div>
==========================================
Script code :
$("#form").submit(function(e) {
e.preventDefault();
// alert('test');
data = new FormData($('#form')[0]);
// console.log('Submitting');
$.ajax({
type: 'POST',
url: 'registeration.php',
data: data,
cache: false,
contentType: false,
processData: false,
success: function(result) {
alert(result);
//PS: the result gives the correct full path yet the image doesn't change
document.getElementsByClassName('.IDpic').src=result;
}
});
});
.getElementsByClassName('.IDpic').
I'm guessing the classname does not include a dot - this should be .getElementsByClassName('IDpic').
Also, since you are using jQuery, might as well do
$('.IDpic').attr('src', result);

Categories

Resources