I have a form which the submit button wont execute the function being called onclick.
<form method="get" name="myform" onsubmit="return Validate()" style="margin: 100px">
<input type="radio" id="Yes" name="Authorise" onclick="Clear_Message(Authorise_Message)"/>
Yes
<input type="radio" id="No" name="Authorise" onclick="Clear_Message(Authorise_Message)" />
No
<div class="Output" id="Authorise_Message"> </div>
<input type="submit" id="SUBMIT" name="SUBMIT" onclick="Validator()"/>
</form>
The Validator code:
function Validator()
{
//display an error message if radio button groups have no value, if it does have a value then clear the error message
Title_Radio();
Gender_Radio();
Partnership_Radio();
Communication_Radio();
Authorise_Radio();
Advice_Radio();
CC_Radio();
Switch();
alert("This function was called");
}
The radio methods check if the radio has a value, if not then it changes the Authorise_Method div to show a message next to the radios,
But the method wont seem to execute. When i had this in an <input type="button" onclick="Validator"/> it seemed to work but i needed it to submit so i changed it to a submit type button...
You should assign id to the form and then run your code at the submit event before the form being submitted, and prevent the form submission if the validation failed.
So the html should be:
<form id="theForm" method="get" name="myform" style="margin: 100px">
<input type="radio" id="Yes" name="Authorise" onclick="Clear_Message('Authorise_Message')"/> Yes
<input type="radio" id="No" name="Authorise" onclick="Clear_Message('Authorise_Message')" /> No
<div class="Output" id="Authorise_Message"></div>
<input type="submit" id="SUBMIT" name="SUBMIT"/>
</form>
And you should add the following code to your JavaScript code:
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("theForm").addEventListener("submit", function(event) {
Validator();
//if the validation fails, prevent the form submission by calling the following function:
//event.preventDefault();
});
});
Related
If I have a simple html form with two submit buttons:
<form method="POST" class="submit_form main_form" action="myaction">
<input type="submit" name="goback" value="Go Back" />
<input type="submit" name="confirm" value="Confirm">
<input type="hidden" name="secret" value="hello"/>
</form>
It is possible to only post the hidden input if the "confirm" submit is clicked?
If the "goback" submit is clicked the hidden input should be ignored. I know how to accomplish this with JavaScript but was wondering if it can be done with just html.
For anyone wondering, this is how you do this in JavaScript:
<script>
var elements = document.getElementsByClassName('submit_form');
elements[0].addEventListener(
'submit',
function(event) {
if(event.explicitOriginalTarget.name === 'goback'){
var hiddenInput = document.querySelector("input[name='step']");
hiddenInput.setAttribute("disabled", "disabled");
}
}
);
</script>
You could put the buttons in 2 separate forms:
<form method="POST" class="submit_form main_form" action="myaction">
<input type="submit" name="goback" value="Go Back" />
</form>
<form method="POST" class="submit_form main_form" action="myaction">
<input type="submit" name="confirm" value="Confirm">
<input type="hidden" name="secret" value="hello"/>
</form>
That way the secret field will only be posted if the confirm button is clicked.
If you want to do it in the php code you can leave your form as is
and check if isset($_POST["confirm"]) to check if the confirm button was the one clicked.
In the HTML page, I have a form that will return false when submit, like:
<form id="form1" action="${formURL}" onsubmit="return false;" method="post" class="formdemotarget">
<input id="text_name" name="text_name" value="text_name" type="text" />
<input type="submit" value="submit">
</form>
Now is it possible to have javascript function to change the form onsubmit function to let the form submit?
You can overwrite the onsubmit property with a new function.
document.querySelector("form").onsubmit = function (event) {
alert("Replaced submit handler");
return true;
};
<form id="form1" action="${formURL}" onsubmit="return false;" method="post" class="formdemotarget">
<input id="text_name" name="text_name" value="text_name" type="text" />
<input type="submit" value="submit">
</form>
It is better not to get into this situation in the first place though. Design your event handlers to handle different situations in the first place.
I'm new in java script.
i want to validate input with type of check box.
i used below code for validation.
<form onsubmit="return checkForm(this);">
<input type="checkbox" name="terms" value="accept" id="accept" />
</form>
function checkForm(form) {
alert('hello');
if (form.terms!=check) {
alert("Please indicate that you accept the Terms and Conditions");
form.terms.focus();
return false;
}
return true;
}
<form name="form1" id="form1" runat="server" onsubmit="return checkForm(this);">
<input class="farsi-font" type="checkbox" name="terms" value="accept" id="accept" style="color: #000" runat="server" />
</form>
however i get alert("Please indicate that you accept the Terms and Conditions");" the form will post to database.and validation just alert to user and didn't prevent form post.any body can help me ?
thank
Not sure where that code came from, but here's how I'd do it:
<input type="checkbox" name="terms" value="accept" id="accept" required />
Note the addition of the required attribute.
document.querySelector('#accept').setCustomValidity('Please accept the terms and conditions');
Now when the user submits the form it will display your message if the box is not checked, the form will not submit. You can test this by placing a console.log or debugger statement in your submit handler:
// Note that as I said in the comments, attaching the handler
// this way is preferable to using the onsubmit HTML attribute.
document.querySelector('#form1').addEventListener('submit', function(evt) {
console.log('stop the presses!');
});
Try this:
HTML
<form onsubmit="return checkForm(event, this);">
<input type="checkbox" name="terms" id="accept" />
</form>
JS
function checkForm(event, form) {
event.preventDefault();
if (!form.terms.checked) {
alert("Please indicate that you accept the Terms and Conditions");
return false;
}
return true;
}
EDIT:
To submit the form using only html, you can have the following approaches.
With an input inside the form
<form onsubmit="return checkForm(event, this);">
<input type="checkbox" name="terms" id="accept" />
<input type="submit" value="Submit the form" />
</form>
With a button outside it. (Now the form must have an id)
<form id="myForm" onsubmit="return checkForm(event, this);">
<input type="checkbox" name="terms" id="accept" />
</form>
<button type="submit" form="myForm">Submit the form</button>
I created HTML form which has two buttons, one for calling java script for form validations and the other one back to the previous page, the two buttons act as submit and validate the inputs.
Here is the code for the form and the button:
<form id = "myform" method="post" action="SearchForCustomer" onsubmit="return validateForm()">
<input type="submit" value="Search" style="width: 100%;" onclick="toggleTable();" />
<input type="button" value="back" style="width: 100%;" onclick="document.forms[0].action = 'homePage.jsp'; return true;" />
</form>
I want the back button to only back whatever the validations was, any suggestions?
Thanks in Advance.
Actually i didnt get your question but why to use input[type=submit] to goto any page (or back)?
It should be:
<input type="button"...
type="submit" will submit form in either case.
You have two buttons of type submit. Have only 1.
<form id = "myform" method="post" action="SearchForCustomer" onsubmit="return validateForm()">
<input type="submit" name = "searchButton" id = "searchButton" value="Search" style="width: 100%;" onclick="toggleTable();" />
<input type="button" value="back" style="width: 100%;" onclick="document.forms[0].action = 'homePage.jsp'; return true;" />
</form>
Here is my problem, when i click the submit button, the textbox doesn't show any value
Is there any mistakes, i am just a newbie
Thank you very much
<form id="form1" name="form1" method="post" >
<p>
<input type="submit" name="setValue" id="setValue" value="submit" onclick="setValue()"/>
</p>
<p>
<label>
<input type="text" name="bbb" id="bbb" />
</label>
</p>
</form>
<script type="text/javascript">
function setValue()
{
document.getElementById('bbb').value="new value here";
}
</script>
The first issue is that you're using the same name for the element as the function, so window.setValue is not the function, but the submit button, and that's an error.
The second issue is that when you hit the submit button, the form is submitted and the page reloads, that's why you wont see a value, you have to prevent the form from submitting.
You could do it with javascript, but the easiest would be to just use a regular button instead of the submit button.
<form id="form1" name="form1" method="post">
<p>
<input type="button" name="set_Value" id="set_Value" value="submit" onclick="setValue()" />
</p>
<p>
<label>
<input type="text" name="bbb" id="bbb" />
</label>
</p>
</form>
<script type="text/javascript">
function setValue() {
document.getElementById('bbb').value = "new value here";
}
</script>
FIDDLE
I was typing the same answer what Adeneo just given, thank you Adeneo.
And user3635102, your <form> was good, you can keep it as it was. Only you need to change <input type="submit"> to <input type="button"> . if you need to submit the form in future you can update your Javascript as follows which will submit form1:
<script>
function setValue() {
document.getElementById('bbb').value = "new value here";
document.getElementById("form1").submit();
}
</script>