Develop Reference

JQuery .append() content won't stay on screen

I'm creating a form where the user can add their modules that they study at university. When they click the button, it adds a new set of fields for another module. I've added a click listener to the button #add and I'm trying to append the form #input_form with the same fields:
<form id="input_form">
<h6>Add modules below...</h6>
<div class="form-row">
<div class="col-md-6">
<input type="text" class="form-control" name="module_name" placeholder="Module Name">
</div>
<div class="col-md-6">
<input type="text" class="form-control" name="module_code" placeholder="Module Code">
</div>
</div>
<div class="form-group col-md-6">
<label for="credit_entry"># of Credits: </label>
<input type="number" name="credits" id="credit_entry">
</div>
<div class="form-group col-md-6">
<label for="colour_selector">(Optional) Choose a Colour: </label>
<select id="colour_selector" name="colour_select">
<option value="blue">Blue</option> <!-- Default -->
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="pink">Pink</option>
<option value="black">Black</option>
</select>
</div>
</div>
<div class="row">
<button name="add" id="add" class="btn btn-secondary">Add Another</button>
</div>
// Add fields dynamically
$("#add").click(function() {
$("#input_form").append("<h1>The fields will go here</h1>");
});
When I click the button, I see the content (the h1) added for a split second but then it disappears. I am not sure why the appended HTML won't stay on screen. I have another part of this project which works similarly and appends to a ul list and the HTML is persisting on screen for that just fine, but for some reason this won't.
I'm pretty new to web design and jQuery so sorry if there's an easy answer that I'm missing.

"If the element has a form owner, the element must submit the form owner from the button element." (w3.org)
That means, any button inside a form executes submit() on its parent form.
To prevent that, explicitly define the button type as button:
<button name="add" type="button" id="add" class="btn btn-secondary">Add Another</button>
In action:
https://codepen.io/akamichael/pen/NWqgaWz?editors=1010

how to show form in the same page when click button on it

I have a form on the page and displayed it as none. And there is a button in the page I want when clicking on the button the form to display.
How can I do that?
<button type="button" class="btn btn-primary add-city">اضافه مدينة جديدة +</button>
and form code is this
<div id="forma">
<div class="form-head">
<p id="add-city">+اضافة المدينة</p>
<i class="fa fa-times-circle close" aria-hidden="true"></i>
</div>
<form class="">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>الدولة<span>*</span></label>
<select class="form-control">
<option>اختر الدوله </option>
</select>
</div>
<div class="form-group">
<label>اسم المدينه(عربي)<span>*</span></label>
<input type="text" class="form-control" id="email">
</div>
</div>
<div class="col-md-6">
<div class="form-group ">
<label>المحافظة<span>*</span></label>
<select class="form-control">
<option>اختر المحافظه </option>
</select>
</div>
<div class="form-group">
<label>اسم المدينه(انجليزي)</label>
<input type="text" class="form-control" id="email">
</div>
</div>
</div>
</div>
</form>
<div class="form-footer">
<button type="button" class="btn btn-primary">ارسال</button>
<button type="button" class="btn btn-secondary">الغاء</button>
</div>
</div>
I made a div with an id called forma so that I can call it in javascript. But I don't know the right way.

You can add an onclick attribute to the button that changes the display to block.
onclick="document.getElementById('forma').style.display = 'block'"

Just use the jQuery click property and show property
$( "#idbutton" ).click(function() {
$("#idform").show();
});

If you are using Bootstrap.js, you can safely use jQuery because it's required. Assuming you should click #add-city button to display the form, simply add to your app.js or inside your <script> tags
$('#add-city').click(function() {
$('#forma').show();
});
In order to toggle the form (show/hide) on every click, you could do something like
$('#add-city').click(function() {
$('#forma').toggleClass('hidden');
});

How to update inputs based on a modal selection

