How to clear form data jquery? - javascript

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

Related

Show button when input type text, checkbox, radio and select tag are compiled

I've got a big help with this community to achieve on show a "next" button when some input tag are compiled.
I've used this code:
$('.name').keyup(function() {
$('#next1').toggle(this.value != '');
});
#next1 {
display: none;
}
But how can I modify it if in my page is more complex?
For example here i have some checkbox, radio input and select tag.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="name" type="text" name="name" />
<input type="text" name="phone" placeholder="Phone" />
<label class="radio-inline"><input type="radio" name="internet" value='Y'>Y</label>
<label class="radio-inline"><input type="radio" name="internet" value='N'>N</label>
<label for="degree">Degree</label><br/>
<input type="checkbox" name="degree" value="degree"> Degree
<select id='city' name='city' title='City' class='required1Sel form-control' >
<option value=''></option>
<option value='1'>NY</option>
<option value='2'>LA</option>
<option value='3'>MIAMI</option>
</select>
<div id="next1">
<input type="button" name="next" class="next action-button" value="Next" />
</div>
For the Select or the Checkbox you can use the change() function.
$('#city').change(function() {
$('#next1').toggle(this.value != '');
});
See this JSFiddle: https://jsfiddle.net/fpwo8e7e/1/

How to display results for a form in a div?

