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>
Related
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
My project contains index.blade.php and create.blade.php.
In create.blade.php is a form for creating divs that are listed in the index.blade.php, through the form I need to pass the background-color for each div made, options red, yellow and green color.
My create.blade.php code:
<form action="{{url('warehouse')}}" method="post">
#csrf
<label for="name" style="padding-right:20px">Name</label>
<input type="text" id="name" name="name" style="padding-right:50px; margin-bottom:10px" placeholder="Name"><br>
<label for="supplier" style="padding-right:2px">Supplier</label>
<input type="text" id="supplier" name="supplier" style="padding-right:50px; margin-bottom:10px"
placeholder="Supplier"><br>
<label for="type" style="padding-right:28.5px">Type</label>
<input type="text" id="type" name="type" style="padding-right:50px; margin-bottom:10px" placeholder="Type"><br>
<label for="url" style="padding-right:41.8px">Url</label>
<input type="text" id="url" name="url" style="padding-right:50px; margin-bottom:10px" placeholder="Url"><br>
<label for="color">Color</label>
<select id="selector" name="color">
<option value="" disabled selected hidden>Please Choose...</option>
<option value="green">Green (ready for sale)</option>
<option value="yellow">Yellow (in progress)</option>
<option value="red">Red (new)</option>
</select>
<br>
<button type="submit" id="kreiraj_dugme_create" onclick="selectBackground()">Create/button>
And my index.blade.php code:
#foreach ($warehouses as $key => $warehouse)
<div class="brder1" draggable="true" ondragstart="drag(event,{{$key}})" id="{{$key}}">
<h1 class="ime_palete">{{$warehouse->name}}</h1>
<a class="link_palete" href="{{$warehouse->url}}" target="_blank">Link</a>
<a class="edit_palete" href="{{url("warehouse/".$warehouse->id."/edit")}}">Edit</a>
<a class="show_pallet" href="{{url("warehouse/".$warehouse->id)}}">Show</a>
<form action="{{url("warehouse/".$warehouse->id)}}" method="post">
#csrf
#method('DELETE')
<button type="submit" class="izbrisiDugme" onclick="remove()">Remove</button>
</form>
</div>
#endforeach
</div>
<a class="create_palete" href="{{url("warehouse/create")}}">Create</a>
All I need is to set background-color from options to div brder1
You probably need to do something like this
with jQuery:
$("#selector").change(function(){
$(".brder1").css('background-color', $(this).val());
});
You can place the code within document ready. So snippet will look like as follows
$(document).ready(function(){
$("#selector").change(function(){
$(".brder1").css('background-color', $(this).val());
});
});
I,m working on an angular form and need to resolve a bug.
Here is the issue :
1)- Select type : value-1
2)- Select Data-1 : All Data-1
3)- Select Data-2 : All Data-2
4)- Now change type to : Value-2 (instead of value-1).
The fields of data-1 and data-2 should disappear.
5)- Now select the type again to value-1.
Now click on data-1 or data-2 again...you would see an empty space
again.
I don't want this empty space here...
instead it should be back to --choose one--
again...
I am attaching screenshot and code...please take a look.
<form class="addAlert settings_form" ng-submit="createAlert(newAlert)">
<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" id="myModalLabel">Create a New Model</h4>
</div>
<div class="modal-body">
<div class="form_fieldset">
<div class="form_item">
<label for="title">Name</label>
<input name="title" type="text" class="form-input title" required placeholder="Alert Name" ng-model="newAlert.title">
<div class="error"></div>
</div>
<div class="form_item">
<label for="alertformat">Type</label>
<select class="form-input alertformat"
name="alertformat" ng-model="newAlert.alertType"
ng-init="newAlert.alertType='Threshold'">
<option value="Threshold" selected>Value-1</option>
<option value="Pipeline Failure">Value-2</option>
</select>
</div>
<div class="form_item" ng-if="newAlert.alertType !='Pipeline Failure'">
<label for="alertformat">Data-1 </label>
<select class="form-input alertformat" name="alertformat"
ng-model="newAlert.site" required>
<option value="" disabled>-- Choose one --</option>
<option ng-value="-1">All Data-1</option>
<option ng-repeat="item in assetsData" ng-value="{{item.sitename}}">
{{item.sitename}}
</option>
</select>
</div>
<div class="form_item" ng-show="newAlert.site" ng-if="newAlert.alertType !='Pipeline Failure'">
<label for="alertformat">Data-2</label>
<select class="form-input alertformat" name="alertformat" ng-model="newAlert.asset" required>
<option value="" disabled>-- Choose one --</option>
<option ng-value="-1">All Data-2</option>
<option ng-repeat="item in assetsData | filter:newAlert.site" ng-value="{{item.sitename}}">
{{item.name}}
</option>
</select>
</div>
<div class="form_item">
<label for="alertformat">Color</label>
<div class="severity">
<input type="radio" class="radioBtnClass" name="numbers" value="Red"checked required>
<span>Red</span>
</input>
<input type="radio" class="radioBtnClass" name="numbers" value="Ember">
<span>Blue</span>
</input>
</div>
</div>
<div class="form_item">
<label for="users">Users</label>
<div class="user_select">
<span ng-repeat="user in userList" style="display:block">
<input class="alert_user_class" value="{{user.pk}}" type="checkbox">
{{user.email}}
</input>
</span>
</div>
</div>
</div>
</div>
</form>
On change event of your 'type' dropdown, you need to assign $scope.newAlert.site = ''; and $scope.newAlert.asset = '' as 'Choose one' option has value Empty String("").
I have 2 required drop-down lists,this is my try but it doesn't work when I click on the "Save" Button:
<div>
<button class="btn btn-action" ng-click="save()">Save</button>
</div>
<form>
<div class="row">
<select required>
<option ng-repeat="pi in listProduitAvailable" value="{{pi.id}}">{{pi.reference}}</option>
</select>
<select required>
<option ng-repeat="pi in listProduitAvailable" value="{{pi.id}}">{{pi.reference}}</option>
</select>
</div>
</form>
the save method:
$scope.save= function() {
$scope.creerGamme();
}
how can I correct my code please
thanks for help
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.