Jquery form is not submitting - javascript

I have page with form on it, I am trying to disable the button on submit with a custom disable message on it, and submit the form after using jquery.
<form>
<input type="text" name="run"/>
<input type="submit" class="send" value="Save" data-attr-message="Sending..."/>
</form>
I have try both form submit or form[0] submit neither submits the form, I try logging the form, the form is logged correctly to console, and there are no errors in console when clicking submit.
$(document).ready(function() {
$('.send').click(function(e) {
e.preventDefault();
e.stopPropagation();
var button = $(this);
var form = button.closest("form");
button.prop('disabled', true);
button.val($(this).attr('data-attr-message'));
console.log(form); //Logs form fine
form[0].submit();
// form.submit();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input type="text" name="run" />
<input type="submit" class="send" value="Save" data-attr-message="Sending..." />
</form>

Your form does not have an "action" and "method".
It should look like:
<form action = "http://example.com/backendScript" method = "POST">

if your goal is to "simulate" the time that it takes to send data, and you want to see the button to be disabled until that time, one way is to use "setTimeout()" method of javascript. you do not need to use "e.preventDefault()" because it prevent the form from submitting. I posted the code below that I think does what you expected:
$(document).ready(function() {
$('.send').click(function(e) {
var button = $(this);
var form = button.closest("form");
button.prop('disabled', true);
button.val($(this).attr('data-attr-message'));
setTimeout(function() {
form.submit();
}, 1000)
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form</title>
</head>
<body>
<form action="submit.html">
<input type="text" name="run"/>
<input type="submit" class="send" value="Save" data-attr-message="Sending..."/>
</form>
<script src="jquery-3.5.1.js"></script>
<script src="script.js"></script>
</body>
</html>
the "submit.html" is simply an html file with a message that you can add to your folder yourself to see that the form is submitting.

Related

fill and submit form using javascript from console

Here is my form:
<form id="myForm">
<input id="htmlString" type="text" name="htmlField" ><br>
<input type="Submit" value="Submit" >
</form>
And need to fill it from console.
just to use it in my app,
Will inject javascript with data to local html file.
I tried to make the form without a submit button like so:
<body>
<form id="myForm">
<input id="htmlString" type="text" name="htmlField" ><br>
</form>
<script>
htmlString.oninput = function(){
///do some stuff
}
</script>
</body>
Expecting that :
document.getElementById('htmlString').value="moo" ;
It automatically submit the form, because here oninput used.
But it just stayed filled with inputs and not proceed further.
Tried with other solution:
form = document.getElementById("myForm")
form.submit()
But it just refreshed the page and not submitted the form.
The need is just one filed without else, and inject my string to it with javascript to run functions embedded in the html.
Try making the input button hidden.
<body>
<form id="myForm">
<input id="htmlString" type="text" name="htmlField" ><br>
<input type="Submit" value="Submit" style="display: none" >
</form>
<button onclick="simulateConsole()">Try it</button>
<script>
htmlString.oninput = function(){
if(this.value === "moo") {
myForm.submit();
}
}
// This event will be triggered even if you use console
htmlString.onsubmit = function(){
if(this.value === "moo") {
// do something onSubmit
}
}
function simulateConsole() {
// you can simulate this in console
htmlString.value = "moo";
myForm.submit();
}
</script>
</body>
I hope it helps.
You need to supply an action to the form, otherwise it will just reload the page.
See more here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form

Replace div after form submit

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#submit").click(function(){
$("#p").replaceWith($("#p1"));
});
});
</script>
</head>
<body>
<div id="p">This is a paragraph.</div>
<div id="p1">Replacement</div>
<form action="" method="get">
<input type="submit" id="submit" name="submit" value="Search"/>
</form>
</body>
</html>
This code works fine until I put form action.. When I keep that submit in a form, this code does not work. How can i replace that div after form submit. Thanks.
You can try this one. Hope it helps!
$(document).ready(function(){
$("#submit").click(function(event){
$("#p").replaceWith($("#p1").text());
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="p">This is a paragraph.</div>
<div id="p1">Replacement</div>
<form action="" method="get">
<input type="submit" id="submit" name="submit" value="Search"/>
</form>
you need text method for that .
you were removing entire element before . you need to remove only text value
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#submit").click(function(){
$("#p").replaceWith($("#p1").text());
});
});
</script>
</head>
<body>
<div id="p">This is a paragraph.</div>
<div id="p1">Replacement</div>
<input type="submit" id="submit" name="submit" value="Search"/>
</body>
</html>
Specify what to replace it with:
$(this).replaceWith("<div><p>Replacement</p></div>");
Form submission needs to be done using AJAX then only you can achieve this which you want to do.
Otherwise the form will submit and page will refresh which will result to re initialization of script.
As Pooojaaqaa and Rayon mention the when the action attribute is set on the form tag, the form is submitted and the page is reloaded (even if action="#"). To catch this action you need to catch the form's submit event, not the button's click event. In the submit event handler you need to call preventDefault() on the event object passed into the handling function like below.
<form id="frmSearch" action="#" method="get">
<input type="submit" id="submit" name="submit" value="Search"/>
</form>
$("#frmSearch").submit(function(ev){
ev.preventDefault();
$("#p").replaceWith($("#p1").text());
});

jquery/javascript: Capture submit event from form in iframe?

Lets say I have a web page with an iframe which contains a form. I want to set a value in a hidden field when the form has been submitted. How can I trigger an event in the main page when the form is submitted?
This is a simplified version of what I'm trying to do:
<!DOCTYPE html>
<html>
<head>
<title>TEST IFRAME UPLOAD</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
// Pseudo code for what I want to do
// (this of course doesn't work because target is inside iframe:
jQuery(document).ready(function() {
$("#file_upload_form").submit(function() {
$("input[name='fileuploaded']").val(1);
return true;
});
});
</script>
</head>
<body>
<form id="mainform" action="processform" method="post">
<input type="hidden" name="fileuploaded" value="">
<!-- more form fields here -->
</form>
<iframe id="upload-iframe">
<form enctype="multipart/form-data" id="file_upload_form" action="processfileupload" method="post">
Select an image to upload:<br/>
<input type="file" name="file">
<input type="submit" name="submit" class="submit" value="Upload">
</form>
</iframe>
</body>
</html>
Try this,
$('#upload-iframe').load(function() {
$(this).contents().find('#file_upload_form').submit(function() {
$("input[name='fileuploaded']").val("some value"); // updated
return true; //return false prevents submit
});
});
Refered from How can i bind an event to an element inside a local iframe?
Can be possible duplicate of Selecting a form which is in an iframe using jQuery

how to detect form submit when it is done via a javascript

<html>
<head>
<title>Untitled</title>
</head>
<script>
document.onsubmit = formSubmitted;
function formSubmitted() {
alert("formSubmitted");
}
function clickAction() {
alert("clickAction");
var aForm = document.forms['form2'];
aForm.action = "#";
aForm.submit();
}
</script>
<body>
<form name="form1">
<input type="submit" value="Direct Submit">
</form>
<br>
<form name="form2" action="#$">
<input type="button" value="Onclick Submit" Onclick="clickAction();">
</form>
</body>
</html>
This is my code, I'm detecting form submit using document.onsubmit = formSubmitted;
alert is working.
but its not work when I tried to submit the form via javascript(click "Onclick Submit" button)
You need to attach that to a particular form.
document.form1.onsubmit = formSubmitted;
document.form2.onsubmit = formSubmitted;
That isn't possible. You'll need to extend your function clickAction to notify you when it has submitted the form.

Simple Form Submit Code

I want to create a simple form with only an input textbox and search button.
A person would type in the search term in the box and press search.
All that will do is take their search term and add it to the end of the url.
So if search term is "good italian food" the submit button would send the user to http://domain/find/good italian food
Whats the simplest way to do this?
Thank you!
<html>
<head>
<script type='text/javascript'>
function Search() {
var keyword = document.getElementById("keyword").value;
var url = "http://yourwebsite.com/find/"+keyword;
window.location = url;
return false;
}
</script>
</head>
<body>
<form name="search">
<input type="text" name="keyword" id="keyword" />
<input type="button" name="btnser" onclick="Search()" value="Search" />
</form>
</body>
</html>
I'd also suggest using encodeURI() to make it 'safe'.
http://www.w3schools.com/jsref/jsref_encodeuri.asp
use javascript and html form
create a form with a button and text box
in the post of the form call the javascript function to create the url with the user input text
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>
function redirect(){
var s = document.getElementbyID("txt").value;
var url="http://url.com/" + s;
window.location = url;
}
</script>
</head>
<body>
<form>
<input type=''></input>
</form>
</body>
</html>
you could override the action attribute within the onsubmit event: Example
HTML
<form action="#" onsubmit="send(this)" method="post" target="_blank" >
<input id="text"/>
<input type="submit" value="submit"/>
</form>
JavaScript
function send( form){
form.action = location.href + '/'+encodeURI(document.getElementById('text').value);
}
Also, overriding the form action, or redirecting the user, within the onsubmit event will allow you to use a true submit button.
This gives the user the ability to just hit the enter key once they finish typing to submit the search without you having to write extra logic listening for the the enter key within the textbox to submit the search.

Categories