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

Form Onclick with Required field?

I have currently a form which has the below code, the issue is that when a user presses the form submit button even if not checking the required field the onclick call is still triggered, how can I make it so that you HAVE to fulfill the required field before getting a trigger?
<form method="post">
<div class="form-group">
<select id="inputState" class="form-control" style="width: 100%">
<option>10,000 credits</option>
<option>25,000 credits</option>
<option>50,000 credits</option>
<option>75,000 credits</option>
<option>100,000 credits</option>
</select>
</div>
<div class="text-center">
<div class="row justify-content-center mb-2">
<div class="col-12 col-md-8 text-center">
<p class="mb-0 small text-muted"><strong>Promotion Disclaimer</strong>
<br>You will be required to install a free mobile app from our sponsors to receive your Coins for free. This process only takes a minute or two and you can remove the app once you're finished.</p>
</div>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1" required>
<label class="form-check-label" for="defaultCheck1">
I agree to Promotion Disclaimer
</label>
</div>
<br>
<button class="btn btn-primary btn-sm btn-continue" data-step="3" onclick="call_locker();">Continue</button>
</div>
</form>

Using the form onsubmit event, move your call_locker call into the form element. This is called when there is a submit event. You can trigger said event by default on your button click. To prevent the refreshing of the page, you can either add event.preventDefault() or returning false from the function. Here I have a mock function of call_locker which returns false.
<script>
call_locker = () => { console.log('called locker'); return false; }
</script>
<form method="post" onsubmit="return call_locker();">
<div class="form-group">
<select id="inputState" class="form-control" style="width: 100%">
<option>10,000 credits</option>
<option>25,000 credits</option>
<option>50,000 credits</option>
<option>75,000 credits</option>
<option>100,000 credits</option>
</select>
</div>
<div class="text-center">
<div class="row justify-content-center mb-2">
<div class="col-12 col-md-8 text-center">
<p class="mb-0 small text-muted"><strong>Promotion Disclaimer</strong>
<br>You will be required to install a free mobile app from our sponsors to receive your Coins for free. This process only takes a minute or two and you can remove the app once you're finished.</p>
</div>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1" required>
<label class="form-check-label" for="defaultCheck1">
I agree to Promotion Disclaimer
</label>
</div>
<br>
<button class="btn btn-primary btn-sm btn-continue" data-step="3">Continue</button>
</div>
</form>

There is a simple solution to your issue.
Instead of using the onclick event, you can use the onsubmit event, which will not call the function unless the form is submitted.
The browser will not submit the form if elements with the required attribute are not filled out, so the function will not be called if you are using the onsubmit event until the required fields are filled out.
onclick="call_locker();" should become onsubmit="call_locker();"

There is another way to solve your problem.
if you want to make it so that the browser won't refresh itself (and therefore submit the form) whenever you click on the submit button and your fields are not fulfilled, you can make your javascript code do it by preventing the default of the submit key which is refreshing the browser whenever it is pressed.
Javascript Example
call_locker(event)
{
if (document.getElementById().value === undefined &&
document.getElementById(defaultCheck1).value === undefined)
{
event.preventDefault();
}
}

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 display other inputs in main input with original value

so I have an issue with trying to figure out how to get this to work. I want to make a dropdown selection, and I want all the selections in the dropdown to show up in the main input box along with the original input value.
Here is my form that I am using to send the values to ajax to send to my php file.
<div class="input-group" id="adv-search">
<input type="text" name="input1" class="form-control" id="filter" id="searchbox" placeholder="Something..."/ required>
<div class="input-group-btn">
<div class="btn-group" role="group">
<div class="dropdown dropdown-lg">
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button>
<div class="dropdown-menu dropdown-menu-right" role="menu">
<form class="form-horizontal" role="form">
<div class="form-group">
<h4 class="text-center">Advanced Search</h4>
<label for="filter">Option</label>
<select class="form-control" name="place" id="myList">
<option selected></option>
<option value="option1">Option1</option>
<option value="option2">Option2</option>
<option value="option3">Option3</option>
</select>
</div>
<div class="form-group">
<label for="contain">Location</label>
<input class="form-control" name="something1" type="text" id="list2">
</div>
<div class="form-group">
<label for="contain">Something2</label>
<input class="form-control" name="contain" type="text" id="list3">
</div>
<p><br/>
<button type="submit" id="insideButton" name="submit" class="btn btn-primary">Advanced Search</button>
</form>
</div>
<button type="submit" id="buttonClass" name="submit2" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span> Search</button>
</div>
</div>
</div>
</div>
</div>
Now I'm trying to get the values from the select dropdown(#myList) and the other inputs(#list2, #list3) and display them in the main input(#filter) along with the value that was entered in (#filter). My code below will display them per keypress but it repeats it since its in the function. How do I get each input to display in the #filter input.
$('#list2').on("input", function(){
var filter = $(this).val();
var myList = $('#filter').val();
$('#filter').val(filter + " " + myList);
});
Here is a picture of what I would like to accomplish. Any and all help is greatly appreciated. Thank you.

hello If I am understanding correctly according to your image and your piece of code that you want to get the all option input value into the main search box if that so you can try this Jquery code
<script>
$(document).ready(function() {
$("#insideButton").click(function(e) {
e.preventDefault();
$("#filter").val($("#list3").val()+" "+ $("#list2").val()+"
"+$("#myList").val()+" "+$("#filter").val());
});
});
</script>
I just used one button as submit option you can change it as your wish
you can also write the same code if you want form submit option then there will be a slightly change
<script>
$(document).ready(function() {
$(".form-horizontal").on('submit',function(e) {
e.preventDefault();
$("#filter").val($("#list3").val()+" "+ $("#list2").val()+"
"+$("#myList").val()+" "+$("#filter").val());
});
});
</script>
hope it helps you can also check this fiddle
fiddle demo

Dropdown inside search text field on bootstrap

I try to create a search box with a dropdown inside the search text field
For now this is my result:
http://www.bootply.com/46drKn8dRs#
But i prefer the dropdown is on the right, any help?

This is how I fixed it:
.btn.dropdown-toggle{
border-radius:0;
}
Here is your updated Bootply
I moved the element and added the above CSS code.

if you want to move de dropdown to the right, you can just move all the tag after the search text field like this:
<div class="row">
<div class="col-md-6">
<div class="form-horizontal">
<div class="input-group">
<input id="txtkey" type="text" class="form-control" placeholder="Enter here" aria-describedby="ddlsearch">
<div class="ddl-select input-group-btn">
<select id="ddlsearch" class="selectpicker form-control" data-style="btn-primary">
<option value="france">France</option>
<option value="austria">Austraia</option>
<option value="usa">usa</option>
</select>
</div>
<span class="input-group-btn">
<button id="btn-search" class="btn btn-info" type="button"><i class="fa fa-search fa-fw"></i></button>
</span>
</div>
</div>
</div>
</div>