Reset button not working in html (php) - php

I have placed my input type reset button inside form but its still not working.
<form method='post' action='process/update_news_action.php' >
<tr>
<td colspan='2' class="col-md-4">Update News Content</td>
</tr>
<tr >
<td colspan='2' class="col-md-8"><textarea name="news" id="text"><?php echo $rows["news"] ; ?></textarea></td>
</tr>
<tr>
<td class="col-md-4"><input name='submit' type="submit" value='Publish' class="btn btn-success" /></td>
<td class="col-md-4"><input name='reset' type="reset" value='Reset' class="btn btn-primary" /></td>
</tr>
</form>
I have also tried <button type="reset" value="Reset">Reset</button>

If you're expecting the reset button to empty out the form, that's not the way reset works. It will reset the form fields to what they were when the page was loaded. In this case, you have pre-filled content in your form, so clicking reset will simply undo any user changes since the page-load.
To reset all form fields to blank/nothing, you will need javascript. First get the form DOM object, then iterate over all the input types you want to reset, and set each field.value = '' (input text types / textarea), or modify attributes (for select, radio, checkbox etc.) to deselect and so on. Turn that into a function (there's probably a ready piece somewhere out there, I seem to have lost mine), and attach it to your reset button's click event -- or your form's reset event.
Edit: On a quick search, here's a basic example of how to clear a form to empty values.
Edit: If you're not concerned over anything but text fields, here's a simple way to do this. We add a "reset" event listener to the form, and when it fires, all fields are set to empty string.
function setFormCleanReset(formId) {
let formEl = document.querySelector(formId);
// Add event listener for reset event
formEl.addEventListener('reset', function(e) {
// Iterate all non-hidden fields, set values to ''
for(const fieldEl of formEl.querySelectorAll('input:not([type=hidden])')) {
// #todo check input type and handle "select" etc.
fieldEl.setAttribute('value', '');
}
});
}
// usage: setFormCleanReset('my_form_id');

I think you forgot to insert form tag in your html. It should be work if you insert button code into <form>..button code here..</form>.Something like this:
<form>
<input type="text">
<td class="col-md-4">
<input name='reset' type="reset" value='Reset' class="btn btn-primary" />
</td>
</form>

You should place the <input type="reset"> in a form like this,it will definitely work
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Tring Reset</title>
<style>
</style>
</head>
<body>
<form>
<input type="text"></input>
<input type="text"></input>
<input type="text"></input>
<input type="text"></input>
<input type="text"></input>
<input type=reset></input>
</form>
</body>
</html>

You just need to put your reset button inside form. In following code I have taken one input box also an an example. I hope it helps.
<form>
<input type="text" />
<table>
<td class="col-md-4">
<input name='reset' type="reset" value='Reset' class="btn btn-primary" />
</td>
</table>
</form>

can you please try without echo anything inside textarea
try this
<form method='post' action='process/update_news_action.php' >
<tr>
<td colspan='2' class="col-md-4">Update News Content</td>
</tr>
<tr >
<td colspan='2' class="col-md-8"><textarea name="news" id="text"></textarea></td>
</tr>
<tr>
<td class="col-md-4"><input name='submit' type="submit" value='Publish' class="btn btn-success" /> </td>
<td class="col-md-4"><input name='reset' type="reset" value='Reset' class="btn btn-primary" /> </td>
</tr>
</form>
I think reset button is working fine.

Excuse Me! You are using default value in input attribute. Remove default value from it. Then type anything then click rest it will make your text box empty.

I have a form submitting variables to another PHP file. In the second file, there is a button that leads back to the first file for eventual correction od submitted values. The values are retained in the form by $_POST. The "Reset" button works only when the form is used the first time (empty). After submitting and return from the second PHP file, the "Reset" doesn't do anything, no values are cleared. The button seems to be fully inactive.
<button title="<?php echo $lang['reset-button-hint']; ?>" alt="TOOLTIP 1" type="reset" name="reset"><?php echo $lang['reset-button']; ?></button>

#Jaspreet Kaur You need to add form tag outside the table. Please check my previous comment for it.

Related

Automatically click the button for you if there is a date

I have a file called file.php which has:
$row2= pg_fetch_array($result2);
$website = 'http://validate/?id='.$newDateString;
<tbody>
<tr>
<td><?php echo'<a href="'.$website.'">'. $row['name']; ?></td>
The code sends to a file named jasmine.php the url with the date since jasmine contains a calendar. It sends it when you click on the date which contains a link to jasmine.
Jasmine.php:
<div id="content">
<h2>Hello, Please let me know which date you are looking for </h2>
<div><label style="font-size: 14pt; font-family: Verdana;">Posting Date: </label></div><br />
<input type="text" id="date" value= "<?php echo $_GET['id']?>" class="css-input" placeholder="Posting Date..." readonly="readonly" /><br /><br />
<input type="button" id="validate" value="Let's work!" class="btn" />
<input type="button" id="clear" value="Wanna go Again?" class="btn" />
</div>
<div id="contentarea2" style="display: none;">
<h2>Results:</h2>
<div class="view_alerts">
<table>
<tr>
<td>
Code
</td>
<td>
# Posted
</td>
</tr>
<tbody id="view_alerts_tbody">
</tbody>
</table>
</div>
</div>
In Jasmine, I get the date already written for me from file.php, all I need to do is click the button so it could show me a table, is there a way, that it clicks the button on its own if theres a date written, so when I go on that link, it already puts the date and takes me to the table in jasmine.php
Taking the code from the answer above the if statement here should evaluate the input fields value (id is '#date'). An empty value will default to false hence the ! before the selector.
jQuery(document).ready(function()
{
if(!$('#date').val()) {
jQuery("#Your-Button-ID").click();
}
});
You can use below JQuery code for your purpose. When page load is completed (i.e. Page is ready)
jQuery(document).ready(function()
{
jQuery("#Your-Button-ID").click();
});

different form action based on two buttons

The form that I'm trying to work has two buttons:
1: for viewing the submitted information and
2: for saving the confirmed information.
Part of my form:
$sql="INSERT INTO applicant_information
(entrepreneur_name,enterprise_name,.....) values
('".$_POST['entrepreneur_name']."','".$_POST['enterprise_name']."','".$_POST['address']."'...)
<form method="post" action="business_form.php">
<table width="70%" cellspacing="2px" cellpadding="5px"style="border:1px solid black;border-collapse:collapse;">
<th colspan="8"align="left" style="border:1px solid black;"><b>Personal
Information</th>
<tr>
<td width="18" rowspan="2" style="border:1px solid black;">1</td>
<td width="142" rowspan="2"style="border:1px solid black;" >Name</td>
<td style="border:1px solid black;" colspan="2">Entrepreneur</td>
<td colspan="2"style="border:1px solid black;"><?php echo $_POST['entrepreneur_name']?>
<input id="entrepreneur_name" name="entrepreneur_name" type="hidden" value="<?php echo $_POST['entrepreneur_name']?>" />
</td>
</tr>.....
//rest of the form
<input type="submit" name="edit" style="width:10%"value="Back to edit" />
<input type="submit" name="reg"style="width:10%"value="Submit" />
What I'm trying to do is to run the query when the user hit the submit button. Any idea how to do that?
What I usually do is just have one button change the form's destination on click, then submit it. So for example:
<form action="login.php" method="POST" id="myform">
<input name="username">
<input type="password" name="password">
<input type="submit" value="Login">
<button id="js-register">Register</button>
</form>
With
$('#js-register').click(function() {
$('#myform').attr('action', 'register.php').submit();
});
Or you could have both buttons be Javascript'd and bind both of them for consistency's sake - up to you.
HTML
<form action="handle_user.php" method="POST />
<input type="submit" value="View" name="view" />
<input type="submit" value="Submit" name="submit">
</form>
Check condition in php as following way...
if($_POST["view"]) {
//User hit the view button, handle accordingly
}
if($_POST["submit"]) {
//User hit the Submit information , handle accordingly
}
You need to track the button named "reg". So right after the $sql string, you can put the following:
<?php
if (isset($_POST['reg'])) {
mysql_query($sql);
if (mysql_affected_rows() > 0) {
echo "REgistration completed";
}
else {
echo "System could not process the registration";
}
}
?>
Hope that will help you.
You could make the "edit" be a plain button, instead of a submit type. And bind a click event to it, which could either redirect to the editable form or make the form editable (which ever suits you best). Then the "reg" submit could work as it does currently to save the data.

href hyperlinks as POST

I'm wondering which is the best way to map <a href=...></a> hyperlinks performing a HTTP GET to perform a HTTP POST (I'd like to avoid passing all variables in the URL)? For instance, the 2 hrefs below. Furthermore, I would like also to get rid of the submit button and use a regular <a href=...></a> hyperlink. Any suggestions?
<form action="test.php?action=update" method="post" id="cart">
<table>
<tr>
<td>
<a href="test.php?action=delete&id=<?php echo $id ?>" class="r">
remove
</a>
</td>
<td>
add
</td>
</tr>
<tr>
...
</tr>
</table>
<div> <button type="submit">Update</button> </div>
</form>
I'd suggest using jQuery.post and click. When the link is clicked, submit the data via something like this
$('.r').on('click', function() {
$.post('test.php', {key:'value', key2:'value2'}, function(data) {
//error check here
});
return false;
});
As far as i know you can't perform any POST requests with links. You can make your GET requests with links and php as a fallback for users with javascript disabled and for those who have javascript enabled cancel default behavior for links with javascript and make with ajax your POST request with help of AJAX.
for example:
<a class="submit" href="hallo.html?hello=world&test=yes">Test</a>
and js(i used jquery) would be:
$('.submit').click(function(){
var urlPairs = this.href.split('?')[1].split('&'),
total = urlPairs.length,
current = [],
data = {};
for(;total;) {
current = urlPairs[--total].split('=');
data[current[0]] = current[1];
}
$.post('test.php', data);
return false;
});
​
you could also write your POST function other for more info check jQuery post function doc
P.S. I wounder, if you are using FORM any way why wouldn't you use submit button, is it because of CSS styling? You could style it the same way like any other element(with some tweaks in some browsers).
You can keep the input tags as hidden in your form to submit them as POST.
<td>remove</td>
<td>add</td>
Rewrite the above using two forms, having <input type="hidden" name="id />
and buttons <input type="button" name="delete" />
etc..
if you run print_r($_POST) in your action script. You'll get a list of the buttons and the values of the hidden fields. Now, you can write conditions for the actions to run. I didn't write complete code here, just passing the idea.
Edit: See the example below.
<form method="post" id="cart">
<table>
<input type="hidden" name="id" value='some value' />
<input type="submit" name="action" value="delete" />
<input type="submit" name="action" value="add" />
</tr>
<tr>
...
</tr>
</table>
<div><button type="submit">Update</button></div>
</form>
<?php print_r($_POST); ?>

