Onclick to submit a form - javascript

There is a PHP-generated HTML 4 transitional page that is used to edit data from a database of a single record. The user has two options: to store changes or delete the record. I use a form with controls (some of them are hidden):
<form method="post" action="object_mod.php"><!-- this is another file -->
<!-- inputs follow -->
As I want to process two actions ie. delete or save a record I put two submit buttons on the form, before </FORM> tag:
<input type="submit" id="btnSubmit" value="Save">
<input type="submit" id="btnDelete" value="Delete">
</form>
Because the user should confirm deletion I added the following onclick event:
<input type="submit" id="btnDelete" value="Delete" onclick="javascript:deleteRecordConfirm();">
(I also tried without javascript: and onclick="javascript:deleteRecordConfirm(); return true;"), but it doesn't submit a form.
The JS function is
function deleteRecordConfirm(){
if(confirm('Are you sure to delete?')){
document.getElementById("field_action").value=-1;
//document.forms[0].submit();
return true;
}
}
This field_action is set to -1 so I know in object_mod.php that I want to delete record rather than save it.
Here go question, why this form doesn't submit on deletion?
I think it would be good if a user has Javascript disabled to submit a form anyway, even without confirmation so that is why I use <INPUT TYPE="submit"> for deletion. Is it a good idea? I was thinking about giving two independent forms (in fact deletion should have only one hidden field with record id) with their own submit buttons, one for deletion and the other for saving.
In fact the page will work in some kind of intranet, with users who I trust and I'm not afraid of hacking or something, but any security remarks are also welcome.
(I tested it on Firefox 19.0 and Javascript console shows no errors, w3c validator says it's a valid page).

The form should submit according to your code. The only thing I spot is that you should terminate the input tags with />.
BUT... this way, even if the the confirm is cancelled, the form will be submitted. Use the form.onsubmit handler and if that returns false, the form will not submit.
I dont think #B3aT's answer is right in that not unconditionally the best way to "externalise" so to say. Many the the simplest is the best.

I think the best way is to "externalize" the actual form posting.
//make regular buttons (not submit)
//call your own functions (save and delete)
//after you have done your logic do document.forms["myform"].submit();
Another solution is to add a checkbox named "delete" and rename the "save" button to "Done or do". And on server side, if "delete" is activated, then ..delete it.
Usually the "delete" is required "per entry" level (same user have multiple records), so you will have to make a separate button/link and eventually do an ajax request/access an URL with ?delete=1&id=3.
You need to make custom yes/no windows or use a jQuery plugin for it, the only browser standard is "confirm".

OK, it worked, and this was in fact very stupid mistake. The problem was with this button as it was outside the form. I was so sure that I have it inside that I did not review PHP code but copied all from script not the HTML output as I should have done.
As I understand this correctly the line document.forms[0].submit(); worked but it was not because it was button who submitted the form but document.form[0] object itself.
Thank you for all your answers. I will try this form.onsubmit hint from Marcell.

Related

Radio buttons in form do not transfer to another web page

I can not see why my code does not take me to the specified webpage when dealing with my radio buttons:
<form name="login" onsubmit="return validateForm()" method="post">
.
.
<input type="radio" name="ans1" id="yes">Yes<br>
<input type="radio" name="ans2" id="no">No<br>
<input type="submit" value="Login" onclick= "where_to_go();">
</form>
Script for where_to_go():
function where_to_go(){
if (document.login.getElementById('yes').checked) {
// Yes is chosen
document.location.href = "Admin_index.html";
} else if (document.login.getElementById('no').checked) {
// No is chosen
document.location.href ="Log-In_Greet.php";
}
}
Can someone please tell me where did I go wrong at?
You have two problems.
The first would be revealed if you had looked at your browser's Developer Tool's Console (and had log preservation enabled so it wouldn't be wiped when you navigated to a new page).
getElementById is a property of the document object and only the document object. It is not a property of document.logic so trying to call document.login.getElementById will throw an exception.
Second: You are running your JS when you submit the form.
The JS runs, tells the browser to navigate to one of two pages (or would if the above problem wasn't there), then the form submission continues and tells the browser to navigate to the form's action URL (which you haven't specified so is "the current URL"). This overrides the URL set in the JS.
The quick and dirty solution is to return false from the onclick function so that the normal behaviour of the submit button is cancelled.
The very slightly less dirty approach would be to use type="button" so you wouldn't be triggering a form submission in the first place.
The robust approach would be to write server side code which tests, on a POST request, which submit button was used and issues an HTTP redirect. This will work when the JS inevitably fails.
The cleanest, simplest, most reliable approach is to replace the radio buttons with simple links.

Why isn't my JS pulling the value from the form properly?

HTML in question is pretty simple:
<form>
<input type="text" name="locSearch" id="locSearch" />
<button id="locSearchBtn"><i class="fa fa-search" id="search-icon"></i></button>
</form>
js:
$(document).ready(function() {
getsWeather('seattle, wa', 'f');
$("#locSearchBtn").click(function() {
getsWeather(document.getElementById('locSearch').value, 'f');
});
When I submit the form (either by pressing enter or by clicking the submit icon, the page reloads but with the default setting (i.e with 'Seattle, wa as the default argument for the getsWeather function). I need it to pull whatever is in the input box and use that as the argument in the getsWeather function but that currently isn't working.
Any ideas? Let me know if you need more of the code to understand it
If you want to modify the page, you need to prevent the form from being submitted when you click the button. Two ways to do that:
Add return false to the end of your click handler for the button. This will prevent form submission (if JavaScript is enabled on the client).
Add type="button" to the button so it's not a submit button anymore.
Ideally, you'd combine #1 with handling a form submission if the client doesn't have JavaScript enabled, to handle the small number of people who surf with JavaScript disabled via the form submission while handling JavaScript-enabled clients with the in-page update.

Disable bootstrap button does not work with submit?

I have a basic "contact us" form that asks for some basic information and has a submit button at the bottom. When the user clicks submit the form will be submitted to itself and the fields validated. If no errors, a routine is called that generates an email.
I want the button to be disabled and also have the label changed to "Sending..." when the user clicks it.
I was able to use the jQuery bootstrap calls to change the button label and then disable it... great! But as soon as I add a form submission, the changes to the button no longer occur?
I am not sure if it is the order things are done in the code or some other reason related to the submit? Here are the pertinent code bits (note all in PHP):
<html>
<form id='jkform'>
F_hidden_field("action",$G['action']);
... // bunch of forms fields
//--- Submit Button ---
echo "<div class='form-group'>";
echo "<div class='col-sm-offset-3 col-sm-9'>";
echo "<button type='button' id='sendButton' class='btn btn-primary' autocomplete='off' data-complete-text='Sending...' onclick=\"$(this).prop('disabled',true);$(this).button('complete');J_action('send_email');\">";
echo "Send Message";
echo "</button>";
echo "</div>";
echo "</div>";
...
</form>
</html>
Additionally, the JS function that simply submits the form is the following:
function J_action(the_action) {
document.jkform.action.value = the_action;
document.jkform.submit();
}
Does anyone have a clue as to why the submit would squash the changes to the button? I hope I am just missing something obvious.
Thanks.
Followup 5/26/16 - 5:12pm PT
PRE NOTE: I was just about to post the lengthly followup below, when I cross-browser tested this and discovered that my original code works perfectly as-is in Chrome, IE11 and Firefox, but not in Safari. I think this may actually be either a bootstrap & Safari compatibility issue or a Safari rendering issue (less likely). Still leaves me with an issue to deal with, but at least proves I am not crazy! For proof of concept, here was my original followup...
ORIGINAL FOLLOWUP POSTING:
Thanks for the feedback. I still think something is fishy here.
One important thing I may not have mentioned that is when the original page calls itself from the submit, it is only calling a PHP edit check function and if it passes, a PHP function that generates an email and finally a redirect to a "thank you page." What is important here is that the original script never posts anything to the client until the redirect to the thank-you page. In my understanding of client server in HTTP, that should leave all form fields and elements in whatever state they were in until some new HTML is pushed to the client.
To prove this, I did a little test using code I have used before. It essentially performs the exact same process as what I want from the bootstrap code, and works flawlessly. Basically I added a regular submit button underneath the bootstrap class button and added some "onclick" JS to it and two new JS functions. It stays disabled AND shows my "working..." text until the page redirects to the thank-you page. If this works with a regular button, then something is different in the Bootstrap structure that causes it to freak out when a submit occurs.
The javascript code to make this happen is as follows:
//--- Disables the submit button (to prevent double clicking) ---
function J_try_submit($disableField, $theAction) {
document.getElementById($disableField).disabled = true;
document.jkform.action.value = $theAction;
document.jkform.submit();
}
//--- Show "Please wait" message ---
function showWait() {
document.getElementById('waitMsg').style.display = 'block';
}
And the code in the HTML is the following:
<input id='mySubmit1' type='submit' name='dummy' value='Save Changes' onclick="J_try_submit('mySubmit1','add'); showWait();" />
<div id='waitMsg' style='display: none;font-size:12px;color:#3f7799'> Please wait...</div>
Works great and is easy to test.
FINAL NOTE: I do see the disabled cursor when I mouse over the bootstrap button after I click it while it is working, just not the style changes? So it must actually be disabled, but does not look disabled. Weird.
Not entirely clear from this code example, but my guess is you are submitting the form and causing a screen refresh, thus immediately reloading the page. In other words, the JS is executing properly but immediately being overwritten.
If you are building in client side validation and emailing the form from the client, then instead of having your logic attached to a click event on the button, you should attach the logic to a submit event on the form, and call preventDefault in the event callback to prevent the browser's default form handling. For documentation and examples in jQuery, see .submit() documentation.
after submitting your page is reloaded ? if so, the button is not pressed in , the jquery reset. you need to add to the form field <input type = "hidden" name = "btn-state" value = " 0 " > . then when you click through to install jquery in the value status and transmit it when the form is submitted . Further php check this box via $ _GET [btn-value] and depending on the state ( 0 or 1 ) to set the button text and add class "btn-disabled" in php
There doesn't seem a need to use js here at all, unless you are using it to validate the form input. From what I can gather you are posting the form to itself and validating in php, so you can use the default form submitting behaviour.
Use something like this:
<form id ="jkform" action = "example.com/thispage" method = "post">
// bunch of forms fields
//--- Submit Button ---
<div class='form-group'>
<div class='col-sm-offset-3 col-sm-9'>
<button type='button' id='sendButton' class='btn btn primary'>Send</button>";
</div>";
</div>
</form>
You seem to be adding the F_hidden_field() function to the form which is not needed as you can add that as the action and method on the form itself.
This way you can eliminate all the js and extra echo's everywhere in the php. If you need to generate a lot of things in php you can look into template engines such as handlebars which will make things much cleaner and simpler.
If your only intention is to have the effect of the button changing when clicked you could use jquery submit function.

HTML button to submit a form elsewhere on the page

I want to have a form on the main section of my webpage with buttons along the bottom of this section to submit it.
I also want to have a side bar with links to other pages, but make it so that whenever a link is clicked it acts as a button to submit the form too. (ie in the HTML, the code for these links will be outside of the form tags, but I would like them to still act as buttons for the form)
Is this possible?
You can solve this very easy without JavaScript in HTML5:
<input type="submit" form="id_of_the_form" value="Submit">
<form id="id_of_the_form" action method></form>
And you can style those buttons as you like. As in the example, the button can be placed at any point within the dom - no need to put it into the form.
Use the following onclick handler in your link, replacing formId with the ID for the form you want to submit...
onclick="document.getElementById('formId').submit();return false;"
Update
As #Juan (and others, especially #JoeTaylor) have mentioned, the above will not fire any client-side validation code associated with the form. The easiest way that I'm aware of to make it do so is to fire the click event of a submit button within the form. For instance, this could be used on your link...
onclick="document.getElementById('formSubmitButton').click();return false;"
Although you don't mention anything to do with server-side processing, I will take the assumption that is the point of your form. One additional thing I would say on the back of this is that you should ALWAYS replicate the validation back on the server. JavaScript is very easy to bypass, and so you should make sure the values reaching your server are correct, and never assume the JavaScript has done it's job.
The easiest way to ensure your form is submitted and validated by whatever function you've attached is not to call the form's submit() method, but to call its submit button's click() method instead.
Consider the following form:
<form id="bar" method="post" action="/echo/html/">
<input type="text" id="foo" name="foo">
<input type="submit" value="Submit">
</form>
Right now, clicking submit doesn't do anything special. But what if you wanted to ensure the text input had a value before sending anything off to the server? You might accomplish that as follows:
function validateBarForm() {
var txt = this.querySelector("input[type=text]");
if (txt.value == "") {
txt.style.outline = "solid red 2px";
return false;
}
}
document.getElementById("bar").onsubmit = validateBarForm;
Now if you click submit the form won't be submitted with a blank text input. But what if you submit the form programmatically? Let's add a link first...
submit form
Note that this link is outside of the form tag. We can trivially attach a submission function:
function submitBarForm() {
document.getElementById("bar").submit();
}
document.getElementById("submit-bar").onclick = submitBarForm;
We click "submit form" and... Whoops! The validation function is not performed! There are a few ways to skirt this issue, but my favourite is to simply have JavaScript simulate a click to the submit button. I find this holds up to changes a lot better than hardcoding a call to the validation function.
function submitBarForm() {
document.querySelector("#bar input[type=submit]").click();
}
Now when you click the link, the form is validated, and if everything checks out it's submitted too. But don't take my word for it--head on over to jsfiddle.net and see for yourself.
By adding an onclick javascript function to your form.
document.forms["myform"].submit();
Where "myform" is the id of your form. Here's a nice walkthrough: http://www.javascript-coder.com/javascript-form/javascript-form-submit.phtml
For example, the button might be:
<button onclick="document.forms['myform'].submit();">Hi</button>
Yes the button's click event add document.getElementById('formId').submit();
<form name="myform" action="action.php">
// Your form
</form>
Submit form
Or you can use jQuery:
<form name="myform" action="action.php">
// Your form
</form>
Your text
I do this myself with hidden submit buttons in the actual form, and outside of the form - anywhere else on the page - labels that reference the submit button and fire it.
In the form:
<input type='submit' id='hiddenSubmit'>
And anywhere else:
<label for='hiddenSubmit'>click me!</label>
Seems to do the job.

HTML Nested Form Problem

I'm making a web page using CGI scripting which has a form users need to fill out. The general layout is:
<form>
textfield (username)
textfield (password)
textfield (email)
submit button
</form>
What I would like to do is add a button that checks to see if the username they've entered is available. My problem is the way I'm trying to go about doing this is by writing:
<form>
<form>
textfield (username)
submit button
</form>
textfield (password)
textfield (email)
submit button
</form>
This doesn't work, the submit button instead submits the outer form. Here are the things I've considered trying but have not worked:
Put a form at the end of the first form. Problem: I have no idea how to align the "validate" button next to the username text field button without making it float which causes a bunch of other issues with the page.
Put values on the submit buttons and make the submit do different things based on which button was clicked. Problem: the web page that I want to make a "POST" request to is different based off which button is pressed. Seeing as I put the action="mypage.cgi" in the portion of the code, and not the button portion, I don't know how to make it go to different sites based on which button I press.
First of all it is a good idea to give all forms names.
So you can easily distinguish between forms.
Next, attach onClick even to each button that would call a function with a different paramenter: 1,2,3. Each button would send its own parameter. In the function you just look at the paramenter and submit appropraite form.
<form name='form1'>
....
<button type="button" onClick=doIt(1);>Submit</button>
</form>
<form name='form2'>
....
<button type="button" onClick=doIt(2);>Submit</button>
</form>
<form name='form3'>
....
<button type="button" onClick=doIt(3);>Submit</button>
</form>
<script>
function doIt(formid)
{
if(formid==1)
{
document.form1.submit();
}
if(formid==2)
{
document.form2.submit();
}
...
}
</script>
Have multiple submit buttons with different names. Check for each on the post back.
The approach that I have used for nested forms is to use tag instead of tag,
and then appending the form tags at the time of clicking submit buttons.
I have written a small JQ Plugin-'dynaForm' for the same, and its very easy to implement.
Please refer to ==> http://anupampdhyy.wordpress.com/2014/09/29/dynaform/
and
you can also watch a demo for same at :
https://www.youtube.com/watch?v=CFQia8EsoPQ&feature=youtu.be
I hope this helps you to implement nested forms in your HTML code. :)
You probably need to make two different form actions, so that you don't submit two completly different values.

Categories