I am currently bringing a form into a div like this:
$('#m').load('http://example.com/converter/index.php #converty');
I need the results to display in the #m div, currently it takes me to the converter/index.php page, any help appreciated! The form that is loaded:
<form action="/converter/index.php" method="post" id="conversionForm" style="display: block;">
**do stuff**
</form>
FYI: the page with the script is at the root domain, while the converter is in the folder example.com/converter directory.
Prevent the default behavior of the form submit by using the .submit method on the form element, then collect your form data by using .serializeArray and do what you need to do with it.
Here is an example.
$( "form" ).submit(function( event ) {
var formData = $( this ).serializeArray();
$.each(formData, function(i, item) {
var $p = $("<p>");
$p.text(item.name + ": " + item.value);
$("#output").append($p);
})
event.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output"></div>
<form method="get" action="foo.php">
<div><input type="text" name="a" value="1" id="a"></div>
<div><input type="text" name="b" value="2" id="b"></div>
<div><input type="hidden" name="c" value="3" id="c"></div>
<div>
<textarea name="d" rows="8" cols="40">4</textarea>
</div>
<div><select name="e">
<option value="5" selected="selected">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select></div>
<div>
<input type="checkbox" name="f" value="8" id="f">
</div>
<div>
<input type="submit" name="g" value="Submit" id="g">
</div>
</form>

Clear all data and turn back to default settings

Goal:
When I clickon the clear all button and the data inside of the input box should be empthy and the dropdownlist should go back to default settings that is year 2009.
Problem:
I don't know how to do in order to make the dropdownlist to go back to default when you have pressed the button?
Info:
Please remember that I do not want to make any big changes in the current javascript/jquery sourcecode because it is used in production phase.
I would like to make a complementary to the current source code.
I tried using <input type="reset" value="Clear alll" name="clear_all"> but it doesn't work in long term with the current source code.
Thanks!
http://jsbin.com/qezesohake/edit?html,js,console,output
function df(data) {
$(data).find(':input').each(function () {
switch (this.type) {
case 'text':
case 'textarea':
$(this).val('');
break;
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form action=""" method="post">
<fieldset>
<input id="aaa" type="text" value="" />
<input id="bbb" type="text" value="" />
<select id="year">
<option value="2010">2010</option>
<option value="2009" selected="selected">2009</option>
<option value="2008">2008</option>
</select>
</fieldset>
<input type="button" value="Clear alll" name="clear_all" onclick="df(this.form)" />
</form>
<form action="#" method="post">
<fieldset>
<input id="aaa" type="text" value="" />
<input id="bbb" type="text" value="" />
<select id="year">
<option value="2010">2010</option>
<option value="2009" selected="selected">2009</option>
<option value="2008">2008</option>
</select>
</fieldset>
<input type="reset" value="Clear alll" name="clear_all" onclick="doSomething()">
</form>
<script>
function doSomething(){
alert('Do something!');
}
</script>
You don't need any javascript to clear form instead just replace your input type to reset button
<input type="reset" value="Clear all" name="clear_all"/>
Reset button does not require any onClick event to be passed. It works automatically.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form action=""" method="post">
<fieldset>
<input id="aaa" type="text" value="" />
<input id="bbb" type="text" value="" />
<select id="year">
<option value="2010">2010</option>
<option value="2009" selected="selected">2009</option>
<option value="2008">2008</option>
</select>
</fieldset>
<input type="reset" value="Clear alll" name="clear_all" />
</form>

Change Data Based on Radio Button

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>

Forced selection in hidden / Backend using Javascript OR JQuery

I have regular form like this.
<form action="/domainchecker.php" method="post">
<input type="text" name="domain" size="20">
<fieldset>
<select name="ext">
<option>.com</option>
<option>.net</option>
<option>.org</option>
<option>.us</option>
<option>.info</option>
<option>.biz</option>
<option>.mobi</option>
<option>.name</option>
<option>.tv</option>
<option>.me</option>
</select>
</fieldset>
<input type="submit" value="Go">
</form>
This selectbox enables to select only one option.
What I want is Forced selection in hidden / backend for the first 5 options regardless user select it or not.
How can I achieve this using JavaScript OR JQuery ?
Thanks.
Since you are using PHP you can try this:
<form action="/domainchecker.php" method="post">
<input type="hidden" name="ext[]" value=".com">
<input type="hidden" name="ext[]" value=".net">
<input type="hidden" name="ext[]" value=".org">
<input type="hidden" name="ext[]" value=".us">
<input type="hidden" name="ext[]" value=".info">
<input type="text" name="domain" size="20">
<fieldset>
<select name="ext[]">
<option>.com</option>
<option>.net</option>
<option>.org</option>
<option>.us</option>
<option>.info</option>
<option>.biz</option>
<option>.mobi</option>
<option>.name</option>
<option>.tv</option>
<option>.me</option>
</select>
</fieldset>
<input type="submit" value="Go">
</form>
Note the brackets in the fields' names. In your PHP script you'll need something like:
$extensions = $_POST['ext'];
foreach ($extensions as $ext) {
#do something
}
Note that the $extensions array will contain duplicates if the user selected one of the first 5 entries in the dropdown.
You can also use checkboxes instead of a dropdown like this:
<form action="/domainchecker.php" method="post">
<input type="text" name="domain" size="20">
<fieldset>
<input type="checkbox" name="ext[]" value=".com" selected="true">
<input type="checkbox" name="ext[]" value=".net" selected="true">
<input type="checkbox" name="ext[]" value=".org" selected="true">
<input type="checkbox" name="ext[]" value=".us" selected="true">
<input type="checkbox" name="ext[]" value=".info" selected="true">
<input type="checkbox" name="ext[]" value=".biz">
<input type="checkbox" name="ext[]" value=".mobi">
<input type="checkbox" name="ext[]" value=".name">
<input type="checkbox" name="ext[]" value=".tv">
<input type="checkbox" name="ext[]" value=".me">
</select>
</fieldset>
<input type="submit" value="Go">
</form>
The PHP is the same, without the duplicate issue
Add them server-side.
you can't do multiple selection on your select if attribute multiple is not set
like this, then have default selection by setting the option's attribute selected="selected"
<fieldset>
<select name="ext" size="5" multiple="multiple" >
<option>.com</option>
<option>.net</option>
<option selected="selected">.org</option>
<option selected="selected">.us</option>
<option selected="selected">.info</option>
<option>.biz</option>
<option selected="selected">.mobi</option>
<option>.name</option>
<option>.tv</option>
<option>.me</option>
</select>
</fieldset>

Categories