How do I use two submit buttons, and differentiate between which one was used to submit the form? [duplicate]

This question already has answers here:
Two submit buttons in one form
(23 answers)
Closed 8 years ago.
Currently, I have an HTML form where the user will enter a title and text for an article. When it is time to submit, they are presented with two buttons. One is to 'save' their article without publishing it, and the other is to 'publish' the article and make it public.
I'm using PHP, and I am trying to figure out how to tell which button was used, in order to store the appropriate corresponding value in the database.
<td>
<input type="submit" class="noborder" id="save" value="" alt="Save" tabindex="4" />
</td>
<td>
<input type="submit" class="noborder" id="publish" value="" alt="Publish" tabindex="5" />
</td>
Probably should have mentioned this earlier, but I cannot assign the buttons values because the button is an image, so the text would show up above it.
Give each input a name attribute. Only the clicked input's name attribute will be sent to the server.
<input type="submit" name="publish" value="Publish">
<input type="submit" name="save" value="Save">
And then
<?php
if (isset($_POST['publish'])) {
# Publish-button was clicked
}
elseif (isset($_POST['save'])) {
# Save-button was clicked
}
?>
Edit: Changed value attributes to alt. Not sure this is the best approach for image buttons though, any particular reason you don't want to use input[type=image]?
Edit: Since this keeps getting upvotes I went ahead and changed the weird alt/value code to real submit inputs. I believe the original question asked for some sort of image buttons but there are so much better ways to achieve that nowadays instead of using input[type=image].
Give name and values to those submit buttons like:
<td>
<input type="submit" name='mybutton' class="noborder" id="save" value="save" alt="Save" tabindex="4" />
</td>
<td>
<input type="submit" name='mybutton' class="noborder" id="publish" value="publish" alt="Publish" tabindex="5" />
</td>
and then in your php script you could check
if($_POST['mybutton'] == 'save')
{
///do save processing
}
elseif($_POST['mybutton'] == 'publish')
{
///do publish processing here
}
If you can't put value on buttons. I have just a rough solution. Put a hidden field. And when one of the buttons are clicked before submitting, populate the value of hidden field with like say 1 when first button clicked and 2 if second one is clicked. and in submit page check for the value of this hidden field to determine which one is clicked.
You can use it as follows,
<td>
<input type="submit" name="save" class="noborder" id="save" value="Save" alt="Save"
tabindex="4" />
</td>
<td>
<input type="submit" name="publish" class="noborder" id="publish" value="Publish"
alt="Publish" tabindex="5" />
</td>
And in PHP,
<?php
if($_POST['save'])
{
//Save Code
}
else if($_POST['publish'])
{
//Publish Code
}
?>

