Hi i have have this form that i do no want to perform an action when the submit button is clicked. All i want to do is perform the a function that loads data into a div. Any Ideas??
<form method="POST" action="" id="search-form">
<input type="text" name="keywords" />
<input type="submit" value="Search" id="sButton" onclick="loadXMLDoc('file.xml')" />
</form>
onclick="loadXMLDoc('file.xml'); return false;"
or even better:
<script>
window.onload = function() {
document.getElementById("search-form").onsubmit = function() {
loadXMLDoc('file.xml');
return false;
};
};
</script>
To implement loadXMLDoc, you can use the ajax module in jQuery. for example:
function loadXMLDoc() {
$("div").load("file.xml");
}
Final code using jQuery:
<script>
$(function() {
$("#search-form").submit(function() {
$("div").load("file.xml");
return false;
});
});
</script>
I think you need ajax function to load data with in div without page reload
Change input type submit to button
<input type="button" value="Search" id="sButton" onclick="AjaxSend()" />
Ajax CAll:
<script type="text/javascript">
function AjaxSend(){
$.get('file.xml', function(data) {
$('div').html(data);
});
}
</script>
use prevent defaults to avoid form action.please refer the code below it might help you
function createRecord(){
event.preventDefault();
}
<form>
<input type="text"/>
<input type="submit" onclick="createRecord()"/>
</form>
just remove action param from form and add onsubmit="return false". It will return false everytime you click on any button in your form.
Try like this:
<form method="POST" onsubmit="return false" id="search-form">
<input type="text" name="keywords" />
<input type="submit" value="Search" id="sButton" onclick="loadXMLDoc('file.xml')" />
</form>
Related
I have a problem. I want when I click an h1 tag, then h1 tag id add in input value and Submitted automatically. But auto submits is not working.
If I click submit button then its submitted data.
<h1 id="my-id">sadasdsa</h1>
<form action="" method="POST" id="aweberform">
<p><input type="text" name="countrycode" value="" id="country"></p>
<button type="submit" name="submit" class="btn">Submit</button>
</form>
Jquery:
$(document).on('click', 'h1', function () {
//alert(this.id);
$("h1").text(this.id);
$("input").val(this.id);
$("#aweberform").submit();
});
$(document).click(function(){
$("#aweberform").submit();
});
The problem is here:
$(document).on('click', 'path', function () {
what is path here?
you have to use either id, class, name of the attribute as a selector, but in your case there is nothing with path in html. So change path to:
$(document).on('click', '#my-id', function () {
and try again.
You can use a simpler approach as your button type is submit. Allot an id to it and on document click programmatically click on it.
<button type="submit" name="submit" class="btn" id="submitBTN">Submit</button>
THE JS:
$(document).click(function(){
$("#submitBTN").click();
});
Whatever be the event if you want to submit the form, you can always follow the above mentioned approach.
Just update #my-id instead of path:
$(document).on('click', '#my-id', function () {
//alert(this.id);
$("h1").text(this.id);
$("input").val(this.id);
$("#aweberform").submit();
});
$(document).click(function(){
$("#aweberform").submit();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="my-id">sadasdsa</h1>
<form action="" method="POST" id="aweberform">
<p><input type="text" name="countrycode" value="" id="country"></p>
<button type="submit" name="submit" class="btn">Submit</button>
</form>
In Your JQuery You mention You mention path but what is that
just simply change that into id of h1 tag So changes are as follows
$(document).on('click', '#my-id', function () {
Running Example
$(document).on('click', '#my-id', function () {
//alert(this.id);
$("h1").text(this.id);
$("input").val(this.id);
$("#aweberform").submit();
});
$(document).click(function(){
$("#aweberform").submit();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="my-id">sadasdsa</h1>
<form action="" method="POST" id="aweberform">
<p><input type="text" name="countrycode" value="" id="country"></p>
<button type="submit" name="submit" class="btn">Submit</button>
</form>
In the example below I've attached a function main to an input field. the function contains instructions to send an alert with a variable message (whatever the user enters into the field).
<form>
<input type="text" onsubmit="main()" />
<input type="submit" />
</form>
<script>
function main (param) {
alert(param)
}
//main();
</script>
It doesn't work, but I believe that's because I've made some noob error that I'm failing to recognize. The result of a functioning version of this code would be the ability to submit "hello world" and produce an alert box stating 'hello world' (without quotes).
But, further than this, I'd like to be able to pass the likes of main("hello world"); or just alert('hello world'); to the input field to produce the same result.
The problem I think I'm running into is that the page is refreshed every time I submit. There are a few questions on here with similar problems where people have suggested the use of onsubmit="main(); return false;", but in fact this does not seem to work.
Looks like you want to eval() the value of the input.
Use with caution, has security impact...
Returning false from a handler stops the regular action so you have no redirect after submitting:
<form onsubmit="main(); return false;">
<input id="eval-input" type="text" />
<input type="submit" />
</form>
<script>
function main () {
eval(document.getElementById('eval-input').value);
}
</script>
Here's how you can detect a form submission:
<form onsubmit="foo()">
<input type="text">
<input type="submit">
</form>
<script>
function foo(){
alert("function called");
}
</script>
I however advise you do this (preference), if you desire to manage the form data through a function:
<form id="myform">
<input type="text">
<input type="submit">
</form>
<script>
document.getElementById("myform").onsubmit=function(event){
alert("function called");
//manage form submission here, such as AJAX and validation
event.preventDefault(); //prevents a normal/double submission
return false; //also prevents normal/double a double submission
};
</script>
EDIT:
use eval() to execute a string as JavaScript.
jQuery way:
You create event listener which will be triggered when user click 'submit'.
<form>
<input type="text" id="text"/>
<input type="submit" />
</form>
<script>
$( "form" ).submit(function( event ) {
event.preventDefault();
alert( $('#text').val() );
});
</script>
To prevent page reloading - you should use event.preventDefault();
Pure JavaScript:
<form>
<input type="text" id="text"/>
<input type="submit" id="submit" />
</form>
<script>
var button = document.getElementById("submit");
var text = document.getElementById("text");
button.addEventListener("click",function(e){
alert(text.value);
},false);
</script>
If I understand what you want to do, you can call the function like this, and writing params[0].value you can access the input value:
function main(params) {
//dosomething;
document.write(params[0].value);
}
<form onsubmit="main(this)">
<input type="text">
<input type="submit">
</form>
Try something like this
onchange="main()"
onmouseenter, onMouseOver, onmouseleave ...
<input type="text" onmouseenter="main()" />
I have a submit button in my form, I'm not using onsubmit event because i'm gonna add more submits button to this same form. So i'm doing like this:
<script type="text/javascript" src="../script/script.js"></script>
<form id="form_cad" action="my_php.php" method="post" enctype="multipart/form-data">
<input type="submit" id="submit1" value="Add" onclick="return confirmMessage();"/>
</form>
function confirmMessage()
{
var x = confirm("...");
if(x)
{
document.getElementById("my_post_value").value = "val1";
return true;
}
return false;
}
I'm using the latest version of Firefox, IE and Google Chrome, but in Chrome the onclick event is not working.
Instead of using onclick attribute for your submit button, onsubmit for your <form>
Try replacing your code as follows
<form id="form_cad" action="my_php.php" method="post" enctype="multipart/form-data" onsubmit="return confirmMessage();">
<input type="text" name="email" id="email">
<input type="submit" id="submit1" value="Add"/>
</form>
Because you are in into a form, the onsubmit event is triggered automatically, one way of stop it is after call confirmMessage(), return false. That stop the propagation of events:
<form id="form_cad" action="my_php.php" method="post"
enctype="multipart/form-data" onclick="confirmMessage(); return
false;">
<input type="text" name="email" id="email">
<input type="submit" id="submit1" value="Add"/>
</form>
It's working fine in my Chrome, and I've never had problems using events on submit buttons, but since you're using an external js file you might want to try it with a pure js solution, instead of inline:
See example below:
function confirmMessage() {
var x = confirm("Click OK to submit form");
if (x) {
return true;
}
return false;
}
document.getElementById('submit1').onclick = function() {
return confirmMessage();
};
<form id="form_cad" action="my_php.php" method="post" enctype="multipart/form-data" onsubmit="alert('submitting')">
<input type="submit" id="submit1" value="Add" />
</form>
The alert in the form's onsubmit is just to illustrate that the event is actually only called when confirm() returns true.
I had a similar problem but I fixed it launching the submit event inside the 'onclick' function. I also prevented the event to prevent launching it twice in the case of using Firefox:
submit_button.click(function(event){
event.preventDefault();
var selected_file = $("#id-file-to-upload").val();
if (selected_file) {
submit_button.prop('disabled', true);
submit_button.prop('value', "Loading");
}
var upload_form = $("#id-form-to-submit");
upload_form.submit();
});
I want a javascript to redirect the embedded form below when the submit button is clicked
The form is below
<div class="o-form-header"><h2 id="o-form-title">Mail List Subscription Form</h2><p id="o-form-description">Please fill in and submit the form below to subscribe to our mailing list.</p></div> <form action="http://sendfree.com/subscribe.php" method="post" accept-charset="UTF-8"><div class="o-form-row"><label for="FormValue_EmailAddress">Email Address</label><input type="text" name="FormValue_Fields[EmailAddress]" value="" id="FormValue_EmailAddress"/></div><div class="o-form-row"><label for="FormValue_CustomField689">Your Name</label><input type="text" name="FormValue_Fields[CustomField689]" value="" id="FormValue_CustomField689"/></div> <input type="hidden" name="ret_s" value="44" /> <input type="submit" name="FormButton_Subscribe" value="Submit" id="FormButton_Subscribe"/><input type="hidden" name="FormValue_ListID" value="8085"/><input type="hidden" name="FormValue_Command" value="Subscriber.Add" id="FormValue_Command"/></form>
The javascript I use below but it not redirecting to google.com after the submit button is clicked
<script type="text/javascript">
document.getElementById("FORMBUTTON_SUBSCRIBE").onclick=function()
{
window.location.href="http://www.google.com"
}
</script>
Please Help
<script type="text/javascript">
document.getElementById("FORMBUTTON_SUBSCRIBE").onclick=function()
{
location.replace("http://www.google.com");"
}
</script>
document.getElementById("FORMBUTTON_SUBSCRIBE").onclick=function(event)
{
window.location="http://www.google.com";
event.preventDefault();
}
Default action on form button click is submitting of form, so we should prevent it.
I used Eventlistener but not still redirecting, check what may be wrong as am not good in javascript
<script>
document.getElementById("FormButton_Subscribe").addEventListener("click", function(){
window.location.href=" http://www.google .com";
});
</script>
I have small form and links created like this
Contact | Message
<form name="selectform" action="save.php" method="post" target="_blank">
Name: <input type="text" name="test"/>
<input type="submit" value="Submit" name="sub"/>
</form>
When I click "Contact" link, form submit correctly, And If I click "Message" link how to set this form submit to another url
for an example: if i click "Message" link, I want to submit form to edit.php and without using traget="_blank"
You can change the form action using attr() method of jquery,
For example
$('#link1').click(function(){
$('#formId').attr('action', 'page1').submit();
});
$('#link2').click(function(){
$('#formId').attr('action', 'page2').submit();
});
Here you go...
Contact | Message
<form name="selectform" action="save.php" methode="post" target="_blank">
Name: <input type="text" name="test"/>
<input type="submit" value="Submit" name="sub"/>
</form>
Try it like,
Change in HTML
Message
SCRIPT
$('#msgSubmit').on('click',function(e){
e.preventDefault();
$('form[name="selectform"]').attr('action','edit.php')
.removeAttr('target')
.submit();
});
You can use onclick event
<script>
function submitForm(action)
{
document.getElementById('form1').action = action;
document.getElementById('form1').submit();
}
</script>
...
Contact
<a href="#" onclick="submitForm('page2.php')" value="submit 2" >Message</a>
I have done some modification in your code.
please check and let me know.
Contact | Message
<form id="selectform_id" name="selectform" action="" method="post" target="_blank">
Name: <input type="text" name="test"/>
<input type="submit" value="Submit" name="sub"/>
</form>
<script type="text/javascript">
function myaction(actn){
document.getElementById("selectform_id").action = actn;
document.selectform.submit();
}
</script>