I'm currently working with Laravel Framework. I send all the records from one user about events, but if the user has more than one record of event then he needs to choose which event he would like to edit, i've already created the modal that shows all the events, but how can I obtain the selected event and fill all the inputs with that specific event?
Here is my code
Controller
public function dashboardEvents(){
//Brings all the info from the user events
$data['events'] = UserEvent::where('user_id', Auth::user()->id)->get();
//This is to know if there's more than one record
if(UserEvent::where('user_id', Auth::user()->id)->get()->count()>1) {
$data['multiple'] = true;
} else {
$data['multiple'] = false;
}
return view('user-pages/my-events', $data);
}
View
<title>User Dashboard</title>
<body class="html not-front not-logged-in no-sidebars page-node page-
<!-- Al the Inputs -->
<select class="form-control" style="margin-bottom: 15px;" id="user_roles">
<option value="bride">I am a bride</option>
<option value="groom">Im a groom</option>
<option value="groomsman">Im a guest</option>
<option value="wedding_planner">Im a wedding planner</option>
</select>
<input type="text" class="form-control" style="margin-bottom: 15px;">
<div class="input-group date" data-provide="datepicker" style="margin-bottom: 15px;">
<input type="text" class="form-control">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
<select class="form-control" style="margin-bottom: 15px;" id="party-type">
<option id="wedding">Wedding</option>
<option id="party">Party</option>
<option id="prom">Prom</option>
</select>
<select class="form-control" style="margin-bottom: 15px;" id="user-task">
<option>I am shopping for just Groomsmen</option>
<option>I am shopping for me</option>
</select>
<input type="text" class="form-control" id="phone_number_user" style="margin-bottom: 15px;">
<input type="text" class="form-control" id="usr" style="margin-bottom: 15px;" placeholder="New Password">
Modal
<div class="modal fade" id="UserDashboardModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Choose an Event to Edit</h4>
</div>
<div class="modal-body">
<select class="form-control">
#foreach($event as $key=>$cat)
<option value="{{ $cat->user_event_id }}">{{ $cat->name }}</option>
#endforeach
</select>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" id="modalFromEventButton">Select</button>
</div>
</div>
</div>
The script to open the Modal
<script>
$(document).ready(function () {
$('#UserDashboardModal').modal('show');
});
</script>
How can I obtain the selected event? And upload the inputs automatically wich the correct data?

I would change your query a little as now you're querying the userEvents twice. You can get the count from your first result set:
Controller:
public function dashboardEvents()
{
// Get all the event ids for the user.
$data['events'] = UserEvent::where('user_id', Auth::user()->id)->get();
// Check count.
$data['multiple'] = $data['events']->count() > 1 ? true : false;
// Return view.
return view('user-pages/my-events', $data);
}
Update your Blade with form elements for the edit form wrapped with an id corresponding with the userEvent ID below the select in your modal.
Blade:
<form action="/your/update/route" method="POST">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
#foreach($event as $key => $cat)
<div id="cat-{{ $cat->user_event_id }}" style="display:none">
<!-- build your form elements for update -->
</div>
#endforeach
</form>
Update your script with a select box event in which you decide which form gets shown to the user.
Script:
$(document).ready(function () {
$('#UserDashboardModal').modal('show');
$('.modal-body select').change(function() {
// Get selected userEventId.
var userEventId = $('.modal-body select option:selected').val();
// Change your form with $('#cat-' + userEventId)
// code...
});
});
Final note: It might be better to query only id & name to pre-populate your select on the dashboard (as a user might have a lot of userEvents). And then fetch the complete data on a seperate call on selection of an event by the user with ajax. Good luck!

Dynamic change form using jQuery, AJAX

I've got little problem because I don't really know how should I do this.
Let's say I've got this HTML form:
<form action="#" method="post">
<select name="change_reason" required>
<option value="">Please choose</option>
<option value="1">Getting apple</option>
<option value="2">Walking outside</option>
<option value="3">Other</option>
</select>
<input type="submit" value="Submit">
Depending on the selected answer I want to present second (different) form but without reloading the page (AJAX) and which would be submitted to PHP script. So let's say someone chose 'Getting apple', hit Submit so then the form would changed to:
<form action="/my_script.php" method="post">
<p>Getting apple, OK!</p>
<textarea name="apples" rows="2">So I am getting some apples</textarea>
<input type="submit" value="Submit">
Let's say someone chose 'Walking outside' so the form would change to:
<form action="/my_script.php" method="post">
<p>Walking outside, OK!</p>
<textarea name="apples" rows="2">So I will walk outside now</textarea>
<input type="submit" value="Submit">
Can anyone please tell me how can I get this done?

