jQuery clone form submit not working - javascript

So I'm having some basic html, that contains of a modal box with a <form>, I take that html and append it to a div next to <body>, everything displays correctl only that the form submit doesn't work, it doesn't work via enter or submit button.
$(document).ready(function() {
var windowWidth = (parseInt(window.innerWidth) - 15) + 'px',
windowHeight = $('body').css('height');
$tk = $("#take-survey");
var $html = $tk.css({'width': windowWidth, 'height': windowHeight}).clone();
$tk.remove();
$($html).appendTo(".put-me");
$('body .put-me #take-survey').show();
});
<div id="take-survey" style="width: 1843px; height: 2120px; display: block;">
<div class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
Dear User,<br><br>
Our goal is to provide the best service possible. Please take a 1 minute to complete the following customer service questionnaire. Your comments will enable us to see how we're doing overall and find out how we can improve.<br> It only takes 1 minute!
</div>
<div class="modal-body">
<form name="newSurvey" action="index.php?id=25&L=1&tx_arxsurvey_fesurvey[action]=create&tx_arxsurvey_fesurvey[controller]=Survey" method="post">
<div style="display: none">
<input type="hidden" name="tx_arxsurvey_fesurvey[__referrer][extensionName]" value="ArxSurvey">
<input type="hidden" name="tx_arxsurvey_fesurvey[__referrer][controllerName]" value="Survey">
<input type="hidden" name="tx_arxsurvey_fesurvey[__referrer][actionName]" value="new">
<input type="hidden" name="tx_arxsurvey_fesurvey[__hmac]" value="a:3:{s:9:"newSurvey";a:4:{s:6:"whyUse";i:1;s:13:"otherServices";i:1;s:11:"suggestions";i:1;s:8:"tellMore";i:1;}s:6:"action";i:1;s:10:"controller";i:1;}77fcb50f86112b3acd1aa7f6eff2b4adeac7a664">
</div>
<label for="userProfile">
What is your user profile? <span class="required">(required)</span>
</label>
<select name="tx_arxsurvey_fesurvey[newSurvey][userProfile]">
<option value="Real Estate Agency">Real Estate Agency</option>
<option value="Real Estate Marketing">Real Estate Marketing</option>
<option value="Floor Drawing Services">Floor Drawing Services</option>
<option value="Project Developers">Project Developers</option>
<option value="Property Management">Property Management</option>
<option value="Interior Design">Interior Design</option>
<option value="Architect">Architect</option>
<option value="Private User">Private User</option>
<option value="Furniture Retailer">Furniture Retailer</option>
</select>
<label>If other please specify:</label>
<input type="text" name="tx_arxsurvey_fesurvey[newSurvey][userProfileOther]">
<label for="useStatus">
How often you use PlanningWiz? <span class="required">(required)</span>
</label>
<div class="hold-radios">
<input type="radio" id="dailyUse" name="tx_arxsurvey_fesurvey[newSurvey][useStatus]" value="Daily">
<label for="dailyUse">Daily</label>
<input type="radio" id="weeklyUse" name="tx_arxsurvey_fesurvey[newSurvey][useStatus]" value="Weekly">
<label for="weeklyUse">Weekly</label>
<input type="radio" id="monthlyUse" name="tx_arxsurvey_fesurvey[newSurvey][useStatus]" value="Monthly">
<label for="monthlyUse">Monthly</label>
<input type="radio" id="rarelyUse" name="tx_arxsurvey_fesurvey[newSurvey][useStatus]" value="Rarely">
<label for="rarelyUse">Rarely</label>
</div>
<label for="whyUse">
Why are you using a room planner? <span class="required">(required)</span>
</label>
<textarea rows="15" cols="40" name="tx_arxsurvey_fesurvey[newSurvey][whyUse]"></textarea>
<label for="otherServices">
Are you using other room planning services as well? If so, why? <span class="required">(required)</span>
</label>
<textarea rows="15" cols="40" name="tx_arxsurvey_fesurvey[newSurvey][otherServices]"></textarea>
<label for="suggestions">
What suggestions for improvement would you have? <span class="required">(required)</span>
</label>
<textarea rows="15" cols="40" name="tx_arxsurvey_fesurvey[newSurvey][suggestions]"></textarea>
<label for="tellMore">
I'd also like to tell you that: <span class="required">(required)</span>
</label>
<textarea rows="15" cols="40" name="tx_arxsurvey_fesurvey[newSurvey][tellMore]"></textarea>
</form></div>
<div class="modal-footer">
<input class="save" type="submit" name="" value="Create new">
<input type="button" value="Skip for now!" class="skip">
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>

