I have a select box that shows and hides form elements using jquery. The hide and show works. But when I submit the form, if there's PHP validation errors, the form that's showing is hidden after refresh. I've searched and search but can't find a solution that fits with my code. If someone could show me how to show the form submitted if validation errors exist that would be great. See code below.
<script>
$(function() {
$('#colorselector').change(function(){
$('.colors').hide();
$('#' + $(this).val()).show();
});
});
</script>
<form action="" onSubmit="return validateForm(this)" method="post" name="form">
<select id="colorselector">
<option selected></option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<div id="1" class="colors" style="display:none">
<input type="text" name="1">
<button type="submit" name="submit">Submit</button>
</div
><div id="2" class="colors" style="display:none">
<input type="text" name="1">
<input type="text" name="2">
<button type="submit" name="submit">Submit</button>
</div></form>
Related
I have 2 buttons in my page. I just want to redirect to Addform.php page only when I click on submit button. But my code will redirect to that page from both submit and reset button.
<form id= "myForm" action= "Addform.php" method= "post">
First name:
<input type="text" id="fname"><br/><br/>
Last name:
<input type="text" id="lname"><br/><br/>
Age:
<input type="text" id="age"><br/><br/>
Major Subject:
<select id="select">
<option value="">---</option>
<option value="op1">Mathematics</option>
<option value="op2">Computer</option>
<option value="op3">Statistics</option>
</select><br/><br/>
GPA:
<input type="text" id="gpa"><br/><br/>
<button id="btnSubmit" onclick="validation()" value= "submit">Submit</button>
<button id="btnReset" onclick= "resetForm()">Reset</button><br/>
</form>
you must code like this
with type of button they dident submit the form
simple way is set type of button like this type = "reset"
<form id= "myForm" action= "Addform.php" method= "post">
First name:
<input type="text" id="fname"><br/><br/>
Last name:
<input type="text" id="lname"><br/><br/>
Age:
<input type="text" id="age"><br/><br/>
Major Subject:
<select id="select">
<option value="">---</option>
<option value="op1">Mathematics</option>
<option value="op2">Computer</option>
<option value="op3">Statistics</option>
</select><br/><br/>
GPA:
<input type="text" id="gpa"><br/><br/>
<button type="button" id="btnSubmit" onclick="validation()" value= "submit">Submit</button>
<button type="button" id="btnReset" onclick= "resetForm()">Reset</button><br/>
<!-- or -->
<!--<button type="reset" >Reset</button>-->
</form>
button by default submits the form. Use input instead:
<input type="button" id="btnSubmit" onclick="validation()" value= "Submit">
<input type="button" id="btnReset" onclick= "resetForm()" value="Reset">
Alternatively I think you can still use button but you must prevent the default behaviour.
Using plain javascript:
document.getElementsByTagName("button").forEach((item, index)=>{
item.addEventListener('onclick', function(event){
event.preventDefault()
});
})
Using jQuery:
$('button').click(function(event){
event.preventDefault();
});
i want to take the < select > value to the php code (above) when i press the submit button
I tried to send the form values to the same page (with action) but it didnt work.
what should I do?
<form name="open_file">
<select name="file" style="width:40%; font-size:20px;">
<option value="A1" selected="selected" >A1</option>
<option value="A2" >A2</option>
<option value="A3" >A3</option>
</select>
<button type="submit" name="submit">UPLOAD</button>
</form>
<?php
//the <select> value should be in $file.
$file= ...?
?>
thank you !
Without defining the action attribute, form element WILL NOT send the request to any page via any method.
In addition, using button, probably would the server not send the request. Use input element instead.
If you really wish to send the data to the same page, use:
<form name="open_file" action="" method="GET">
<!--your link to this page in action attribute-->
<select name="file" style="width:40%; font-size:20px;">
<option value="A1" selected="selected" >A1</option>
<option value="A2" >A2</option>
<option value="A3" >A3</option>
</select>
<input type="submit" name="submit" value="UPLOAD" />
</form>
Plus, it is not a good practice to process form data after outputting HTML. Put the PHP code at the beginning of the document.
First, you have to define your form action and method like :
<form name="open_file" action="" method='GET'>
<select name="file" style="width:40%; font-size:20px;">
<option value="A1" selected="selected" >A1</option>
<option value="A2" >A2</option>
<option value="A3" >A3</option>
</select>
<button type="submit" name="submit">UPLOAD</button>
</form>
<!-- GET YOUR SELECT VALUES USING PHP -->
<?php
if(isset($_GET['file'])){
$file = $_GET['file'];
// Now you can use $file variable according to your code requirements
}
?>
For more detail : PHP Form Handling
I have a form with a select box that determines if a div is hidden or shown. Each div has text boxes and a button. Since my validation is validating ALL divs hidden or shown, is it possible IF a select option is selected PHP can echo the form picked? For example, below I have
<div id="1" class="colors" style="display:none">
<input type="text" name="1">
<button type="submit" name="submit">Submit</button>
</div>
Is it possible to create an array to build the code above when that option is picked? Same goes for the second hidden div -
<div id="2" class="colors" style="display:none">
<input type="text" name="1">
<input type="text" name="2">
<button type="submit" name="submit">Submit</button>
</div>
This way only one form will be created at a time when a option is picked in the select box. Is this possible? Is this a good idea? The original form will have more form elements.. this is just a sample. Here's the code below.
<script>
$(function() {
$('#colorselector').change(function(){
$('.colors').hide();
$('#' + $(this).val()).show();
});
});
</script>
<form action="" onSubmit="return validateForm(this)" method="post" name="form">
<select id="colorselector">
<option selected></option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<div id="1" class="colors" style="display:none">
<input type="text" name="1">
<button type="submit" name="submit">Submit</button>
</div>
<div id="2" class="colors" style="display:none">
<input type="text" name="1">
<input type="text" name="2">
<button type="submit" name="submit">Submit</button>
</div></form>
If this is possible and a good idea, can you provide an example on how this can be accomplished?
<html>
<BODY>
<form action= "myscript.php" method="post">
first name: <input type="text" name="firstname" value="Mary"><br>
Last name: <input type="text" name="lastname" value= "clan"><br>
<input type="checkbox" name="mychoices[]" value="choice1" checked>
<input type="checkbox" name="mychoices[]" value="choice2">
<input type="checkbox" name="mychoices[]" value="choice3">
<select name="myselection">
<option value="selection1" selected>Option1</option>
<option value="selection2">Option2</option>
<option value="selection3">Option3</option>
</select>
<select name="myselections[]" size="3" multiple>
<option value="choice1" selected >Choice1</option>
<option value="choice2" selected>choice2</option>
<option value="choice3">choice3</option>
</select>
<textarea name="mytextarea" rows="10" cols="40">
Welcome to the web developement world.
</textarea>
<input type="password" name="mypassword">
<input type="hidden" name="myname" value = "myvalue">
<input type="reset" value="reset form">
<input type="image" name="myimage" src="desert.jpg" height="42" width="42" onclick= "document.write('<? php Aftersubmit() ?>');"/>
<input type="submit" name="submitbutton" value="Submit Form">
</form>
<?php
function Aftersubmit()
{
$myname = $_POST['myname'];
if(isset($myname)){
echo ($myname);
}
}
?>
</BODY>
</HTML>
I want to display the value of hidden tag after clicking submit button. But getting "Object not found" error 404. Beginner in php, pls help. I also want to know how to call php functions from html.
You can't call a PHP function from an onClick event. That only works with Javascript functions. So one problem is in this line:
onclick= "document.write('<? php Aftersubmit() ?>');
You can remove that, and then pull your PHP out of the function. This will display your name if you click the submit button.
<?php
if(isset($_POST['submitbutton'])){
$myname = $_POST['myname'];
if(isset($myname)){
echo ($myname);
}
}
?>
You may also have to change the action of your form:
<form action= "myscript.php" method="post">
If the file myscript.php doesn't exist, then you'll get a 404 Not Found error every time. You can make a form point to itself by removing the action attribute:
<form method="post">
I have that kind of site: (set of forms)
<select id="group_dropdown" name="selectinput">
<option value=0>all</option>
<option value=1>1 option</option>
<option value=2>2 option</option>
</select>
<form method="post" class="form-inline" id="form11">
<input type="text" name="1forminput" placeholder="0"></label>
<button type="submit" class="btn btn-success ml40" >save</button>
</form>
<form method="post" class="form-inline" id="form22">
<input type="text" name="forminput" placeholder="0"></label>
<button type="submit" class="btn btn-success ml40" >save</button>
</form>
I want to send data from this select (which is "mutual" for both of these forms) when any of these forms is sent (like an additional field withind sending form).
Is it a simple solution for that?
Add hidden inputs, and have valid markup with starting label tags etc
<select id="group_dropdown" name="selectinput">
<option value="0">all</option>
<option value="1">1 option</option>
<option value="2">2 option</option>
</select>
<form method="post" class="form-inline" id="form11">
<label>
<input type="text" name="1forminput" placeholder="0" />
<input type="hidden" name="select_value" />
</label>
<button type="submit" class="btn btn-success ml40">save</button>
</form>
<form method="post" class="form-inline" id="form22">
<label>
<input type="text" name="forminput" placeholder="0" />
<input type="hidden" name="select_value" />
</label>
<button type="submit" class="btn btn-success ml40">save</button>
</form>
Then fill in the hidden inputs when the select's value changes:
$('#group_dropdown').on('change', function() {
$('[name="select_value"]').val(this.value);
}).trigger('change');
And the select's value will be sent with both forms when they are submitted, and accessed like:
$_POST['select_value'];
you can add a new parameter after serializing your form like this:
$('#form11').submit(function(){
$.ajax({
type : 'POST',
url : 'url',
data : $('#form11').serialize() + "&select="+$('#group_dropdown').val()
}).done(function( data ) {
//callback
});
return false;
});