Just place a switch on your script and load form content from the ajax response.
<form action="#" method="post">
<div class="dynamic-inputs">
<select name="change_reason" required>
<option value="">Please choose</option>
<option value="1">Getting apple</option>
<option value="2">Walking outside</option>
<option value="3">Other</option>
</select>
</div>
<input type="submit" value="Submit">
</form>
<script>
$(document).ready(function(){
$("form").submit(function(){
var myForm = $(this);
var data = $(this).serializeArray();//serialize form inputs and pass them to php
$.post("/myscript.php",data,function(data){
myForm.find(".dynamic-inputs").html(data);
});
return false;
});
});
</script>
While you can place a switch on your PHP script and return a value based on the change_reason input parameter
<?php
$change_reason = isset($_REQUEST["change_reason"]) ? $_REQUEST["change_reason"] : null;
if($change_reason){
switch ($change_reason) {
case 1:
echo '<p>Getting apple, OK!</p>
<textarea name="apples" rows="2">So I am getting some apples</textarea>';
break;
case 2:
echo '<p>Walking outside, OK!</p>
<textarea name="apples" rows="2">So I will walk outside now</textarea>';
break;
}
}
?>

Steps
1)Add each form into a modal or in lightbox
2)open each modal onchange event of select box
3)Write ajax for each individual form and close modal after submission.
$(":select[name='change_reason']").change(function() {
/*If you are using Bootstrap the create sprate modal for this.
For more details
http://getbootstrap.com/javascript/#modals
Add each form in separate modal and open that on by giving name to each form
*/
$('#' + $('select[name=selector]').val()).modal()
});
/* Write Ajax for sumission of indivusal forms and close that modal after submission of each form
http://api.jquery.com/jquery.ajax/
Take a look at it.
*/
<!-- Add this forms into modal and give it a id -->
<div class="modal fade" id="same-id-as-value-of-select-box">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<form action="/my_script.php" method="post">
<p>Getting apple, OK!</p>
<textarea name="apples" rows="2">So I am getting some apples</textarea>
<input type="submit" value="Submit">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- Add this forms into modals -->
<form action="/my_script.php" method="post">
<p>Walking outside, OK!</p>
<textarea name="apples" rows="2">So I will walk outside now</textarea>
<input type="submit" value="Submit">
Hope this will Help you

If the forms are reasonably small like the ones you presented. I would just load them on the page in separate hidden div's. Then as stated in the comments, use a submit handler to determine which form to show on the page and hide the initial form.
If the forms are "too long" for this concept, I would definitely use jQuery AJAX to submit the form data and load the new form into a destination div on the page. . . maybe even replacing the existing form.

e.preventdefault on submitting the triggered submit not working

problem is when i click the button whole page refresh, which certainly i do not want as i am trying to submit the form through Ajax.
$('#createFormBtn').on('click', function(e){
e.stopImmediatePropagation();
e.preventDefault();
$('#block-validate').trigger('submit',function(e){
e.stopImmediatePropagation();
e.preventDefault();
});
var formData = {
FormName : $("#cFormName").val(),
FormPath : $("#cFormPath").val(),
FormCIPath : $("#cFormCIPath").val(),
TabID : $('#selectTab').val(),
TabName : $('#selectTabName div.select2-container a.select2-choice span.select2-chosen').text(),
MenuOrder : $('#selectMenuOrder div.select2-container a.select2-choice span.select2-chosen').text(),
IsMenuLink : isMenuLink_createForm
};
$.ajax({
type:"post",
url:"{{base_url()}}admin/configurations/addNewForm/",
data: formData/*,
success: function(output){
if (output == true){
oTable.fnReloadAjax();
}
}*/
});
});
i added this code
$('#block-validate').trigger('submit',function(e){
e.stopImmediatePropagation();
e.preventDefault();
});
because i need to Trigger the Submit, As the validation in my Form will not work. This Button is not inside the <form> tags.
But now it is giving the problem as if i click this button whole page refresh..
HTML if anyone wants to see..
<div id="addNewFormModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"><i style='color: #666666' class='fa fa-edit fa-fw fa-1x'></i>Edit</h4>
</div>
<div class="modal-body">
<div class="body collapse in" id="div-1">
<form class="form-horizontal" id="block-validate">
<div class="form-group">
<label class="control-label col-lg-4" for="text1">Form Name</label>
<div class="col-lg-8">
<input type="text" class="form-control required" name="formName" placeholder="Form Name" id="cFormName">
</div>
</div><!-- /.form-group -->
<div class="form-group">
<label class="control-label col-lg-4" for="pass1">Form Path</label>
<div class="col-lg-8">
<input type="text" class="form-control required" name="formPath" placeholder="Form Path" id="cFormPath">
</div>
</div><!-- /.form-group -->
<div class="form-group">
<label class="control-label col-lg-4">Form CI Path</label>
<div class="col-lg-8">
<input type="text" class="form-control required" name="formCIPath" placeholder="Form CI Path" id="cFormCIPath">
</div>
</div><!-- /.form-group -->
<div class="form-group" id="selectTab_MainDiv">
<label class="control-label col-lg-4">Select Tab</label>
<div class="col-lg-8" id="selectTabName">
<input type='hidden' class="required" name='selectTab' id='selectTab'/>
</div>
</div><!-- /.form-group -->
<div class="form-group">
<label class="control-label col-lg-4">Have Parent</label>
<div class="col-lg-8" id="haveParentDiv">
<input class="make-switch" id="haveParent" type="checkbox" data-on-color="success" data-on-text="Yes" data-off-text="NO" data-off-color="danger">
</div>
</div><!-- /.row --><!-- /.row -->
<div class="form-group" id="selectParentMenu_MainDiv" style="display: none">
<label class="control-label col-lg-4">Parent Form</label>
<div class="col-lg-8" id="selectParentMenuDiv">
<input type='hidden' name='input' id='selectParentMenu'/>
</div>
</div>
<div class="form-group" id="selectTab_MainDiv">
<label class="control-label col-lg-4">Menu Order</label>
<div class="col-lg-8" id="selectMenuOrder">
<select class="commonGeneralSelect2 required" name="selectMenuOrder">
<option></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
</div><!-- /.form-group -->
<div class="form-group">
<label class="control-label col-lg-4">Show on Menu</label>
<div class="col-lg-8" id="isMenuLink_createSwitchDiv">
<input class="make-switch" id="isMenuLink_createSwitch" type="checkbox" data-on-color="success" data-on-text="Yes" data-off-text="NO" data-off-color="danger">
</div>
</div><!-- /.row --><!-- /.row -->
{{*<input type="submit" value="Validate" class="btn btn-primary">*}}
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" id="createFormBtn">Create</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal --><!-- /#Edit Button Modal -->