Submit button not inside the form so close the </form> tag after the submit button
<div class="modal-footer">
<input class="save" type="submit" name="" value="Create new">
<input type="button" value="Skip for now!" class="skip">
</div>
</form> // add form close here

You need to reinitialize the form. Just like this:
$(document).find("form").trigger("create")
"In JQM 1.4 you can simply call $(your_form).enhanceWithin() to have JQM render all elements inside your cloned form. In JQM 1.3.2 this is not available, so I guess you would have to initialize things using trigger("create") for example."
There are a same issue here

Related

Javascript Validation on form

Just starting with HTML and JavaScript, been set an assignment to use JavaScript for some logical function. I have created a form and wanted to check that the elements are filled in correctly. I have tried to look at the duration and ideally wanted to set a minimum value upon submission, however it is not working as expected.
I have to use codepen for the assignment which has a separate column for JavaScript but I have put the code used in the form, not sure what I need to do.
Any help would be greatly appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Student recovery recording</title>
<link rel="stylesheet" href="newstyle.css" />
<meta charset="UTF-8" />
</head>
<body>
<header><h1>Student Recovery Recording</h1></header>
<main>
<div class="container1">
<p>form content goes here</p>
</div>
<div class="container">
<form name="myForm" form action="" method="get">
<div class="form-row">
<label for="name"> Instructor Name:</label>
<input type="text" id="name" />
</div>
<div class="form-row">
<label for="Exam"> Exam Code:</label>
<select name="Exam" id="Exam">
<option value="">--Please choose the correct Exam code--</option>
<option value="code1">AT017</option>
<option value="code2">CT154</option>
<option value="code3">AT317</option>
<option value="code4">BT141</option>
</select>
</div>
<div class="form-row">
<label for="reason"> Reason For Training:</label>
<select name="reason" id="reason">
<option value="">
--Please select the correct reason for training
</option>
<option value="train1">ATT</option>
<option value="train2">ITT</option>
<option value="train3">ETT</option>
</select>
</div>
<div class="form-row">
<label for="date">Date:</label>
<input type="date" id="date" />
</div>
<div class="form-row">
<label for="Studentname"> Student Name:</label>
<input type="text" id="Studentname" />
</div>
<div class="form-row">
<label for="Duration">Duration:</label>
<input type="time" id="Duration" min="1:00" />
</div>
<div class="form-row">
<textarea name="comment" rows="4" cols="50">
Enter details of work carried out and KLP's covered here...</textarea
>
</div>
<input type="submit" value="Submit" onclick="myFunction()" />
<script>
function myFunction() {
var text;
if (document.getElementById("Duration").validity.rangeUnderflow) {
text = "Not enough Recovery Time";
} else {
text = "Recovery Time acceptable";
}
document.getElementById("myForm").innerHTML = text;
}
</script>
</form>
</div>
</main>
<footer>
<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img
style="border: 0; width: 88px; height: 31px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!"
/>
</a>
</p>
</footer>
</body>
</html>
Maybe you can use setTimeOut() method to the set duration trigger the method when the user load the window or the user starting to press the key.
example:
<div class="form-row">
<label for="name"> Instructor Name:</label>
<input type="text" id="name" onkeypress="setTimeout(showSubmitButton(), 5000)" /> //trigger showSubmitButton() when key pressed wait 5 sec then run showSubmitButton()
<input type="submit" id="submit" value="submit" style="display:none">// set display to none for hiding the button
</div>
<script>
function showSubmitButton() {
document.getElementById("submit").style.display = "block" // show the button after 5 sec
}
</script>
hope this help you

1 button for 2 forms where one of the forms is a <select>

