While submitting my form which will not validating. I am using submit for form submission and I have to redirect my page. By using onclick event it should be validated..
<td id="main">
<h2>Add Info </h2>
<form action="create_info.php" name="f1" method="post">
<p>Info Title:
<input type="text" name="menu" value="" id="menu" />
</p>
<p>Position:
<select name="position">
<?php
$info_set = get_all_info();
$info_count = mysql_num_rows($info_set);
for($count=1; $count <=$info_count+1; $count++){
echo " <option value=\"{$count}\">{$count}</option>";
}
?>
</select>
</p>
<p>Visible:
<input type="radio" name="visible" value="0" />NO
<input type="radio" name="visible" value="1" />YES
</p>
<input type="submit" value="Add" onclick="validateForm()"/>
</form>
<br>
Cancel
</td>
</tr>
</table>
</div>
<script language="text/java script">
function validateForm()
{
if(f1.menu.value== "")
{
alert("name must be filled out");
return false;
}
}
</script>
It didn't validate because you havn't block the submit event. You should put your validation in onsubmit event, it will be triggered when you click the submit button.
Working code in jsFiddle : http://jsfiddle.net/FHZKr/
<form action="create_info.php" name="f1" method="post" onsubmit="return validateForm();">
<p>Info Title:
<input type="text" name="menu" value="" id="menu" />
</p>
<p>Position:
<select name="position">
<?php
$info_set = get_all_info();
$info_count = mysql_num_rows($info_set);
for($count=1; $count <=$info_count+1; $count++){
echo " <option value=\"{$count}\">{$count}</option>";
}
?>
</select>
</p>
<p>Visible:
<input type="radio" name="visible" value="0" />NO
<input type="radio" name="visible" value="1" />YES
</p>
<input type="submit" value="Add" />
</form>
JavaScript
<script type="text/javascript">
function validateForm()
{
if(f1.menu.value== "")
{
alert("name must be filled out");
return false;
}
return true;
}
</script>
Related
I'm having some issues with a js script that I made (probably because is not the right way but i came up with this idea).
Basically I have a form with some radio buttons in it. Yes or No
<form action="#" method="POST" OnSubmit="return check()">
<input type="radio" id="effettuato" name="sicep" value="Effettuato" />Effettuato <br/>
<input type="radio" id="noneffettuato" name="sicep" value="Non Effettuato" />Non Effettuato <br/>
<input class="button" type="submit" name="submit" value="Invia" button style="height:50px;width:150px">
</form>
Now I made this JavaScript script because I'd like to stop the user if none radio button is selected.
function check() {
if (document.getElementById('effettuato').checked) {
window.location = 'processiorari.php';
}
else if (document.getElementById('noneffettuato').checked) {
window.location = 'processiorari.php';
}
else {
alert('Seleziona tutti i campi per continuare!');
return false;
}
}
If he has selected an option I'd like to redirect him to another page called
processorari.php
The page where those line are written is
orari.php
Any help? I'm just doing the redirect wrong or the entire concept is wrong?
All the files are in the same folder and I'm running everything using xampp
You can use required="required" in the fields and set the form action to the page you want to redirect.
<form action="processorari.php" method="POST">
<input type="radio" id="effettuato" name="sicep" value="Effettuato" required="required" />Effettuato <br/>
<input type="radio" id="noneffettuato" name="sicep" value="Non Effettuato" required="required" />Non Effettuato <br/>
<input class="button" type="submit" name="submit" value="Invia" button style="height:50px;width:150px">
</form>
You can use a click event listener to achieve this. When the button is clicked, it checks if the radio button is checked, if it is then it'll redirect using window.location.href. There is no need to use the submit.
document.getElementById("submit-btn").addEventListener("click", function() {
if(document.getElementById('effettuato').checked) {
window.location.href = 'processiorari.php';
} else if(document.getElementById('noneffettuato').checked) {
window.location.href = 'processiorari.php';
} else {
alert('Seleziona tutti i campi per continuare!');
}
});
<form method="POST" action="#">
<input type="radio" id="effettuato" name="sicep" value="Effettuato" />Effettuato <br/>
<input type="radio" id="noneffettuato" name="sicep" value="Non Effettuato" />Non Effettuato <br/>
<input class="button" id="submit-btn" type="button" name="submit" value="Invia" button style="height:50px;width:150px">
</form>
I have no clue if this is the right way to do it but somehow this work just fine
function check() {
if (document.getElementById('effettuato').checked) {
return true;
}
else if (document.getElementById('noneffettuato').checked) {
return true;
}
else {
alert('Non puoi lasciare un campo in bianco!');
return false;
}
}
and i leave in my form the action just like this
<form action="processorari.php" method="POST" OnSubmit="return check()">
<input type="radio" id="effettuato" name="sicep" value="Effettuato" />Effettuato <br/>
<input type="radio" id="noneffettuato" name="sicep" value="Non Effettuato" />Non Effettuato <br/>
<input class="button" type="submit" name="submit" value="Invia" button style="height:50px;width:150px">
</form>
To check which check box is checked and redirect page accordingly:
$(document).ready(function() {
$('#mychckbx1').prop('checked') ? window.location.href = 'page1.php' : false;
$('#mychckbx2').prop('checked') ? window.location.href = 'page2.php' : false;
});
The problem is that you are calling the check() function only when the form is submitted. Other than that I can't see anything wrong.
It will work if you change onsubmit to onchange like this:
<form action="#" method="POST" onchange="check()">
<input type="radio" id="effettuato" name="sicep" value="Effettuato" />Effettuato <br/>
<input type="radio" id="noneffettuato" name="sicep" value="Non Effettuato" />Non Effettuato <br/>
<input class="button" type="submit" name="submit" value="Invia" button style="height:50px;width:150px">
</form>
I want to clear all form input data after a submitting all input data to php file how can I clear this data by using jquery function?
You can listen to the submit event and then clear the values of each input like below:
$('#form').submit(function() {
$(this)[0].reset();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form">
<input type="text" />
<input type="submit" />
</form>
This should work...
$('form').on('submit', function() {
var children = $(this).children()
children.each(function(i, el) {
if ($(el).attr('type') === 'checkbox') return $(el).removeAttr('checked')
$(el).val(null)
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="text" />
<br>
<input type="text" />
<br>
<input type="checkbox" />iphone
<input type="checkbox" />Android
<br>
<input type="radio" name="gender" value="male" checked>Male
<br>
<input type="radio" name="gender" value="female">Female
<br>
<input type="radio" name="gender" value="other">Other
<br>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<br>
<button type="submit"> submit </button>
</form>
try this
$(document).ready(function(){
$('#submit').click(function(){
$('#my_form').find("input[type=text]").val("");
});
});
document.querySelector(".name").value = "";
<form class="form">
<input type="text" class="name"/>
<input type="submit" value="Send" class="submit"/>
</form>
Then the input value will be always empty
I am trying to get the value of the selected radio button using php. But when I try to echo the value of the radio it returns 'on', no matter which radio button is selected when I submit the form.
HTML:
<article>
<form id="quiz" method="post" action="question3.php">
<fieldset id="question">
<legend>Question 2</legend>
<p>Where was CoffeeScripts first stable build announced? <br />
<label for="github">GitHub</label>
<input type="radio" name="ans2" id="github" value="GitHub"/> <br />
<label for="hackernews">Hacker News</label>
<input type="radio" name="ans2" id="hackernews" value="Hacker News"/> <br />
<label for="coffeescript">CoffeeScript.com</label>
<input type="radio" name="ans2" id="coffeescript" value="CoffeeScript"/> <br />
<label for="dropbox">DropBox</label>
<input type="radio" name="ans2" id="dropbox" value="Dropbox"/> <br />
</fieldset>
<p><input type="submit" value="Submit Answer" id="subans" /></p>
</form>
</article>
Then on the process page:
<?php
if (isset($_POST['ans2'])) {
$ans = $_POST['ans2'];
echo "<p>$ans</p>";
}
else {
echo "Nothing was selected.";
}
?>
Like I said, this just outputs "on" to the page.
Help appreciated!
Can you try this, Added isset($_POST['subans']) in PHP block
<article>
<form id="quiz" method="post" action="question3.php">
<fieldset id="question">
<legend>Question 2</legend>
<p>Where was CoffeeScripts first stable build announced? <br />
<label for="github">GitHub</label>
<input type="radio" name="ans2" id="github" value="GitHub"/> <br />
<label for="hackernews">Hacker News</label>
<input type="radio" name="ans2" id="hackernews" value="Hacker News"/> <br />
<label for="coffeescript">CoffeeScript.com</label>
<input type="radio" name="ans2" id="coffeescript" value="CoffeeScript"/> <br />
<label for="dropbox">DropBox</label>
<input type="radio" name="ans2" id="dropbox" value="Dropbox"/> <br />
</fieldset>
<p><input type="submit" value="Submit Answer" id="subans" name="subans" /></p>
</form>
</article>
In php page/section, Added the isset($_POST['subans']).
<?php
if(isset($_POST['subans'])){ // added the submit button action check
if (isset($_POST['ans2'])) {
$ans = $_POST['ans2'];
echo "<p>$ans</p>";
}
else {
echo "Nothing was selected.";
}
}
?>
I have 1 form, with 2 Submit buttons.
When I click one button, I want certain values to be posted. When I click other button I want other values to be posted.
This is what I tried, did not work:
<form action="/test" method="post">
<input type="hidden" id="bool" name="bool" value="" />
<input type="submit" value="Yes" onclick="test()" />
<input type="submit" value="No" onclick="test1()" />
</form>
<script type="text/javascript">
function test() {
document.getElementById('bool').value = "true";
}
function test1() {
document.getElementById('bool').value = "false";
}
</script>
<form action="/test" method="post" name="myform">
<input type="hidden" id="bool" name="bool" value="" />
<input type="button" value="Yes" onclick="test()" />
<input type="button" value="No" onclick="test1()" />
</form>
<script type="text/javascript">
function test() {
document.getElementById('bool').value = "true";
document.myform.submit();
}
function test1() {
document.getElementById('bool').value = "false";
document.myform.submit();
}
</script>
Use this instead:
<form action="/test" method="post" onsubmit="document.getElementById('bool').value = 'true'; return true;">
<input type="hidden" id="bool" name="bool" value="" />
<input type="submit" value="Yes" onclick="test()" />
<input type="submit" value="No" onclick="test1()" />
</form>
How do I do this in javascript where when a radio button is selected only certain fields show up to type in?? Please show work (preferably with JSFiddle) :)
<form action="inc/add_p_c_validate.php" method="post">
Professor<input type="radio" name="addType" value="Professor" />
Course<input type="radio" name="addType" value="Course" />
<br><br>Name: <input type="text" name="name" /><br>
Department: <select name="deptName"><option>Department 1</option> <option>Department 2</option></select>
Email: <input type="text" name="email" /><br>
<input type="submit" name="submit" />
</form>
set onclick event of your radiobuttons to call a function that will check radiobutton status and then will show or hide elements of your form inside specified div elements.
jsfiddle sample
<script language="javascript">
function ChangeForm()
{
if(document.getElementById('Professor').checked)
document.getElementById('fieldset1').style.display = "inline";
else
document.getElementById('fieldset1').style.display = "none";
if(document.getElementById('Course').checked)
document.getElementById('fieldset2').style.display = "inline";
else
document.getElementById('fieldset2').style.display = "none";
}
</script>
<form action="inc/add_p_c_validate.php" method="post">
Professor<input type="radio" name="group1" onclick="ChangeForm()" id="Professor" name="addType" value="Professor" />
Course<input type="radio" name="group1" onclick="ChangeForm()" name="Course" id="Course" value="Course" />
<br><br>
<div id="fieldset1">Name: <input type="text" name="name" /><br>
Department: <select name="deptName"><option>Department 1</option> <option>Department 2</option></select></div>
<div id="fieldset2">Email: <input type="text" name="email" /><br>
<input type="submit" name="submit" /> </div>
</form>