Good day, I'm wondering why my button cannot do a submit inside phone browsers. Please take alook at my form
<form class="form-horizontal" method="POST" action="#" id ='form_id'>
<div class="form-group">
<label class="col-sm-3 control-label">Tipe</label>
<div class="col-sm-5">
<select onchange = 'by_brand();' name = 'tipenya' id="tipe" class="form-control select2">
<option value="">---</option>
<option value="AR-1">Naughty</option>
<option value="AR-6">Les Femmes</option>
<option value="AR-10">Matahari</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Area</label>
<div class="col-sm-5">
<select onchange="brands();" name ='area' id="areanya" class="form-control select2">
<option value="">All</option>
<?php foreach ($area as $areanya) {?>
<option value="<?=$areanya->AreaCode;?>"><?=$areanya->Description;?></option>
<?php } ?>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Outlet</label>
<div class="col-sm-5">
<select name='outlet' id="hsl" class="form-control select2">
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Date</label>
<div class="col-sm-5">
<input type="text" class="form-control pull-right" readonly="readonly" placeholder="Tanggal" name="date_search" id="reservation" />
</div>
</div>
<div class="box-footer pull-right">
<input type="submit" class="btn btn-submit" />
</div>
</form>
It's working fine when i use any laptop. Can anyone help me?
Here is my full html code
http://pastebin.com/KCEQzW3e
First of all try using this to test if the sumbit actually works
<form action="javascript:alert("sumbit button works!");" id='form_id'>
if this doesnt work then there is something wrong with your form.
if this works. there is something wrong with the jquery function you used.
try using this to call a function if you click submit:
<form class="form-horizontal" method="POST" action="#" id ='form_id' onsubmit="myFunction()">
I hope this helps.
Related
I have some strange thing happening from my self post forms. I thought using form method="post" would not put data in the url. And I'm having different outcomes on both forms
<form method="post" action="" enctype="multipart/form-data" id="testForm">
<div class="form-group">
<div class="panel-heading">
some junk
</div>
<div class="panel-body">
<div class="col-md-12">
<textarea id="summernote" name="Full_Discription" class="form-control" required></textarea>
</div>
<div class="col-md-1">
<input type='hidden' name='var' value='<?php echo "$Known_Issue_id";?>'/>
<button name="submit" type="submit" id="submitButton" class="btn btn-accent">Submit Follow-up</button>
</div>
</div>
</div>
</form>
If I submit this form the hidden data shows in URL but not the body text from summernot
web_known_issues_bug.php?bug=20
<form method="post" enctype="multipart/form-data" id="testForm">
<div class="form-group">
<div class="col-md-2">
<label>Website Issue Type:</label>
<select class="form-control" name="Issue_Plugin" id="Issue_Plugin" required>
<option value="">- Select Web Issue -</option>
</select>
</div>
<div class="col-md-7">
<label>Description Of Known Issue:</label> <input name="Issue_Discription" type="text" value="" class="form-control" required>
</div>
<div class="col-md-2">
<label>Type Of Issue:</label>
<select class="form-control" name="Issue_Type" id="Issue_Type" required>
<option value="">- Bug Type -</option>
</select>
</div>
<div class="col-md-1">
<label>Submit Issue</label><BR>
<input type='hidden' name='bug' value='<?php echo "none";?>'/>
<button name="submit" type="submit" id="submitButton" class="btn btn-accent">Submit Issue</button>
</div>
<div class="col-md-12">
<textarea id="summernote" name="Full_Discription" class="form-control" required><?php echo $SendBody; ?></textarea>
</div>
</div>
This form is spitting everything to the url?
web_known_issues.php?message=Added%20New%20Bug%20List%20Item&title=Siclone%20Crashes%20when%20not%20used%20everyday&full=asdasdasdasdasd
I really need this stuff to send clean urls. Any idea on what I have done wrong?
Sorry, this is solved. My error, I left in some debug code in the miles of PHP
try to make a simple insert but i get this error MethodNotAllowedHttpException in RouteCollection.php (line 251) at RouteCollection->methodNotAllowed(array('GET', 'HEAD', 'PUT', 'PATCH', 'DELETE')) in RouteCollection.php (line 238)
this is my form in the view
<form method="post" action="{{route('product.create')}}" class="form-horizontal" enctype="multipart/form-data">
{!! csrf_field() !!}
<fieldset>
<!-- Text input-->
<div class="form-group">
<label class="col-md-3 control-label" for="name">Name</label>
<div class="col-md-9">
<input id="name" name="name" type="text" placeholder="Product name" class="form-control input-md">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="textarea">Description</label>
<div class="col-md-9">
<textarea class="form-control" id="textarea" name="description"></textarea>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="size">Size</label>
<div class="col-md-9">
<select class="form-control" id="size">
<option selected>Choose size...</option>
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="larg">Larg</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="category_id">Category</label>
<div class="col-md-9">
<select class="form-control" id="category_id">
<option selected>Choose Categories...</option>
{{--<option value= "$categories"></option>--}}
<option value= "1"> men </option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="image">Image</label>
<div class="col-md-9">
<input id="file" name="image" class="input-file" type="file">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="submit"></label>
<div class="col-md-9">
<button id="submit" name="submit" class="btn btn-primary">Create</button>
</div>
</div>
</fieldset>
</form>
my route
Route::group(['prefix'=>'admin','middleware'=>'auth'],function(){
Route::get('/' ,function(){
return view('admin.index');
})->name('admin.index');
});
Route::resource('product','ProductsController');
Route::resource('category','CategoriesController');
my controller
public function create()
{
$categories = Category::pluck('name','id');
return view('admin.product.create',compact('categories'));
}
public function store(Request $request)
{
$formInput = $request->except('image');
$image = $request->image;
if($image){
$imageName = $image->getClientOriginalName();
$image->move('images', $imageName);
$formInput['image']=$imageName;
}
Product::create($formInput);
return redirect()->route('admin.index');
}
any help will be appreciated
should be:
action="{{route('product.store')}}"
The route product.create expects GET header for showing a register form
i forget to add name to the form now after adding name i get alle field except image
I tried all above answers and still had this problem. So I found out that my model was requiring the "fillable" property:
protected $fillable = ['name', 'status', 'etc','etc2'];
This solved the issue and now I can post/put/delete.
Also, in my routes file instead of using one route to each action, I simply use, for example:
Route::resource('user', 'v1\UserController');
Is it possible to insert a form with select element inside horizontal form in Bootstrap.
I need to insert a form with select element inside form group.
Bootply code here
Note: Bootply messes the code and remove some form tags, so copy the code below.
The problem the element becomes not aligned. The two selects for Country and Language in the code not aligned and messes the code after them.
The code is here again:
<div class="container-fluid">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-4 control-label" for="fname">First name:</label>
<div class="col-sm-8">
<input class="form-control" name="fname" id="fname" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="lname">Last name:</label>
<div class="col-sm-8">
<input class="form-control" name="lname" id="lname" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="country">Country:</label>
<div class="col-sm-8">
<form>
<select name="country" id="country" class="form-control">
<option value="US">US</option>
<option value="UK">UK</option>
<option value="CA">CA</option>
</select>
</form>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="language">Language:</label>
<div class="col-sm-8">
<form>
<select name="language" id="language" class="form-control">
<option value="en-US">en-US</option>
<option value="en-UK">en-UK</option>
<option value="fr">FR</option>
</select>
</form>
</div>
</div>
</form>
</div>
You have multiple <form></form> values in your code. Since this is only one form all you need is the form class at the beginning and the close at the end. This is why it's becoming misaligned. Check out my fiddle
http://jsfiddle.net/jxe78828/
According to the HTML5 specs, you can't nest one form inside another:
4.10.3 The form element
...
Content model:
Flow content, but with no form element descendants.
Bootstrap is designed with the assumption that you will be using valid HTML structure. So you may want to rethink your HTML structure and if there is another way to accomplish what you are trying to do with nested <form> elements.
Try this:
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-4 control-label" for="fname">First name:</label>
<div class="col-sm-8">
<input class="form-control" name="fname" id="fname" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="lname">Last name:</label>
<div class="col-sm-8">
<input class="form-control" name="lname" id="lname" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="country">Country:</label>
<div class="col-sm-8">
<select name="country" id="country" class="form-control">
<option value="US">US</option>
<option value="UK">UK</option>
<option value="CA">CA</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="language">Language:</label>
<div class="col-sm-8">
<select name="language" id="language" class="form-control">
<option value="en-US">en-US</option>
<option value="en-UK">en-UK</option>
<option value="fr">FR</option>
</select>
</div>
</div>
</form>
</div>
You can also see my JSFiddle here
After a lot of search with people answering without reading the question clearly and misunderstanding what I need. Clearly the question means I need separate forms or sub forms inside forms, this can be possible with HTML 5 attribute form in this way:
<select name="country" id="country" class="form-control" form="country-form">
where you can just put empty form any where like this:
<form id="country-form"></form>
or even this form does not exist, the above form field will not be included anyway when submitting the container form.
I have a form, that I need my save button to be outside of form elements, but if I take it out elsewhere, it doesn`t like refresh the form.
<form ng-submit="save()" action="" name="addInv" novalidate>
<div class="col-md-10">
<label>Name:</label>
<input type="text" ng-model="newlocation.name" class="form-control">
</div>
<div class="col-md-10">
<label>Storage administrator:</label>
<select ng-model="newlocation.administrator" class="form-control" ng-options="user.resource_uri as user.first_name for user in users"></select>
</div>
<div class="col-md-6">
<label>Street:</label>
<input type="text" ng-model="newlocation.street" class="input-medium form-control">
</div>
<div class="col-md-6">
<label>City:</label>
<input type="text" ng-model="newlocation.city" class="input-medium form-control">
</div>
<div class="col-md-6">
<label>Country:</label>
<input type="text" ng-model="newlocation.country" class="input-medium form-control">
</div>
<div class="col-md-6">
<label>Postal code:</label>
<input type="text" ng-model="newlocation.postalCode" class="input-medium form-control">
</div>
<div class="col-md-6">
<button class="btn tbn-lg btn-primary">Save</button>
</div>
</form>
If I put button outside the <form> form doesn't refresh values.
You could use JavaScript to do this
<input type="submit" onclick="document.forms[0].submit();" />
I have this code snippet, but this renders dropdown after line break, What's the best bootstrap 3 col class to get it correct? (select dropdown next to input medium-inline)
<form class="form-horizontal well" >
<div class="form-group">
<label class="col-lg-2 control-label">Memory</label>
<div class="col-lg-4">
<div>
<input id="memory" type="text" class="form-control">
</div>
<div class="col-lg-4">
<select id="memoryType" class="form-control">
<option value="GB" selected="selected">GB</option>
<option value="MB">MB</option>
</select>
</div>
</div>
</div>
</form>
Ok, this is how I would do it.
First add the form-inline class to your form.
Then remove the col-lg classes from labels and inputs.
Also remove all un-needed divs too, which results in the below html:
Markup
<form class="form-inline well" >
<div class="form-group">
<label class="control-label">Memory</label>
<input id="memory" type="text" class="form-control">
</div>
<div class="form-group">
<select id="memoryType" class="form-control">
<option value="GB" selected="selected">GB</option>
<option value="MB">MB</option>
</select>
</div>
</form>
Screen grab
If you want your form-fields to align horizontally - you can actually use the inline form. eg:
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="memory">Memory</label>
<input id="memory" type="text" class="form-control">
</div>
<div class="form-group">
<select id="memoryType" class="form-control">
<option value="GB" selected="selected">GB</option>
<option value="MB">MB</option>
</select>
</div>
</form>
Note: not tested in an actual browser...