I got 2 forms, one of the forms is a select which can show 2 hidden divs. When one of the options is selected it should send the value to the database. Now the second form is where the button is. When this button is pressed it should submit both forms. I already tried some things, but they don't seem to work. Anyone has an idea?
The first 'main' form:
<form class="areaType" id="formSelect" action="saveData.php" method="POST">
<p>Are you a student showcasing a project or a school institution looking to collaborate?</p>
<select id="textAreaType" onchange="chooseType(this)" name="type">
<option value="0" selected></option>
<option value="1">Student project</option>
<option value="2">School institution project</option>
</select>
</form>
The second (hidden) form:
<form class="textAreas" id="formSchool" action="saveData.php" method="POST">
<div class="fieldsForSquare">
<p>Fill in these fields for your square</p>
</div>
<div class="areaTitle">
<p>Title</p>
<textarea type="text" id="textAreaTitle" name="summary" required></textarea>
</div>
<div class="areaDescription">
<p>Short description</p>
<textarea maxlength="200" type="text" id="textAreaDescription" name="shortSummary" required></textarea>
</div>
<div class="areaPersons">
<p>How many people are you looking for and how big is the team going to be?</p>
<input type="number" maxlength="2"
oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
id="textAreaPersons" required>
<input type="number" maxlength="2"
oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
id="textAreaPersons2" required>
</div>
<div class="areaHours">
<p>Is it fulltime or parttime?</p>
<select id="textAreaHours" required>
<option value="0" selected></option>
<option value="1">Fulltime</option>
<option value="2">Parttime</option>
</select>
</div>
<div class="fieldsForPage">
<p>Fill in these fields for your page</p>
</div>
<div class="areaAbout">
<p>What is it about?</p>
<textarea type="text" id="textAreaAbout" required></textarea>
</div>
<div class="areaLookingFor">
<p>What/who are you looking for?</p>
<textarea type="text" id="textAreaLookingFor" required></textarea>
</div>
<div class="areaCollab">
<p>U wish to add other accounts to this project?</p>
<textarea type="text" id="textAreaCollab"></textarea>
</div>
<div class="areaImg">
<p>Add some images of the product/project.</p>
<input id='files' type='file' multiple />
<output id='result' />
</div>
<div class="submitButton">
<input type="submit" value="submit" onclick="submitForms()">
</div>
</form>
The third (hidden) form:
<form class="textAreas" id="formStudent" action="saveData.php" method="POST">
<div class="fieldsForSquare">
<p>Fill in these fields for your square</p>
</div>
<div class="areaTitle">
<p>Title</p>
<textarea type="text" id="textAreaTitleStudent" name="summary" required></textarea>
</div>
<div class="areaDescription">
<p>Short description</p>
<textarea maxlength="200" type="text" id="textAreaDescriptionStudent" name="shortSummary"
required></textarea>
</div>
<div class="fieldsForPage">
<p>Fill in these fields for your page</p>
</div>
<div class="areaAbout">
<p>What is it about?</p>
<textarea type="text" id="textAreaAbout" required></textarea>
</div>
<div class="areaCollab">
<p>U wish to add other accounts to this project?</p>
<textarea type="text" id="textAreaCollab"></textarea>
</div>
<div class="areaImg">
<p>Add some images of the product/project.</p>
<input id='files' type='file' multiple />
<output id='result' />
</div>
<div class="submitButton">
<input type="submit" value="submit" onclick="submitForms_()">
</div>
</form>
The Javascript code for submitting the forms depending on which value is selected:
function submitForms() {
document.getElementById('formSelect').submit();
document.getElementById('formSchool').submit();
}
function submitForms_() {
document.getElementById('formSelect').submit();
document.getElementById('formStudent').submit();
}
the PHP code where it first checks if an option is selected and then (it should) insert it:
<?php
include('../general.config.php');
print_r($_POST);
$summary = $_POST['summary'];
$shortSummary = $_POST['shortSummary'];
$type = $_POST['type'];
if(isset($type)){
$query = $db->prepare("INSERT INTO `project`( `type`, `short_summary`, `summary`) VALUES (?, ?, ?)");
$query->bindPARAM(1,$type, PDO::PARAM_INT);
$query->bindPARAM(2,$shortSummary, PDO::PARAM_STR);
$query->bindPARAM(3,$summary, PDO::PARAM_STR);
if($query->execute())
echo "succes!";
else
echo "NO SUCCES!";
}
?>
chooseType() function:
function chooseType(select) {
if (select.value == 1) {
document.getElementById('mainAddProjectStudentID').style.display = 'block'
document.getElementById('mainAddProjectSchoolID').style.display = 'none'
} else if (select.value == 2) {
document.getElementById('mainAddProjectSchoolID').style.display = 'block'
document.getElementById('mainAddProjectStudentID').style.display = 'none'
} else if (select.value == 0) {
document.getElementById('mainAddProjectSchoolID').style.display = 'none'
document.getElementById('mainAddProjectStudentID').style.display = 'none'
}
}
When no option is selected:
When one of the options is selected:
First thing is you cannot submit two forms with one submit button unless you use ajax. Neither is this the best way to deal with the situation.
I will answer the question in two parts. One where you have three forms and are able to send data from both the forms and then a better way to do this.
Your select option has static values that represent either of the forms. You can simply add a hidden input field to have your form data include the correct type.
<!-- Hidden Input Tag for the formStudent form-->
<input type="hidden" name="type" id="studentType" value="1">
<!-- Hidden Input Tag for the formSchool form-->
<input type="hidden" name="type" id="schoolType" value="2">
Now when either of the forms are submitted your objective of having the type variable populated correctly is met.
One of the right and easier way of doing this would be to use just one form instead of three. You can toggle display of the forms with the select tag, like you are already doing. Use unique names for your fields and in your php script use $type variable to conditionally populate the variables $summary, $shortSummary and $type.
Demonstration (adding just the basic elements)
<form action="saveData.php" method="POST">
<select id="textAreaType" onchange="chooseType(this)" name="type">
<option value="0" selected></option>
<option value="1">Student project</option>
<option value="2">School institution project</option>
</select>
<!-- Student Form> -->
<div id="mainAddProjectStudentID" style="display:none;">
<textarea type="text" id="textAreaTitleStudent" name="studentSummary" required></textarea>
<textarea maxlength="200" type="text" id="textAreaDescriptionStudent" name="studentShortSummary" required></textarea>
</div>
<!-- School Form -->
<div id="mainAddProjectSchoolID" style="display:none;">
<textarea type="text" id="textAreaTitleStudent" name="schoolSummary" required></textarea>
<textarea maxlength="200" type="text" id="textAreaDescriptionStudent" name="schoolShortSummary" required></textarea>
</div>
<!-- Submit Button -->
<input type="submit" value="submit">
</form>
And your php to read the data will be
if(!empty($_POST['type']) && ($_POST['type'] == 1 || $_POST['type'] ==2 )){
$type = $_POST['type'];
$summary = ($type == 1)? $_POST['studentSummary'] : $_POST['schoolSummary'];
$shortSummary = ($type ==1)? $_POST['studentShortSummary'] : $_POST['schoolShortSummary'];
}
This is just one way of doing it, there could be many.

