I have this simplified self.jsp form:
<form name="count" action="self.jsp">
<input type="text" name="data1" id="data1" maxlength="50"/>
<input type="text" name="data2" id="data2" maxlength="50"/>
<input type="text" name="data3" id="data3" maxlength="50"/>
<button id="recalc" type="submit" value="recalc">Recalculate</button>
<button id="save" type="submit" value="save">Save to Database</button>
</form>
Now, I want to automatically submit this form at the page loading using javascript. I want to do some field pre-populating. The problem here is that I have more than one button to "submit" the form. So I can't use the js that ask the form to submit itself (like document.getElementById("count").submit();) because I wouldn't be able to know which button get pressed. But I seems to not able to use the javascript to "push" the button using code document.getElementById("recalc").submit();. The question is:
What is the javascript code if I want to "automatically run" the "recalc" button?
What is the javascript code if I want to "automatically run" the "save" button?
Is there any mistake in my html form code? For example, is it impossible to have two "submit" button at one form? Or is to "push" the button, I can't use submit() function, but another function, for example, click() maybe?
I'm just a beginner at javascript. Any help would be appreciated. Thanks.
Update:
I'm trying to have two button at one form. The recalculate button is to recalculate the value at data3 using the information data1 and data2. The save button is to save all the data1, data2, and data3 to database. All of the required java code is put before the form. You can see that the form is referring to itself. So if the recalculate is pressed, the form is only reload itself, but now with the data3 is prepopulated. If the save is pressed, the form is reload itself, but with all the data1, data2, and data3 is saved onto the database. But I want to be able to push the button using javascript, and I don't know how to trigger the button click. I can only trigger the form submission using javascript, hence the problem is I don't know which button was pressed or will be send onto the form itself. Sure I can check using the names at the JSP code, but how if I want to say "the button pressed was recalc button", or "the button pressed was save button" to the JSP that will receive the form data? So that's why I need to trigger the button individually. Or can't I?
A for Q1: document.getElementById('recalc').click();
A for Q2: document.getElementById('save').click();
A for Q3: You can have several submit buttons in a form, but you need to add "name" attribute to those submit buttons (name/value pair), so the server side would be able to know which button was pressed.
Hope these helps
Related
I am confused about some behaviour on my webpage where I use both submit action and onclick event on the Save-button in a form. It works fine for me, but it seems that some users have trouble to save the information in the form.
I have simplified the form here:
<div class="container">
<form id="myform" action="action.php">
<input "nameinput" type="text" name="name">
<button id="savebutton" type="submit" >Save</button>
</form>
</div>
Now... I have also added an jQuery section that shall hide the form when the save button is pressed:
$(".container").on("click", "#savebutton", function(){
$("#myform").slideUp("slow", function() {
$(this).remove();
});
});
So: When the user presses the Save-button it shall both send the name to action.php and trigger the click-event to close the form.
This works perfectly fine for me, but I wonder if this design can cause troubles on some browsers, especially older ones? I have got bug reports from users where the form is closed, but no data is saved (i.e. action.php isn't called). Is it possible that the form "dissapears" before the form can submit the data?
Here the default behavior of the submit button is to send the data to action.php. Definitely, it is going to load the page again when users click the submit button in that case your javascript code will not run.
I will recommend you to use JQUERY AJAX Documentation
I have two buttons of type="submit" one for submitting to the database and other for updating the database and for the same purpose I got two PHP files one for submitting and other for updating.
The problem is that I want to hide update button on fist.php and show the submit button and vice-versa.
Let's say the page, which has the two buttons you mentioned, send a request to query existing record.
If no record found, the page is supposed to submit to "submit" page, else to "update" page.
Then, in your code, you can put a hidden input element, which contains the value, by which you know where to submit.
maybe something like this:
<input type="text" id="direction" value="" display="hidden">
Then, you have a button, not a type=submit, but a type=button.
something like this:
<input type="button" id="submitBtn" value="submit" onclick="submitForm()">
Then you have a javascript function. something like this:
<script language="javascript">
function submitForm(){
if(document.getElementById("direction").value=="submit"){
//Change form1 to your real form name.
document.form1.action="submit.php";
document.form1.submit();
}else if(document.getElementById("direction").value=="update"){
//Change form1 to your real form name.
document.form1.action="update.php";
document.form1.submit();
}else{
alert("error happened. the direction unknown, unable to submit the form");
}
}
</script>
I'm trying to create my own "upload" button instead of the default one. By clicking on my custom button I'm triggering a click on the original upload button:
HTML:
<form id="myForm" enctype="multipart/form-data" action="api/upload.php" method="POST">
<input type="hidden" name="MAX_FILE_SIZE" value="5120000" />
<input name="userfile" type="file" class="choose-file"/>
<button class="choose-picture"></button>
<input type="submit" class="send-button" value='' />
</form>
JS:
$('.choose-picture').click(function() {
$('.choose-file').trigger('click');
});
I have another script that displays the picture that got uploaded when I click the submit button. If I use the original upload file button, nothing happens and that's ok (the picture is only suppose to show up after I choose and submit one), but when I click my custom (.choose-picture) button it acts as if I already chose a file for uploading, putting some mess in the img source and displaying a non-img (the icon you see when the source is wrong).
This is what the console says:
GET http://localhost/OrlenOla/%3Cbr%20/%3E%3Cb%3ENotice%3C/b%3E:%20%20Undefined…api/upload.php%3C/b%3E%20on%20line%20%3Cb%3E10%3C/b%3E%3Cbr%20/%3Euploads/ 403 (Forbidden)
So it's acting as if I already called my upload script (which I have no intention to call at this stage as it's supposed to happen on submit).
Why is this happening? How can I fix it?
If you don't explicitly specify a type attribute on a <button> element, it's treated as though you explicitly declared it as type="submit" (i.e. a button that's intended to submit the form):
submit: The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.
Source
That's why it's triggering your form submit event handler code, because it does submit the form.
Easiest way to fix this is to just specify type="button" on the element:
<button type="button" class="choose-picture"></button>
The other way (as you discovered) is to prevent the default behaviour of the button:
$('.choose-picture').click(function(e) {
e.preventDefault();
$('.choose-file').trigger('click');
});
I managed to resolve the issue:
$(document).ready(function() {
$('.choose-picture').click(function(e) {
e.preventDefault();
$('.choose-file').trigger('click');
});
});
I need a javascript code to prevents bots from submitting forms.
But i need a client side code in javascript that work like CAPTCHA but don't call the server
thank you
Most straight forward and simple way will be to add or edit form data on the fly when the button is actually clicked:
<input type="hidden" name="SubmittedByHuman" value="NO" />
<input type="submit" value="Submit me" onclick="this.form.elements['SubmittedByHuman'] = 'YES';" />
Having this, on the server side check the value of form element called "SubmittedByHuman" - if it will be "NO" it means something bypassed the submit button - or as people mentioned correctly in comments, user did click but has disabled JavaScript.
do something like
<h1>Type the result in the input box : 1+1</h1>
<input id="sum" type="text"/>
and before submitting you check if the value in the input is 2 and then submit it.
To improve this type of code you could randomly create these 2 values in the h1 and save them into a var and before submiting check if input and sum are the same.
I doubt this is possible, as bots are sophisticated enough to bypass most things.
Remember, the bot isn't going to open the webpage in a browser and press submit. It'll probably scan the page for a <form>, make a list of all the <input> fields, and perform a POST request containing all the data for each one.
It won't run any javascript, or press any buttons. You'll have to make the check server-side.
I have a form that relies on javascript to do all the client side form validation. The form is submitted via javascript if all the fields are correctly filled in as opposed to using a standard "submit" button:
<button name="button" type=button onclick="validateReqFields('mForm', 'username, password, compPassword, firstName, lastName');">Register</button>
document[formName].submit();
If the client has javascript disabled, all of the form validation is done server side (its actually performed again regardless but that doesn't really matter). The problem lies with using a button with a type of button instead of submit. It works perfect with javascript, but how do I get around this when javascript is not available? If I use a submit button along with the javascript then it submits the form with each button press and doesn't work properly.
Use a submit button instead of the "button" button, and then have your validateReqFields function return false if the form is not valid.
Then take out the form submit from the validateReqFields if you like.
This way
If the form is valid, then the button click will bubble and the form will submit
If the form is invalid, then the javascript will cancel the button click
If javascript is disabled, then it will be submitted to the server as a fallback
Change the type attribute to submit.
<button name="button" type="submit" ... />
Use the <noscript></noscript> tags to define a "normal" submit-button when javascript is disabled.
You could maybe use the <noscript> tag and encapsulate the above code with the button type as submit. If the client has js, the code inside the noscript will be ignored.