jQuery forms submit - javascript

I create this tiny JS so i can control the form submit with jQuery
$('#submit').click(function() {
$('#addForm').submit();
});
Can I use a simple href link for it?
Something like
link
I tried
link
but it didn't work (it by pass the other jQuery in the page)

If you want the JS that you created to control the submit, don't have a href value in your link:
<a id="submit">link</a>

You cannot submit your form that way with a link and some javaScript, even jQuery. You have to use an XHR call to submit your query AND not refresh the page. (you can submit your form with a link as presented by Dan, but I understand that you want to do more than just that from your questions)
The reason being that the "return false" statement will impact the link action, and not the form submission itself.
In any case, I would advise you to not use a link to submit your form at all.
You can easily submit a form with the normal submit button and a bit of jQuery. That way, you provide a nice fallback to your users that have not enabled javaScript.
You can even submit the form with some client side validation, using the following HTML / javaScript:
<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#addForm').submit(function(){
validate();
ajax_submit_function_taking_form_data_as_argument($(this).serialize());
return false;
});
});
function validate(){
//Do some client side validation if required
}
function ajax_submit_function_taking_form_data_as_argument(theData){
$.ajax({
type: 'GET',
url: "http://search.google.com/",
data: theData,
error: function(e){
alert('error...');
},
success: function(data){
alert('success!');
}
});
}
</script>
<style type="text/css"></style>
</head>
<body>
<form id="addForm">
<input type="text" name="field1" value="" />
<input type="submit" value="submit" />
</form>
</body>
</html>
A last solution, albeit maybe too heavy weight for your use, would be to use the excellent jQuery form plugin from http://jquery.malsup.com/form/
I hope that helps!

You can attach to the click event with jquery. It's also cleaner not to put any javascript in your html.
<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#aSubmit').click(function(){
$('#form1').submit();
return false;
});
});
</script>
<style type="text/css"></style>
</head>
<body>
<form id="form1" action="http://www.google.com/search" name=f>
<input name="q" />
</form>
submit
</body>
</html>

Never ever put JavaScript in the href attribute. If you must put in the HTML, use the onclick attribute, and remember to add return false. Also, never ever prefix script with javascript:.
Your first script block should do the job just as fine as well, though.
(And what does "it by pass the other jQuery in the page" mean?)

Related

v-on:submit.prevent not stopping form submission

I'm quite new to Vue and this will be my second dummy project in efforts to learn more about it.
I currently have a form and I am trying to prevent form submission, according to the docs I can do this with v-on:submit.prevent.
I have added this into my form tag, but when submitting the form it is still going through and is not being prevented at all.
I am using Vue version 2.1.3 and below is what I have so far:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Node JS Server</title>
</head>
<body id="chat">
<form v-on:submit.prevent="send">
<input>
<button>Send</button>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.6.0/socket.io.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.min.js"></script>
<script>
var socket = io();
new Vue({
el: '#chat',
methods: {
send: function(e) {
alert('Send method!');
}
}
})
</script>
</body>
</html>
What am I doing wrong? As far as I can see from the docs, the form should not submit.
Edit
Here's a fiddle with the code in it
Here is the working fiddle: https://jsfiddle.net/xje4r1u8/2/
You need to make following changes in HTML:
<div id="chat">
<form v-on:submit.prevent="send">
<input>
<button>Send</button>
</form>
</div>
in your HTML, you had <body id="chat"> which was causing problem, replacing this with div solved the problem.
This is a strange, but standard-compliant behaviour: If a form only contains one input, it will always submit, and preventDefault() will not prevent that.
See here: Why does a FORM with one text INPUT submit on enter while one with two text INPUTs does not?
Solution: add annother input with type="hidden"

How to fill in data in an input field using Javascript directly on page load?

