When my contact form is not sent because of blank fields it reloads the site and shows an error message before the form. A "success" message is shown when everything is ok.
The problem is that the contact form is in the footer and you can't see either message without scrolling down yourself after sending the form.
I've tried this in the submit button, though it doesn't work.
<input type="submit" value="Send" onsubmit="location.href='#footer';">
Footer is the id where I want the user to be sent after submitting.
Any ideas?
Thanks!
EDIT
Using "index.php?#footer" instead of the id alone seems to work in the case of the error message, not in the case of success for some reason....
You can add #footer to the form's action value
<form action="/some_path/#footer">
<input type="submit" value="Send">
</form>
I think you want to get the position of your element first.
Call it the following:
<input type="submit" value="Send" onsubmit="anchorfunction('#footer');">
Then your JS function should look like this:
function anchorfunction(elem) {
var top = document.getElementById(elem).offsetTop;
window.scrollTo(0, top);
}
This way you will get the top of your element and scroll within the current window to it.
Related
im trying to get an ajax submit function to work. i cant find what the issue is here. the button for submit is inside a table inside a form
i tried using alert to see if its working but it still not.
the method-
$("#submit").submit(function(){//comparing the total quoted hours with duration of time selected
alert("DEMO TEST");
// code for the comparing values goes here but that's another
//story
});
the submit button-
<input type="submit" name="submit" value="submit" id="submit" onclick="index.php">
obviously the alert should pop an alert with DEMO TEST.
i dont know where im going wrong
It just because of you are calling submit event. When you call submit event your form will submit. you need to take id and class of form like.
<form action="" id="formsubmit">
<input type="submit" value="Submit"> //Remove name="submit" onclick="index.php"
</form>
$("#formsubmit").submit(function(){
alert("DEMO TEST");
});
You have to point the .submit to your form, not your button.
More info on how submit works on jQuery https://api.jquery.com/submit/
jQuery on click event is getting triggered first as onclick="index.php" so remove it and submit the form then it will work.or if you want that event to be trigerred you should return true. or you can submit form using jQuery using .submit() and after submitting the form you can use location.href
I have problem that my page refreshes when form is submitted. I have checked other questions on stack but they worked fine when type of input is button like <input type="button"> I have also checked javescript and jquery techniques but they doesn't work for me. Kindly can you please guide me that how to stop page refresh on form submission when its type is image.
<form action="userOwnProfile.php" method="post">
<input type="image" src="messageicon.jpg">
</form>
You don't have an id, input name or form name, you don't have a submit button. If you wish to use Ajax you need to identify the element with an id, class or name. What you have cannot work.
Try (add tags)
<img id='somename' src='messageicon.png' />
Or
<button id='somename'>messageicon.png </button>
You don't need a form
Then in jquery
$("#somename").click(function(e){
e.preventDefault();
Do something like send data to php
});
I'm a noobie programmer and I wonder how to properly submit a form with javascript.
I made some test code to show you what I mean:
<?php
if (isset($_POST['message']))
{
echo $_POST['message'];
}
?>
<script>
function formsubmit()
{
document.getElementById('form').submit();
}
</script>
<form id="form" name="form" action="" method="post">
<input id="message" name="message" value="hello world">
<input id="submit" name="submit" type="submit">
</form>
Click me<br/>
<input type="submit" onClick="formsubmit()" value="Click me">
When you push the "submit" button inside the tags - the php code will echo "hello world".
When submitting the form with JS the values won't post to the page. What am I doing wrong?
Thanks in advance.
I've searched the whole afternoon for a solution, but cause of my lack of knowledge about programming I failed to find it.
Believe it or not, but the main problem lies here:
<input id="submit" name="submit" type="submit">
If a form contains an input element with name (or id) of submit it will mask the .submit() method of the form element, because .submit will point to the button instead of the method. Just change it to this:
<input name="go" type="submit">
See also: Notes for form.submit()
The smaller problem is here:
Click me<br/>
An empty anchor will just request the same page again before calling formsubmit(). Just add href="#".
The problem here is that the id and name of the input element on your form is called submit.
This will mask the submit function for the form. Change the name and id and you will be able to use javascript to submit the form.
try setting the href of the to '#'. I would guess what is happening is that by clicking on the link, it submits the form and immediately changes the url to the same page you are on cancelling the form submit before it has a chance to go.
So I have this simple form:
<form action="includes/process.php" method="post" name="standard_use" id="standard_use" enctype="multipart/form-data">
<button onclick="dofunction(); return false;">Do it!</button>
<input type="file" id="upload_file" name="filename" style="float:left;width:70%;" size="42"/>
</form>
So what happens really when the button is clicked ?
Is it that the php file is called ? does it not ? the javascript is called before ?
Anyone can shed some light on this ?
Thanks !
Well, when you hit the button the following events occurs:
You send a REQUEST to the server
The php codes evaluates the request and runs some codes
Finally it returns back a RESPONSE which you see as a web page
Javascript is a client-side script which means that whenever you make an action on the page, the code runs. For instance, when you click the button, before sending the request javascript will work. You may, for instance, place a function that will be triggered when you hit the button which checks the form and either approves the form or shows the error messages
EDIT
As far as your comment is concerned:
Yes, javascript runs first when you hit the submit button. Php runs only when you submit the form and make a request to the server.
Consider this example: (I am better at explaining things with examples:)
<form action="somepage.php" onsubmit="return checkMe()" method="POST">
<input name="firstname" id="fn" value="" type="text" />
<input type="submit" value="Submit" />
<script type="text/javascript">
function checkMe(){
var tb = document.getElementById("fn")
if(tb.value == "Alex") return true;
else return false;
}
</script>
</form>
So basically, when you hit the button and try to submit the form, the javascript will first check whether the name provided in the textbox is Alex or not, if it is not then it will not submit the form. If it is Alex then it will submit the form and then the form will redirect the user to somepage.php. Finally, the php codes will work in somepage.php and the page will be rendered again.
What happens is that only doFunction() javascript function is invoked and nothing more.
However, it might be possible that this javascript function invokes "submit" event on the form and the request is sent (what you described as "php file is called").
Your code just trigger javascript event and your function. To submit a form you need an
<input type="submit" value="Submit" />
or a button, which default type is submit (thx davin)
<button value="Submit" />
However as far as you return false in your javascript code your form won't be submitted even with the submit button.
Given this simple javascript function:
function update_cart() {
alert("--update--");
document.form1.command.value="update";
document.form1.submit();
}
and this button at the bottom of my form:
<input type="submit" value="Update" onclick="update_cart()" />
The data in the form is 'submitted' to the new URL. but the update_cart function is never called. I know because I never get an alert box, and the URL reads...?c=Albania&m=....
Also, the form element
<input type="hidden" name="command"/>
does not get posted to the URL, either. URL reads ?command=&c=Albania...
I have tried the following: changed onclick to onsubmit, checking $_REQUEST variables, cutting and pasting the code from known working pages.
I'm at my wit's end, and would be grateful for any help!
Oh, yes: same behaviour in firefox 6, Opera 11.5, & IE7. I'm running WinXP SP3.
Thanking you,
Sadhu!
Once try
<input type="button" value="Update" onclick="update_cart()" />
instead
<input type="submit" value="Update" onclick="update_cart()" />
if you want that for 'submit' type then go with 'Allen Liu' answer
enter code hereif you wane to change sth when onsubmit, you need to do these changes before form's submitting. so you need to add these opeartion to the "onsubmit" event of the form, rather than the "onclick" event of the submit button.
like this:
<form name="toSubmit" onsubmit="update_cart();"><input type="submit" name="btn" value="hello"/></form>
If you want the script to run on submit of form, use:
<input type="submit" value="Update" onsubmit="update_cart()" />
The onsubmit event is usually used to run some validation script. If the validation returns true, the form will submit. If it returns false, the form does not submit. In your case, the script is coded to submit the form so no return boolean value is necessary.
Otherwise, I would not give your button the submit type if it really doesn't submit the form. You can simply use button tags with the onclick and that should work:
<button onclick="update_cart()">Update</button>
First of all there is no need to change your html; see my demo.
On every click on a submit button, first the click-handler (if exists) will be started, then the submit-handler (if exists) (which should be in the form tag) and then the action of the form will be executed. This procedure will be only stoped, if a handler returns false.
But why will your javascript function update_cart not be called?
I think it could not be found, but I don't why. Can you bind the function to the window dom element only for testing (like in my demo)?
P.s.: you don't need to submit the form in your click-handler (if you don't return false). You can remove the line: document.form1.submit();.
P.s.: it will be better not to use a click-handler on the submit-button, instead use a submit-handler in the form tag (see my demo2).