Multiple products in one form

I would like to add a functionality in my form, in which a user can add as many entries before hitting submit button, like a 'add to cart' functionality, show the added entries in same page, in a separate div with submit button then save those multiple entry in database using that submit button(in a separate div that shows added entry).
So far my form allows only entries on per submit bases, meaning is if the user wants to add another entry, he/she has to go back to the form and add and click to submit again.
<form method="POST" name="myForm" action="saveto.php">
<label> Speed Rating:</label>
<select name="speed_rating" required class="form-control" id="speed_rating" ></select>
<div class="form-group col-sm-8">
<label> Description:</label>
<select name="description" required class="form-control" id="description" >
</select>
</div>
<div class="form-group col-sm-4">
<label> Load Index:</label>
<select name="load_index" required class="form-control" id="load_index" >
</select>
</div>
<div class="form-group col-sm-6">
<label> Vendor:</label>
<select name="vendor" required class="form-control" id="vendor" >
</select>
<div class="note"> Recommended Vendor : <span id="recomvend"> </span> </div>
</div>
<div class="form-group col-sm-6">
<label> Quantity:</label>
<input type="text" required name="qty" class="form-control" id="qty"></div>
<div style="clear:both"> </div>
<input type="submit" name="submit" class="btn btn-primary smp" value="Submit">
<button id="clear" type="button" class="btn btn-primary smp smp2" > Reset </button>
</div>
<input type="submit" value="submit" name="submit">
</form>
How would you achieved this? My saveto.php is just a normal script that will process the submitted data to database, one entry in a per submit bases.
I created this jsfiddle https://jsfiddle.net/jy6vh4rp/31/
If that's what you are looking for then you should add this to your front end:
<form action="validate.php" method="post">
<div style="padding: 30px 0; text-align: center;">
<button type="button" onclick="createDOM()">Add</button>
<input type="submit" value="submit" name="submit" />
</div>
<div class="productsContainer"></div>
</form>
<script>
$(document).ready(function() {
id = 0;
createDOM = function() {
$(".productsContainer").append('<input type="text" id="' + id + '" name="products[]" value="' + id + '" />');
id++;
};
});
</script>
And this to your validation backend :
foreach($_POST['products'] as $prodInput){
$product = filter_var($prodInput,FILTER_SANITIZE_NUMBER_INT);
if( is_numeric($product) ){
echo $product;
}
}

