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
Related
qr.php
<form id="contactForm" class="forma" method="post">
<h1 id="datah1">Your data</h1>
<div class="formcontainer">
<hr class="hr3"/>
<div class="container">
<label for="uname" id="fullnameofres"><strong>Full name of your restaurant</strong></label>
<input type="text" name="textfieldtest" id="user_value" placeholder="Full name of your business.." name="user_value" required>
<label for="psw"><strong>Number of tables</strong></label>
<input type="text" id="nr_tables" placeholder="How many tables you have..." name="nr_tables" required>
<hr class="hr1">
<div id="templatesDiv">
<label for="psw"><strong>Template</strong></label>
<button id="tmplt_btn" onclick="go_to_templates_grid()" style="margin-bottom: 15px">Click here for all templates </button>
</div>
<div>
You selected : <b> <span id="templateResult" name="templateResult"> </b>
</div>
<hr class="hr2">
<label for="psw"><strong>Do you have menu</strong></label>
<!-- <input type="text" id="menu_choice" placeholder="Yes/No" name="menu_choice" required> -->
<select name="menu_dropdown" id="menu_dropdown">
<option value="None" selected disabled > Yes/No </option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
<button type="submit" id="submitara" name="submit">Submit</button>
</form>
Expected behaviour: The user fills in the fields, after clicking on 'Click here for all templates', another php file being opened, user is choosing Template, back to qr.php, submit form and that's all.
The problem is that all data which was typed in text fields being cleared after clicking on 'Click here for all templates'.
The default type for a button is submit, so when you click that button, you are submitting the form. Add: type="button" to the button code so that it will just run your function but not submit.
<button type="button" id="tmplt_btn"
onclick="go_to_templates_grid()"
style="margin-bottom: 15px">Click here for all templates </button>
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();
}
}
Problem: The search box does not change size when resizing the page. I also need to make it wider, but I really can't seem how to do it, I have tried adding styles to the box such as width: 100%; Nothing seems to work
Also, you can see in the image linked below, that the select drop down box is slightly clipped off on the right hand side. I don't know what is causing this, so I don't know how to go about fixing it.
I also need to make the form fill the width of the row. Any help would be highly appreciated. Thank you!
Image of Form
How i want it too look
Code:
<header>
<div class="container">
<form action="search.php" method="get" data-toggle="validator" role="form" class="form-inline">
<div class="row">
<h2>Enter a username and choose a category to search in</h2>
<div class="input-group">
<div class="form-group">
<input name="search" type="text" class="form-control" aria-label="..." placeholder="Search a username here" required>
</div>
</div>
<div class="input-group">
<div class="form-group">
<select class="selectpicker form-control" required>
<option value="">Catagory</option>
<option value="volvo">Minecraft username</option>
<option value="saab">Minecraft UUID</option>
<option value="mercedes">Mc-Market username</option>
<option value="audi">Skype username</option>
</select>
<button type="submit" class="btn btn-default">Search</button>
</div><!-- /form-group -->
</div><!-- /input-group -->
</div> <!-- /row-group -->
</form><!-- /form-group -->
</div><!-- /container-group -->
</header>
Don't mix with other components
Do not mix form groups or grid column classes directly with input groups. Instead, nest the input
group inside of the form group or grid-related element.
See input-groups docs. Input-groups should be nested within form-groups and you haven't fully applied the correct markup for your button. It should be within <span class="input-group-btn">.
Note: from the docs,
Avoid using <select> elements here as they cannot be fully styled in WebKit browsers.
Working Example: Open using FullPage
header {
background-color: #42f4c2;
padding: 100px 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<header>
<div class="container text-center">
<h2>Enter a username and choose a category to search in</h2>
<form action="search.php" method="get" data-toggle="validator" role="form" class="form-inline">
<div class="form-group">
<input name="search" type="text" class="form-control" aria-label="..." placeholder="Search a username here" required>
</div>
<div class="form-group">
<div class="input-group">
<select class="selectpicker form-control" required>
<option value="">Catagory</option>
<option value="volvo">Minecraft username</option>
<option value="saab">Minecraft UUID</option>
<option value="mercedes">Mc-Market username</option>
<option value="audi">Skype username</option>
</select>
<span class="input-group-btn">
<button type="submit" class="btn btn-default btn-search">Search</button>
</span>
</div>
</div>
</form>
</div>
</header>
I need one help.I need to set drop down value as blank after finishing one action using Angular.js.I am explaining my code below.
<div style="height:270px; overflow-x:hidden; overflow-y:scroll;" ng-show="viewOrderTable">
<div class="table-responsive dashboard-demo-table">
<select class="form-control" id="status" ng-model="order_status" ng-change="changeOrderStatus(order_id,shipping_email,p.pro_data_id,order_status,p.days)">
<option value="">Select Status</option>
<option value="In-progress">IN-PROGRESS</option>
<option value="Dispatch">DISPATCH</option>
<option value="Delivered">DELIVERED</option>
<option value="canceled" ng-if="p.pro_status =='Ordered' && p.pro_status=='In-progress'">CANCELED</option>
<option value="Returned" ng-if="p.days <= 48 && p.pro_status=='Delivered'">RETURN</option>
</select>
</div>
</div>
from the above list when user is selecting DISPATCH the below form is opening.
<div class="" ng-show="viewDispatch">
<div style="padding-bottom:20px;">
<div class="col-md-6">
<div class="input-group bmargindiv1 col-md-12">
<span class="input-group-addon ndrftextwidth" style="width:120px; text-align:left;">Dispatched Date& Time :</span>
<div class="datepicker" date-format="dd-MM-y h:mm:ss" button-prev='<i class="fa fa-arrow-circle-left"></i>' button-next='<i class="fa fa-arrow-circle-right"></i>'>
<input type="text" name="dispatch_date" class="form-control" id="dispatch_date" ng-model="dispatch_date" placeholder="Add Dispatched Date& Time" ng-change="clearField('dispatch_date');" />
</div>
</div>
</div>
<div class="clear"></div>
</div>
<div class="col-md-12 text-right">
<button type="button" class="btn btn-success" ng-click="addDispatchData();">Submit</button> <button type="button" class="btn btn-danger" ng-click="clearDispatchData();">Back</button>
</div>
</div>
</div>
The controller side code for this action is given below.
$scope.changeOrderStatus=function(orderid,email,prodataid,order_status,hour){
if(order_status=='Dispatch'){
$scope.viewOrderTable=false;
$scope.viewDispatch=true;
pro_dataId=prodataid;
order_Id=orderid;
dStatus=order_status;
email=email;
}
}
When user is clicking on back button its again coming to its original state but drop down DISPATCH option is displaying where i need to reset the drop down list again.
$scope.clearDispatchData=function(){
$scope.viewOrderTable=true;
$scope.viewDispatch=false;
$scope.order_status='';
}
I did like above but its not resetting .Please help me to resolve this issue.
You can use ng-init for this in your html file
<select class="form-control" id="status" ng-model="order_status" ng-change="changeOrderStatus(order_id,shipping_email,p.pro_data_id,order_status,p.days)" ng-init='order_status == 0'>
May be digest issue you can try using $timeout so you should inject $timeout in your controller before use.
$scope.clearDispatchData=function(){
$timeout(function() {
$scope.viewOrderTable=true;
$scope.viewDispatch=false;
$scope.order_status='';
});
}
I would like to add functionality to my existing form.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.I would like to show all added values on same page, cause I am planning to add a Javascript print function that will print the add entries before saving to database.I need all values in fields to be printed
<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>
entry 1
speed rating -- 46
description ---'the discription'
------
entry 2
speed rating --56
description ---'another description'
submit
The saveto.php is just a normal script that will process the submitted data to database, one entry in a per submit bases.