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
Related
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.
<form>
<input type='submit' name='btn1' value='btn1' onclick='javascript:return test()' />
</form>
function test(){
$('#testDiv').dialog('open');
}
Dialog have 2 buttons 'OK' & 'cancel'
On the 'OK' button I have written .submit() which is working fine.
But the issue is when values are posted to .php file $_POST['btn1'] is not set. Which would have been set if there is no function called on OnClick event and the submit button had been directly triggered.
Can anyone help?
yes, if you do manual jQuery submit , i.e) by calling $("#formid").submit(); your submit button will not present in POST values but all other values will present.
This Issue I have noticed while am working on jquery Ajax captcha.
You can confirm that by putting one or two hidden values and check your POST values.
put some value in your submit button.
<input type="submit" name="submit" value="submit" onclick="... do whatever"/>
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).
Currently, I am using an with ajax to update my mysql. Now, I have to click on the button with the mouse for it to work (I am using onclick), but how can I make it accept the "enter" button? My guess is... Enter isn't working because isn't there. If I leave it there, my ajax just doesn't move.
Use a <input type="submit> instead of a <button> or type="button" and then hook into the forms' onsubmit event.
For example:
<form action="#" onsubmit="alert('Hello world!'); return false">
<input type="text" name="myText" id="myText" />
<input type="submit" value="Submit" />
</form>
The return false ensures that the browser doesn't actually submit a form.
If you're in an HTML form, then enter will submit the data. You only have to write in the onsubmit event handler to do your ajax calls.
If you're not in an HTML form, check for the key press event handler. Maybe it's what you're looking for.