Instead of adding another element It is landing to a another page

I have created a modal list using bootstrap and Actually I have a form list created and when entered details, it will land me to a desired page. Register button performs this function. But now I have also added a dependent dropdown(Skills,Level) options. It also has a add button and Whenever I am clicking on add button instead of adding another elements,its landing me to that same page and displays added successfully message. Can anyone help me?
<form id='work' method="post" action="registerdb.php">
<div class="form-group">
<label for="recipient-name" class="control-label">First Name</label>
<div class="input-group"><span class="input-group-addon" id="basic-addon1">
<span class="glyphicon glyphicon-user"></span></span>
<input type="text" id = "firstname" name = "firstname" class="form-control"
placeholder="First Name" aria-describedby="basic-addon1">
</div>
</div>
<div class="form-group"><label for="exampleInputEmail1">Last Name</label>
<div class="input-group"><span class="input-group-addon" id="basic-addon1">
<span class="glyphicon glyphicon-user"></span></span>
<input type="text" id = "lastname" name = "lastname" class="form-control"
placeholder="Last Name" aria-describedby="basic-addon1">
</div>
</div>
<div class="form-group">
<label>Company Name</label>
<div class="input-group"><span class="input-group-addon" id="basic-addon1">
<span class="glyphicon glyphicon-briefcase"></span></span>
<input type="text" id= "companyname" name = "companyname" class="form-
control" placeholder="Company Name" aria-describedby="basic-addon1">
</div>
</div>
<div class="form-group"><label for="exampleInputEmail1">E-mail ID</label>
<div class="input-group"><span class="input-group-addon" id="basic-addon1">
<span class="glyphicon glyphicon-envelope"></span></span>
<input type="text" id = "emailid" name = "emailid" class="form-control"
placeholder="Email" aria-describedby="basic-addon1">
</div>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<div class="input-group"><span class="input-group-addon" id="basic-addon1">
<span class="glyphicon glyphicon-asterisk"></span></span>
<input type="password" id = "password" name = "password" class="form-
control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Type of Industry</label>
<div class="input-group">
<select class="input-medium bfh-countries" data-country="US">
<option value="" disabled="disbaled" selected="selected">Please Select a
Value</option>
<option value="Accounting">Accounting</option>
<option value="Aeronautical">Aeronautical</option>
<option value="Agriculture">Agriculture</option>
<option value="Science and Research">Science and Research</option>
</select>
</div>
</div>
</div>
<hr>
<div align="center">
<button type="button" class="btn btn-primary" data-
dismiss="modal">Close</button>
<input class="btn btn-primary" type = "submit" name = "submit" value =
"register" />
</div>
</form>
<script>
$( "#add" ).click(function() {
var row = $("#wrapper-1").clone();
//row.remove("#add");
$('#wrapper').append(row);
});
</script>
<div id="wrapper" width="100%">
<div id="wrapper-1" style="float: left; width: 85%;">
<div id="first" style="float: left; width: 65%;">
<label for="skills">Skills</label>
<select id="one" class="step1">
<option value="">Please select an option</option>
<option>C</option>
<option>C++</option>
<option>Java</option>
<option>PHP</option>
</select>
</div>
<div class="general" style="float: left; width: 35%;">
<label for="skills">Level</label>
<select id="two" class="step2">
<option value="">option</option>
<option>Begineer</option>
<option>Expert</option>
<option>Advanced</option>
</select>
</div>
</div>
<div class="add-general" style="float: left; width: 15%;">
<button id="add">add</button>
</div>
</div>
Your jsfiddle is messed up, you should load external CSS and scripts using the "external" feature on the left. And obviously your local files will not be accessible, so use absolute paths. I took the time to set it up properly this time.
Your HTML also looks messy, but browsers still understand it.
As for your unexpected behaviour, I think this post applies to your situation: Form is submitted when I click on the button in form. How to avoid this?
In essence: you just need to specify a type attribute (with value different from "submit" obviously) so that your "Add" button stops acting as a submit button.
<button id="add" type="button">add</button>
You also have a problem with attaching event listener on your "Add" button: your code must be executed after your button exists in DOM.
2 simple methods:
Put your script tag after your button HTML.
Have your code executed after DOM is ready / loaded (e.g. use jQuery(document).ready(function() { /** your code **/}) to request jQuery to execute it once DOM is ready).
jQuery(document).ready(function() {
$( "#add" ).click(function() {
var row = $("#wrapper-1").clone();
// You should change the id to avoid multiple elements
// with same id in your DOM...
$('#wrapper').append(row);
});
});
Updated jsfiddle: http://jsfiddle.net/qc3tu1f1/4/

