I have two form which works after form submit on change. I want add button which will reset value in form to deafult. I added below juqery but works only first value.
<form action="xxxx.php" method="post">
<select name="first" onchange="this.form.submit()">
<option>1</option>
<option>2</option>
<option>3</option>
</form>
<form action="xxxx.php" method="post">
<select name="two" onchange="this.form.submit()">
<option>A</option>
<option>B</option>
<option>C</option>
</form>
<a href="#" id="clean" class="btn btn-transparent"><span>Clean</span><
$("#clean").click(function () {
$('select[name="first"]').val("1").trigger('change');
$('select[name="two"]').val("A").trigger('change');
});
/* Create a delegated event listener that process the `button` click events. */
document.addEventListener('click',e=>{
/*
if the currently clicked element is the button then query the dom
for all forms and reset the elements within by calling the `reset` method
on the form
*/
if( e.target instanceof HTMLSpanElement && e.target.parentNode instanceof HTMLAnchorElement ){
// an anchor element is not a button - prevent the default behaviour!
e.preventDefault();
// find the forms, iterate through and call `reset()` on each form.
document.querySelectorAll('form').forEach(form=>form.reset())
}
});
<!--
added options to the select and a new input to each form so that the effect of the
`button` click can be observed.
-->
<form action="xxxx1.php" method="post">
<select name="status_date" onchange="this.form.submit()">
<option>1
<option>2
<option>3
<option>5
<option>6
<option>8
</select>
<input type='text' name='sport' />
</form>
<form action="xxxx2.php" method="post">
<select name="status_employees" onchange="this.form.submit()">
<option>A
<option>B
<option>C
<option>F
<option>P
<option>T
</select>
<input type='text' name='fruit' />
</form>
<span>Clean</span>
Related
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 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>
I have a sample code:
$category_id = $_POST['category_id'];
<form action="search.php&category_id=$category_id" method="post">
<p class="categories">
<select name="category_id">
<option value="1">Category 1</option>
<option value="2">Category 2</option>
</select>
</p>
<p class="submit">
<input class="button" type="submit" value="Tìm game" />
</p>
</form>
When I submit form is URL is search.php&category_id=0
How to fix this problem, URL is search.php&category_id=1 // OR 2
Change your <form> tag to
<form action="search.php?category_id=<?php echo $category_id?>" method="get">
The category_id in the action attribute will have it's value replaced by the value of the select.
Change method="post" to method="get" if you only want to send get data.
Keep method="post" if you want to take the user to that url and submit post data.
$("select").onchange(function(){
var id = $(this).val();
$("form").attr("action", $("form").attr("action") + "&category_id=" + id);
});
I have a form say i have selected Volva from drop down box . So without clicking on submit button when i move to next field that is <input> the value that is volva should get store in php variable
<html>
<body>
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<input type="text" name="abc" />
</form>
</body>
</html>
Put event on select, onBlur = saveValue();
<select name="cars" onBlur = "saveValue(this.value);">
saveValue should be a js function, which then sends an ajax request to the server.
I have a drop down list that has options that need to be passed through a query string. How would I go about doing this? Also, would anyone be able to list a way to do this both using a button and without using a button? Thank you!
<form method="get">
<select multiple="multiple" name="things[]">
...
</select>
<input type="submit" value="submit"/>
</form>
<?php
if(isset($_GET['things'])) {
foreach($_GET['things'] as $thing) {
echo $thing . '<br />';
}
}
?>
Based on Jani's response, are you wanting to have the form submit without a button but still have a backup button if the user doesn't have javascript? You can use noscript to cover that:
<form action="script.php" method="get">
<div>
<select name="options" onchange="this.form.submit()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<noscript>
<input type="submit" value="Go!" />
</noscript>
</div>
</form>
Without a button:
<form method="get">
<select multiple="multiple" name="things[]" onchange="this.form.submit()">
...
</select>
</form>