This question has been asked a lot it seems on Stack Overflow but none of the solutions seem to be working. I am developing a web application where I have to fill in data in data fields on page load. Here is my code:
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<input type="text" id="datetime" value="" />
<script type="text/javascript">
$(document).on("pageload",function(){
//for fill field
document.getElementById("datetime").value = "here is value";
});
</script>
</body>
</html>
For some reason, when I load the page, no data gets filled in, does anyone see the reason for it?
You don't need jQuery. Try this:
<!DOCTYPE html>
<html>
<body>
<input type="text" id="datetime" value="" />
<script>
window.onload = function() {
document.getElementById('datetime').value = 'here is value';
};
</script>
</body>
</html>
What version of jquery are you using? Looks like pageload might deprecated and you should use pagecontainerload
Or better yet use the $(document).ready or .load methods?
In Jquery it's called document ready event... So use the below syntax.
$(document).ready(function(){
//for fill field
$("#datetime").val( "here is value");
});
Note the inner line of code has been changed.. This is the Jquery way of doing the same thing...
You can also use this Shorthand to $(document).ready(function(){
That is $(function(){

Trying to understand how forms work and why document.location.href wont function

scripts.js
function homepageInput() {
var x = document.getElementById('homeForm').elements["whatdoyouwant"].value;
if(x.localeCompare("working") == 0){
document.location.href = 'new.html';
}
}
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="scripts.js"></script>
</head>
<body>
<div class= "boxContainer">
<div id = "box">
<form id="homeForm" onsubmit="homepageInput()">
<input type="password" name="whatdoyouwant" id="whatdoyouwant" placeholder="WTF..."/>
<input id="submit" type="submit"/>
</form>
</div>
</div>
</body>
</html>
when i type "working" into my password field it wont load the page new.html which is located in the same directory. Any ideas? When i use an alert in the same if statement it loads fine?
You trigger the function when you submit the form.
You do nothing to prevent the default behaviour of the form.
Consequently, you set location.href and then the form submission runs and you submit the form to the current URL.
The quick hack to solving this is to return false from your onsubmit function.
Modern code would bind the event handler with JavaScript and use preventDefault().

Can't replace submit button with JQuery

I'm trying to do my first tests usign JQuery and it seems to be more difficult than what I expected.
I have a simple form calling some long operations. What I want is to display a progress bar during the loading. What I try to do in the following code is to replace the submit button with a progress bar when the user submits the form. The next page taking time to load, he will see a nice animation making him wait.
<html>
<head>
<title>Test form</title>
</head>
<body>
<form id="myCuteLittleForm"><input type="submit" id="submit"/></form>
<br />
<script src="http://code.jquery.com/jquery-1.9.1.js">
$(document).ready(function() {
$('#myCuteLittleForm').submit(function() {
$("#submit").replaceWith('<progress value="" max="">Import en cours.</progress>');
});
});
</script>
</body>
</html>
However, to my great distress, it doesn't work. Am I just doing bad jquery or is there a fundamental incomprehension ?
Do it in other script tag:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#myCuteLittleForm').submit(function() {
$("#submit").replaceWith('<progress value="" max="">Import en cours.</progress>');
});
};
</script>

submit form on click event using jquery

So can someone please tell why neither of these options will actually submit the form? I am trying to do something more complicated but I have boiled it down to this to try and figure out why I can't seem to get this form to submit using a click event and submit()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#submitButton').click(function(e) {
e.preventDefault();
$("#testForm").submit();
});
$('#submitLink').click(function(e) {
e.preventDefault();
$("#testForm").submit();
});
});
</script>
</head>
<body>
<form action="javascript:alert('submitted');" method="post" id="testForm">
<label>Name</label>
<input type="text" name="name" value="" />
<input type="submit" name="submit" value="Submit" id="submitButton" />
<p>Submit Form</p>
</form>
</body>
</html>
Thank you!
it's because the name of the submit button is named "submit", change it to anything but "submit", try "submitme" and retry it. It should then work.
Why not simply use the submit button to run the code you want. If your function returns false, it will cancel the submission.
$("#testForm").submit(function() {
/* Do Something */
return false;
});
If you have a form action and an input type="submit" inside form tags, it's going to submit the old fashioned way and basically refresh the page. When doing AJAX type transactions this isn't the desired effect you are after.
Remove the action. Or remove the form altogether, though in cases it does come in handy to serialize to cut your workload. If the form tags remain, move the button outside the form tags, or alternatively make it a link with an onclick or click handler as opposed to an input button. Jquery UI Buttons works great in this case because you can mimic an input button with an a tag element.
Using jQuery button click
$('#button_id').on('click',function(){
$('#form_id').submit();
});
Do you need to post the the form to an URL or do you only need to detect the submit-event? Because you can detect the submit-event by adding onsubmit="javascript:alert('I do also submit');"
<form action="javascript:alert('submitted');" method="post" id="testForm" onsubmit="javascript:alert('I do also submit');">...</form>
Not sure that this is what you are looking for though.

Categories

Resources