Clear only specific fields in HTML form when submitting

I have the following HTML form code:
<div data-role="popup" id="-add" data-theme="c" class="ui-corner-all" data-dismissible="false" data-overlay-theme="a" style="min-width:550px;">
<div data-role="content"> Delete
<form id="item-form" action="#" formaction="process" data-ajax="false">
<input type="hidden" name="type" value="hidden1" />
<input type="hidden" name="how" value="hidden2" />
<input type="hidden" name="loc" value="hidden3" />
<input type="hidden" name="itemtype" value="hidden4" />
<div align="left">
<h3> Add</h3>
</div>
<div class="popup-hrule"></div>
<div class="ui-grid-a ui-responsive">
<div class="ui-block-a">
<label for="location_name">Name</label>
<input type="text" name="location_name" id="location_name" value="">
</div>
<div class="ui-block-b" data-schema="types">
<label for="type_name">Type</label>
<select name="type_name" id="type_name">
<option data-item=".textarea:name; .value:id; .repeat:true"></option>
</select>
</div>
<div class="ui-block-a">
<label for="address">Address</label>
<input type="text" name="address" id="address" value="">
</div>
<div class="ui-block-b">
<label for="city">City</label>
<input type="text" name="city" id="city" value="">
</div>
<div class="ui-block-a">
<label for="state">State</label>
<input type="text" name="state" id="state" value="">
</div>
<div class="ui-block-b">
<label for="zip">Postal</label>
<input type="number" name="zip" id="zip" value="">
</div>
<div class="ui-block-a">
<label for="_lat">Latitude</label>
<input type="number" name="_lat" id="_lat" value="">
</div>
<div class="ui-block-b">
<label for="_lon">Longitude</label>
<input type="number" name="_lon" id="_lon" value="">
</div>
</div> <a data-role="button" data-inline="true" onclick="$(this).closest('[data-role=popup]').popup('close');">Cancel</a>
<a data-role="button" data-inline="true" data-theme="a" onclick="$(this).closest('form').submit();$(this).closest('form').find('input').val('');$(this).closest('[data-role=popup]').popup('close')">Add</a>
</form>
</div>
</div>
Since this is an ADD form I would like to close the form and clear all the fields except for the hidden ones at the top which are flags that tell me what I have to do with the data. When I execute the code it clears all the data in the form including the hidden fields so the second time I can't add a new record.
A best approach for me would be to close the form completely so I don't have to erase the fields in the form which are going to get new data when I try to open it again.
You're clearing all input elements:
$(this).closest('form').find('input').val('');
If you want to clear only some of them, you need to target specifically the ones you want. For example, if you want to clear all non-hidden input elements:
$(this).closest('form').find('input[type!="hidden"]').val('');
Worst case would be that you have to turn this one line of code into a couple of lines of code to identify the elements you want. But as long as there's some jQuery-selectable pattern to identify the ones you want, that's what you need to do.
A best approach for me would be to close the form completely so I
don't have to erase the fields in the form which are going to get new
data when I try to open it again.
$("#item-form").remove();
If the hidden fields are populated from server, you can reset the form, so all form fields will be reset to value which were there during page reload.
$('#item-form')[0].reset();
The plain JS way of doing it
document.getElementById("item-form").reset();
Updated after discussion with OP
Cancel
function resetForm() {
$('#item-form')[0].reset();
$(this).closest('[data-role=popup]').popup(‌​'close');
}
Change this:
<a data-role="button" data-inline="true" data-theme="a" onclick="$(this).closest('form').submit();$(this).closest('form').find('input').val('');$(this).closest('[data-role=popup]').popup('close')">Add</a>
For this:
<a data-role="button" data-inline="true" data-theme="a" onclick="$(this).closest('form').submit();$(this).closest('form').find('input[type!=\'hidden\']').val('');$(this).closest('[data-role=popup]').popup('close')">Add</a>
So that you are selecting just those input elements with type not equal to hidden.

Categories