Replace all this...
$('#block-validate').trigger('submit',function(e){
e.stopImmediatePropagation();
e.preventDefault();
});
with only this...
$('#block-validate').valid();
There is no need to trigger a submit to get the form to validate when you can simply use the .valid() method. It will trigger validation without submitting the form. (You should edit your OP to mention the jQuery Validate plugin and show the code.)
EDIT:
Actually, your ajax() should really be within the submitHandler callback of the .validate() method. As per documentation, it's "the right place to submit a form via Ajax...".
So instead of the simple suggestion I made above, do this instead...
// click handler is needed since this button is not a 'submit' type button
$('#createFormBtn').on('click', function(e){
// block default action of button click
e.stopImmediatePropagation();
e.preventDefault();
// submit the form -> will validate AUTOMATICALLY
$('#block-validate').submit();
});
and put the ajax in the submitHandler callback within your .validate() method...
$('#block-validate').validate({
// your other rules and options here,
submitHandler: function(form) { // only fires on valid form
var formData = {
FormName : $("#cFormName").val(),
FormPath : $("#cFormPath").val(),
FormCIPath : $("#cFormCIPath").val(),
TabID : $('#selectTab').val(),
TabName : $('#selectTabName div.select2-container a.select2-choice span.select2-chosen').text(),
MenuOrder : $('#selectMenuOrder div.select2-container a.select2-choice span.select2-chosen').text(),
IsMenuLink : isMenuLink_createForm
};
$.ajax({
type:"post",
url:"{{base_url()}}admin/configurations/addNewForm/",
data: formData
});
}
});
Please note that most people use jQuery .serialize() instead of manually creating an array with every field attached to a .val().
data: $(form).serialize()

You are manually triggering a form submit:
$('#block-validate').trigger('submit',function(e){
e.stopImmediatePropagation();
e.preventDefault();
});
as #block-validate is your form element.
You are trying to submit your form via ajax, so there is absolutely no reason to trigger a form submit manually. Just remove this block, make your ajax request and the form will be posted.
Also note that the e variable in your trigger function is not the form-submit event you expect it to be, check the manual on trigger().

Why do you even trigger the submit at all? Purely for the form validation?
You'll need to really recreate that validation.. the problem is you're unbinding the validation completely when you use preventDefault() and stopImmediatePropogation() below:
$('#block-validate').trigger('submit',function(e){
e.stopImmediatePropagation();
e.preventDefault();
});
You really want to just re-validate the form (this is pseudo code which almost surely will not work). I cannot tell what is being used to validate your form above, but if you provide I will edit my answer for you.
$('#createFormBtn').on('click', function(e){
$('#block-validate').validate()
//continue with rest of form submission