Issue checking value of form input with jQuery

I want to perform an if statement based upon the value of a hidden input within myform.
the scenario is that I have a table consisting of tests. Each test is essentially its own form. the hidden input basically contains 'YES' if the test has a password attached. I want to prompt the user to enter the password if that is the case when they attempt to execute a particular test (submit the form).
so here is my code I am attempting:
$("#submit").live('click', function(event) {
if ($(this).parent().find(':input:hidden[name=has_password]').val() == 'YES') {
$('.messagepop').remove();
$(this).parent().append('<div class="messagepop pop"><p><label for="password">Enter test password</label><input type="text" size="30" name="pass" id="pass" /></p><p><input type="button" id="submitPass" value="GO" id="pass_submit"/> or <a class="close" href="/">Cancel</a></p></div>');
$(".pop").slideFadeToggle(function() {
$("#pass").focus();
});
return false;
}
});
Without the if statement the code works: on clicking a particular button within a form, another small password entry form pops up. However I only want the form to pop up if a value of a hidden input is 'YES'.
I have checked that values are present in the hidden input.
I imagine I am using the jQuery slightly wrong as I am a beginner. So can somebody identify a better way of performing the check?
Many thanks,
EDIT (jsfiddle with html etc):
jsfiddle
Your HTML is extremely malformed. The <tr> and <form> end-tags are mismatched, you've got a <form> tag directly inside the <tr>, which is not allowed, you haven't self-closed your <input /> tags and you have duplicate id's on the same page.
<tr>
<form name='myform' method='post' action='test_sim.php'>
<input name='test' type='hidden' value='1'>
<input type='hidden' name='has_password' value='NO'>
<td>TEST 1</td>
<td>B352</td>
<td>10</td>
<td>2011-05-12 06:00:00</td>
<td>2011-05-12 12:00:00</td>
<td>06:00:00</td>
<td><input id='submit' type='button' value='execute test'></td>
</tr>
</form>
It should be like this:
<tr>
<td>TEST 1</td>
<td>B352</td>
<td>10</td>
<td>2011-05-12 06:00:00</td>
<td>2011-05-12 12:00:00</td>
<td>06:00:00</td>
<td>
<form name='myform' method='post' action='test_sim.php'>
<input name='test' type='hidden' value='1' />
<input type='hidden' name='has_password' value='NO' />
<input class='submit' type='button' value='execute test' />
</form>
</td>
</tr>
Fixing the HTML solves your problem: http://jsfiddle.net/brianpeiris/ezFgU/16/
You should use the W3C Validator tool to check your HTML so that you can prevent these types of issues.
Edit: As mcgrailm mentioned, your id attributes are duplicated. jQuery is forgiving here, it seems, that's why the above jsFiddle works. You should use a class to identify your submit buttons and use the corresponding $('.submit') selector to attach a click handler.
i believe
if ($(this).parent().find(':input:hidden[name=has_password]').val() == 'YES')
should be
if ($(this).parent().find('input[name=has_password]:hidden').val() == 'YES')
i think your selector is incorrect try this
$("#submit").live('click', function(event) {
if ($(this).parent().find('input[name="has_password"]:hidden').val() == 'YES') {
$('.messagepop').remove();
$(this).parent().append('<div class="messagepop pop"><p><label for="password">Enter test password</label><input type="text" size="30" name="pass" id="pass" /></p><p><input type="button" id="submitPass" value="GO" id="pass_submit"/> or <a class="close" href="/">Cancel</a></p></div>');
$(".pop").slideFadeToggle(function() {
$("#pass").focus();
});
return false;
}
});
WORKING DEMO

Categories