how to make reset button on Metro UI bootstrap? - javascript

i have some problem on my php code..
<form id="form1" method="post" action="proses.php">
<div class="input-control text area">
<textarea name="ipt1" type="textarea"><?php echo $data['data'];?></textarea>
</div>
<input name="submit-btn" type="submit" value="Submit"/>
<input name="clear-btn" type="reset" value="Clear" onclick="document.getElementById('form1').clear();"/>
</form>
the result is nothing happened when i click the "Clear" button, and "ipt" field is not cleared,
i need to help, if anyone know, please tell me.

The type='reset' button will reset all form values, but your problem is you have some default values coming from PHP. You can do the following:
<input name="clear-btn" type="reset" value="Clear" onclick="document.getElementsByName('ipt1')[0].innerHTML=''"/>
innerHTML here is used to access the content inside textarea.
DEMO

Related

required attribute is not working in select [duplicate]

I have a html form with input fields that require a value before submission and to achieve this I am using the required attribute in html5 Which is shown in the snippet below with the header Form One.
The problem is I'd like to add a confirm pop-up message after the delete button is clicked -- asking if the user wants to continue.
I have done this in the snippet shown below with the header Form Two but the problem is, the required attribute is not showing when the input field is empty and submitted.
The form gets submitted before the required method is triggered. Anyone has any ideas to solve this html5 incompetence?
THANKS
<h2>Form One </h2>
<form method="post" action="example.com" id="delete_page">
Name : <input type="name" required><br>
<input type="button" value="Cancel">
<input type="submit" value="Delete">
</form>
<hr>
<h2>Form Two </h2>
<form method="post" action="example.com" id="delete_page">
Name : <input type="name" required><br>
<input type="button" value="Cancel">
<input type="submit" onclick="confirm('Are you sure you want to submit')" value="Delete">
</form>
Try using onsubmit on your <form> rather than the button.
<h2>Form Two </h2>
<form method="post" action="example.com" id="delete_page"
onsubmit="return confirm('Are you sure you want to submit?')">
Name : <input type="name" required><br>
<input type="button" value="Cancel">
<input type="submit" value="Delete">
</form>
Browser form validation only kicks in on a submit event.
This will also prevent your form from submitting if the user chooses to "Cancel" the popup.

Reset all buttons and drop down lists

I am attempting to create an order form. I want it so that when you select the button to print out your order to also have it reset all the selected buttons. For the sake of simplicity I have given an extremely simplified version of my actual order form:
Html:
<form id="myForm">
<input type="checkbox">
<input type="button">
<input type="button" onclick="reset();"
</form>
Javascript:
function reset(){
document.getElementById("myForm").reset();
}
My Problem is that when I click the button to reset the page, the checkboxes stay selected.
If you want to just reset the for then use RESET button as bellow
<form id="myForm">
//YOUR FORM ELEMENT EITHER CHECKBOX OR OTHERS
<input type="reset" value='RESET'/>
</form>
Now there is no need to write any script code, type='reset' will automatic handle reset of all element inside your form tag.
There is an unbalanced tag in your html, also input type='reset' can be used to reset the form
function reset() {
document.getElementById("myForm").reset();
}
<form id="myForm">
<input type="checkbox">
<input type="button">
<input type="button" onclick="reset()" value="button reset">
<!--Adding new input type -->
<input type="reset" value="reset"> </form>
</form>
Problem is your HTML, the last input button is not closed properly
Here is working JSfiddle
<form id="myForm">
<input type="checkbox">
<input type="button">
<input type="button" onclick="reset();">
</form>
Javascript code
function reset(){
document.getElementById("myForm").reset();
}

submit form with <button type="submit"> to the same page

I have the following form:
<form method="post" action="" enctype="multipart/form-data">
<input type="text" name="name_car" />
<input type="submit" name="submit" class="btn" value="Add car" />
</form>
then to fetch the field use:
if($_POST['submit'])
{
$name_car= $_POST['name_car'];
....
}
So far so good. Now do the same with a button. Something of this kind (in the code below) and that the process to fetch the data is equal.
<form method="post" action="" enctype="multipart/form-data">
<input type="text" name="name_car" />
<button class="btn" type="submit" name="wizard-submit"></button>
</form>
The condition you are testing for to see if the form has been submitted is no longer true.
Original HTML:
name="submit"
New HTML:
name="wizard-submit"
The test in PHP:
if($_POST['submit'])
Additionally, your button has no value attribute, you'll need to add one (since otherwise $_POST['submit'] still isn't true)
You should also add some content to the button so that people know what it does.
<button class="btn" type="submit" name="submit" value="something">Submit</button>
If you want to use a button instead of input type submit replace $_POST["submit"] with your button name $_POST["wizard-submit"].
Then if you want your form be single page, change the form file extension to php and include your form process code in it.
NOTICE: use isset instead of vanilla if condition:
if ($_POST["submit"])
replace with:
if (isset($_POST["submit"]))
You can do that. Just put the path to the form in 'action' field.
did you try with the
if (isset ($_POST['submit']))
now the if condition only will be true if there are data, if it's null will be false.
The page with the form has to be saved as a PHP- document with the following code:
<form action="" method="post" enctype="multipart/form-data">
<input type="text" name="new_car" id="new_car" />
<input type="submit" name="submit" class="btn" value="new_car" />
</form>
if($_POST['submit']){
$var=$_POST['submit'];
}

Resetting textbox in javascript

I'm working on a project for school and I'm stuck on how to reset all the textboxs on the page. This is what my reset button looks like:
<form name="Reset">
<input type="button" value="New ordering sheet." onClick="Reset()">
</form>
I don't know what to do for the function, I have no code for the Reset() function:
function Reset() {}
Have a look at the following questions, there are a few ways of doing it in them:
How to clear all textboxs in a DIV using jQuery?
JQuery how to clear all the input:textfields of a .class on a form. Not working for me
i think this can help!! just have a 'reset' input inside your form :-)
<form name="myform" action="http://something" method="POST">
<input type="text" size="25" value="Enter your name here!">
<input type="submit" value="Send me your name!">
<input type="reset" value="Reset!">
</form>

jquery form submit changing values to whole form

In my jquery I have
$('form#submit :input').val("");
Which is changing the value of the form to empty after success:. Problem is that its changing every value of everything in the form.
<form id="submit" method="post" name="submit" action=""><input type="hidden" name="word" id="word" value="<?=$word?>"><textarea name="sentence" id="sentence" cols="45" rows="5"></textarea><input type="submit" value="Submit" style="font-size:2em; vertical-align:bottom" /></form>
So the textarea and submit button are being blanked out. I want the textarea to blank out, but not the button. Is there a way to just specify the button?
Do it this way
$('form#submit :input').not('input[type="submit"]').val("");
Check Fiddle

Categories

Resources