I don't want to submit form.
When I press enter on textbox my form is submited and reloaded automatically.
How to stop submiting form?
My code is.
<form class="cart" id="cart-frm" style="margin-bottom: 10px; ">
<div class="row">
<div class="quantity col-md-6 col-sm-6 col-xs-6" style="width:auto;" >
<label style="float: left; margin-top: 10px" for="quantity">Quantity : </label>
<span> </span>
<input style="float: right;" type="text" class="input-text qty" id='qty' title="Qty" value="1" name="quantity" min="1" step="1">
</div>
<div class="quantity col-md-6 col-sm-6 col-xs-6 pull-right">
<button type="button" style="float: right;" id ='<?php echo $product['id']; ?>' class="btn btn-primary btn-icon add-to-cart-product"> Add to cart</button>
</div><br>
</div>
<span class="clearfix"></span>
</form>
<script type="text/javascript">
document.getElementById("cart-frm").onsubmit = function(){
// if needs to be submited - return true
// else - return false
return false;
};
</script>
Related
I need a help please
My question is : How can I display image after uploaded it in the same Page
I'm trying a lot of code , but nothing is worked for me
Here is blade code
<form action="{{ route('admin.user.store') }}" method="post" class="form-horizontal"
enctype="multipart/form-data" id ="upload_form">
#csrf
<div class="row justify-content-center">
<div class="col-xl-9">
<!--begin::Wizard Step 1-->
<div class="my-5 step" data-wizard-type="step-content" data-wizard-state="current">
<h5 class="text-dark font-weight-bold mb-10">User's Profile Details:</h5>
<!--begin::Group-->
<div class="form-group row">
<label class="col-xl-3 col-lg-3 col-form-label text-left">Avatar</label>
<div class="col-lg-9 col-xl-9">
<div class="image-input image-input-outline" id="kt_user_add_avatar">
<div class="image-input-wrapper" >
<img src="{{asset('assets/media/users/100_6.jpg')}}" width="120" height="120">
</div>
<label class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="change" data-toggle="tooltip" title="" data-original-title="Change avatar">
<i class="fa fa-pen icon-sm text-muted"></i>
<input id="avatar" type="file" name="avatar" accept=".png, .jpg, .jpeg" />
</label>
<span class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="cancel" data-toggle="tooltip" title="Cancel avatar">
<i class="ki ki-bold-close icon-xs text-muted"></i>
</span>
</div>
</div>
</div>
<!--end::Group-->
<div class="form-actions">
<div class="row">
<div class="col-md-offset-3 col-md-9">
<button type="submit" class="btn" style="background-color:#3699FF">Submit</button>
Cancel
</div>
</div>
</div>
</div>
</div>
</form>
Try this: (For Preview)
<script type="text/javascript">
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
</script>
<input id="avatar" type="file" name="avatar" accept=".png, .jpg, .jpeg" onchange="readURL(this);" />
<img id="blah" src="#" alt="your image" />
when i click edit button (i used modal bootstrap) all value exist except textarea with summernote.
if you input something(in summernote) and cancel it ,your value doesn't disappear ... it should be clear .
forgive me, my english so bad .
here is my modal form :
<div class="modal-dialog modal-lg">
<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>
<h3 class="modal-title">Formulir Berita</h3>
</div>
<div class="modal-body form">
<form action="#" id="form" class="form-horizontal">
<input type="hidden" value="" name="id_berita"/>
<div class="form-body">
<div class="form-group">
<label class="control-label col-md-2">Tanggal penulisan</label>
<div class="col-md-9">
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
<input name="tgl" placeholder="yyyy-mm-dd" class="form-control datepicker" type="text">
<span class="help-block"></span>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Judul</label>
<div class="col-md-9">
<input name="judul" placeholder="Judul" class="form-control" type="text">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Penulis</label>
<div class="col-md-9">
<input name="penulis" placeholder="Penulis" class="form-control" type="text">
<span class="help-block"></span>
</div>
</div>
<div class="form-group" id="photo-preview">
<label class="control-label col-md-2">Gambar</label>
<div class="col-md-4">
(Tidak ada gambar)
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" id="label-photo">Unggah Foto </label>
<div class="col-md-7">
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="input-append">
<div class="uneditable-input">
<i class="fa fa-file fileupload-exists"></i>
<span class="fileupload-preview"></span>
</div>
<span class="btn btn-default btn-file">
<span class="fileupload-exists">Ganti Foto</span>
<span class="fileupload-new">Pilih File</span>
<input name="gambar" type="file" />
</span>
<span class="help-block"></span>
Remove
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Isi</label>
<div class="col-md-9">
<textarea name="isi" class="form-control" id="summernote" >
</textarea>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" id="btnSave" onclick="save()" class="btn btn-primary">Simpan</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Batal</button>
</div>
</div>
</div>
</div>
i 've been trying some code :
$('#summernote').summernote('code');
$('#summernote').summernote('reset');// and for resetting modal while Add Data
it doesn't happen anything
my ajax function :
function edit_berita(id)
{
save_method = 'update';
$('#form')[0].reset(); // reset form on modals
$('.form-group').removeClass('has-error'); // clear error class
$('.help-block').empty(); // clear error string
//Ajax Load data from ajax
$.ajax({
url : "<?php echo site_url('sistem/berita/ajax_edit/')?>/" + id,
type: "GET",
dataType: "JSON",
success: function(data){
// $('#summernote').summernote('code');
$('[name="id_berita"]').val(data.id_berita);
$('[name="tgl"]').datepicker('update',data.tgl);
$('[name="judul"]').val(data.judul);
$('[name="isi"]').val(data.isi);
$('[name="penulis"]').val(data.penulis);
$('#modal_form').modal('show'); // show bootstrap modal when complete loaded
$('.modal-title').text('Edit data'); // Set title to Bootstrap modal title
$('#photo-preview').show(); // show photo preview modal
if(data.gambar)
{
$('#label-photo').text(''); // label photo upload
$('#photo-preview div').html('<img src="'+base_url+'upload/berita/'+data.gambar+'" class="img-responsive" >'); // show photo
$('#photo-preview div').append('<input type="checkbox" name="remove_photo" value="'+data.gambar+'"/> Remove photo when saving'); // remove photo
}
else
{
$('#label-photo').text(''); // label photo upload
$('#photo-preview div').text('(Tidak ada gambar)');
}
},
error: function (jqXHR, textStatus, errorThrown)
{
alert('Error get data from ajax');
}
});
}
Text Area doesnot have value. jQuery .html() works in this case
$("textarea#summernote").html(data.isi);
Try to modify the summernote line like this :
$('#summernote').summernote('code', data.isi);
And to clear the content :
$('#summernote').summernote('code', '');
Please try this:
$("textarea#summernote").val(data.isi);
$( '[name="isi"]' ).val(data.isi);
$( '[name="isi"]' ).summernote();
I'm trying to submit a POST request to a controller but controller does not respond to my request and no error has been thrown as well, however GET request works fine.
I'm using
<button type="submit" class="btn btn-primary">Submit</button>
to send my request at the controller and this the controller that will handle my request>>
#GetMapping("/flexfieldkeysegment/{keyFlexFieldSegmentId}")
public String editCategoryForm(#PathVariable Integer keyFlexFieldSegmentId, Model model) {
String tenantName=getCurrentTenant().getUser().getTenantName();
FlexFieldKeySegment segment = keySegment.findFlexFieldKeySegmentById(tenantName, keyFlexFieldSegmentId);
model.addAttribute("keySegment",segment);
return viewPrefix+"edit_flexfield_key_segment";
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
layout:decorate="~{layout}">
<body>
<div layout:fragment="content">
<br /> <br /> <br />
<div class="col-md-6 col-md-offset-3">
<h3 class="sub-title theme-font"></h3>
<div class="panel panel-primary theme-font">
<div class="panel-heading">
<h3 class="panel-title">Accounting Flexfield Key Segment</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<form th:action="#{/flexfieldkeysegment/{keyFlexFieldSegmentId}(keyFlexFieldSegmentId=${keySegment.keyFlexFieldSegmentId})}"
th:object="${keySegment}" method="post"
enctype="multipart/form-data">
<p th:if="${#fields.hasErrors('global')}" th:errors="*{global}"
th:class="text-red">Incorrect data</p>
<!-- text input -->
<div class="form-group"
th:classappend="${#fields.hasErrors('keyFlexFieldSegmentCode')}? 'has-error'">
<label>Flexfield Segment Code <span style="color: red;">*</span></label>
<input type="text" class="form-control"
name="keyFlexFieldSegmentCode"
th:field="*{keyFlexFieldSegmentCode}"
placeholder="Enter Flexfield Key Segment Code" />
<p th:if="${#fields.hasErrors('keyFlexFieldSegmentCode')}"
th:errors="*{keyFlexFieldSegmentCode}" th:class="text-red">Incorrect
data</p>
</div>
<div class="form-group"
th:classappend="${#fields.hasErrors('name')}? 'has-error'">
<label>Flexfield Key Segment Name<span
style="color: red;">*</span></label> <input type="text"
class="form-control" name="name" th:field="*{name}"
placeholder="Enter Flexfield Key Segment Name" />
<p th:if="${#fields.hasErrors('name')}" th:errors="*{name}"
th:class="text-red">Incorrect data</p>
</div>
<div class="form-group"
th:classappend="${#fields.hasErrors('description')}? 'has-error'">
<label>Description<span style="color: red;">*</span></label> <input
type="text" class="form-control" name="description"
th:field="*{description}"
placeholder="Enter Flexfield Key Segment Description" />
<p th:if="${#fields.hasErrors('description')}"
th:errors="*{description}" th:class="text-red">Incorrect
data</p>
</div>
<div class="form-group"
th:classappend="${#fields.hasErrors('separatorId')}? 'has-error'">
<label for="segment_separator">Segment Separator <span
style="color: red;">*</span></label> <select name="name"
id="separator" th:field="*{separatorId}"
th:data-validation-message="#{msg.flexfieldkeysegment.separator.mandatory}"
class="form-control dropdown">
<option th:value="''" th:text="'Select'"></option>
<option th:each="separator : ${segment_separator}"
th:text="${separator.separatorName}"
th:value="${separator.separatorId}"></option>
</select>
<p th:if="${#fields.hasErrors('separatorId')}"
th:errors="*{separatorId}" th:class="text-red">Incorrect
data</p>
</div>
<div class="form-group">
<div style="width: 30%; float: left; margin-right: 3%;">
<input type="checkbox" th:field="*{freezeFlexfieldDefinition}"
th:value="${freezeFlexfieldDefinition}" /> <label>Freeze
Flexfield Definition</label>
</div>
<div style="width: 30%; float: left; margin-right: 3%;">
<input type="checkbox" th:field="*{crossValidateSegment}"
th:value="${crossValidateSegment}" /> <label>Cross
Validate Segment</label>
</div>
<div style="width: 30%; float: left; margin-right: 3%;">
<input type="checkbox" th:field="*{freezeRollUpGroup}"
th:value="${freezeRollUpGroup}" /> <label>Freeze
Rollup Group</label>
</div>
<div style="width: 30%; float: left; margin-right: 3%;">
<input type="checkbox" th:field="*{allowDynamicInsert}"
th:value="${allowDynamicInsert}" /> <label>Allow
Dynamic Insert</label>
</div>
<div style="width: 30%; float: left; margin-right: 3%;">
<input type="checkbox" th:field="*{active}"
th:value="${active}" /> <label>Active</label>
</div>
</div>
</form>
</div>
</div>
<div class="box-footer">
<button type="button" class="btn btn-warning"
onclick="window.history.go(-1); return false;">
<span class="glyphicon glyphicon-arrow-left"></span> Back
</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Instead of #GetMapping, use #PostMapping. Also, annotate the 'Model' POJO with #RequestBody
#PostMapping("/flexfieldkeysegment/{keyFlexFieldSegmentId}")
public String editCategoryForm(#PathVariable Integer keyFlexFieldSegmentId, #RequestBody Model model) {
String tenantName=getCurrentTenant().getUser().getTenantName();
FlexFieldKeySegment segment = keySegment.findFlexFieldKeySegmentById(tenantName, keyFlexFieldSegmentId);
model.addAttribute("keySegment",segment);
return viewPrefix+"edit_flexfield_key_segment";
}
I would like to put the data of a form into a session
The action of the form depends on the choice made in the buttons .bien especially in the onclick() function .
for that I made this code:
title = "formulaire_commun_1"
url = "/formulaire_commun_1"
layout = "sidebar_layout"
is_hidden = 0
==
<?php
function onStart()
{
$this['transaction'] = Session::get('transaction');
$this['bien'] = Session::get('type_bien');
}
function onTest()
{
Session::put('transaction', input('TYPE_transaction'));
Session::put('type_bien', input('radio_type_bien'));
}
function onRedirectMe()
{
return Redirect::to('http://google.com');
}
?>
==
<ul class="progressbar">
<li class="active">transaction</li>
<li>details</li>
<li>confirmation</li>
</ul>
<br><br><br><br>
<form method="POST" data-request="onTest" data-request-success="onRedirectMe" name="formu" accept-charset="UTF8" enctype="multipart/form-data">
<input type="hidden" name="_handler" value="onUpdate">
{{form_token()}}
{{form_sessionkey()}}
<div class="form-group">
<label for="TYPE_transaction" class="col-sm-3">type de transaction:</label>
<div class="col-sm-9">
<select class="form-control" id="TYPE_transaction" name="TYPE_transaction">
<option>vendre</option>
<option>louer</option>
</select>
</div>
<br><br><br>
<p>choisissez un type de bien:</p>
<br><br>
<div class="col-sm-offset-2 col-sm-2">
<button class="btn btn-default bien" onclick="type_bien(0)" >
<img src="{{ 'assets/img/icones/icone_maison.png'|theme }}">
</button>
</div>
<div class="col-sm-offset-2 col-sm-2">
<button class="btn btn-default bien" onclick="type_bien(1)"><img src="{{ 'assets/img/icones/icone_villa.jpg'|theme }}"></button>
</div>
<div class="col-sm-offset-2 col-sm-2">
<button class="btn btn-default bien" onclick="type_bien(2)"><img src="{{ 'assets/img/icones/icone_riad.jpg'|theme }}"></button>
</div>
<br><br><br><br><br>
<div class="col-sm-offset-2 col-sm-2">
<button class="btn btn-default bien" onclick="type_bien(3)"><img src="{{ 'assets/img/icones/icone_appartement.png'|theme }}"></button>
</div>
<div class="col-sm-offset-2 col-sm-2">
<button class="btn btn-default bien" onclick="type_bien(4)"><img src="{{ 'assets/img/icones/icone_ferme.png'|theme }}"></button>
</div>
<div class="col-sm-offset-2 col-sm-2">
<button class="btn btn-defaul bien" onclick="type_bien(5)"><img src="{{ 'assets/img/icones/icone_magasin.jpg'|theme }}"></button>
</div>
<br><br><br><br>
<div style="display: none;">
<div class="radio" >
<label><input type="radio" name="radio_type_bien" id=0 value="maison" ></label>
</div>
<div class="radio" >
<label><input type="radio" name="radio_type_bien" id=1 value="villa"></label>
</div>
<div class="radio" >
<label><input type="radio" name="radio_type_bien" id=2 value="riad" ></label>
</div>
<div class="radio" >
<label><input type="radio" name="radio_type_bien" id=3 value="appartement" ></label>
</div>
<div class="radio" >
<label><input type="radio" name="radio_type_bien" id=4 value="formulaire_appartement" ></label>
</div>
<div class="radio" >
<label><input type="radio" name="radio_type_bien" id=5 value="magasin" ></label>
</div>
</div>
<br><br><br><br><br><br
<div class=" col-sm-offset-3 col-sm-9">
<button type="submit" class="btn btn-default">Register</button>
</div></div>
</form>
<script type = "text/javascript">
$(function() {
var $buttonBien = $('.bien');
$buttonBien.on('click',function (event) {
event.preventDefault();
});
});
function type_bien(x){
switch( x) {
case 0:
document.getElementById(0).checked="true";
document.forms["formu"].action="formulaire_villa";
break;
case 1:
document.getElementById(1).checked="true";
document.forms["formu"].action="formulaire_villa";
break;
case 2:
document.getElementById(2).checked="true";
document.forms["formu"].action="formulaie_riad";
break;
case 3:
document.getElementById(3).checked="true";
document.forms["formu"].action="formulaire_appartement";
break;
case 4:
document.getElementById(4).checked="true";
break;
case 5:
document.getElementById(5).checked="true";
break;
default:
alert('local_commerce est selected');
}
}
</script>
_____________
but unfortunately there is a conflict between ajax and the form
if i put data-request = "onTest" action = "" for example
I have no redirection
so I need a way to redirect the form to another page after the submit:
please help me
thank you in advance
I would like to record the data of a form in a session
I find in the documentation that I have to use: Session::put('key', 'value');
but I do not know where to place this piece of code.
knowing that my form is located in the form_commun_1.htm page.
this is all the page :
title = "formulaire_commun_1"
url = "/formulaire_commun_1"
layout = "sidebar_layout"
is_hidden = 0
==
<ul class="progressbar">
<li class="active">transaction</li>
<li>details</li>
<li>confirmation</li>
</ul>
<br><br><br><br>
<form method="POST" action="" name="formu" accept-charset="UTF8" enctype="multipart/form-data">
<input type="hidden" name="_handler" value="onUpdate">
{{form_token()}}
{{form_sessionkey()}}
<div class="form-group">
<label for="TYPE_transaction" class="col-sm-3">type de transaction:</label>
<div class="col-sm-9">
<select class="form-control" id="TYPE_transaction">
<option>vendre</option>
<option>louer</option>
</select>
</div>
<br><br><br>
<p>choisissez un type de bien:</p>
<br><br>
<div class="col-sm-offset-2 col-sm-2">
<button class="btn btn-default" onclick="type_bien(0)"><img src="{{ 'assets/img/icones/icone_maison.png'|theme }}"></button>
</div>
<div class="col-sm-offset-2 col-sm-2">
<button class="btn btn-default" onclick="type_bien(1)"><img src="{{ 'assets/img/icones/icone_villa.jpg'|theme }}"></button>
</div>
<div class="col-sm-offset-2 col-sm-2">
<button class="btn btn-default" onclick="type_bien(2)"><img src="{{ 'assets/img/icones/icone_riad.jpg'|theme }}"></button>
</div>
<br><br><br><br><br>
<div class="col-sm-offset-2 col-sm-2">
<button class="btn btn-default" onclick="type_bien(3)"><img src="{{ 'assets/img/icones/icone_appartement.png'|theme }}"></button>
</div>
<div class="col-sm-offset-2 col-sm-2">
<button class="btn btn-default" onclick="type_bien(4)"><img src="{{ 'assets/img/icones/icone_ferme.png'|theme }}"></button>
</div>
<div class="col-sm-offset-2 col-sm-2">
<button class="btn btn-default" onclick="type_bien(5)"><img src="{{ 'assets/img/icones/icone_magasin.jpg'|theme }}"></button>
</div>
<br><br><br><br>
<div class="radio" style="display: none;" >
<label><input type="radio" name="radio_type_bien" id=0 value="maison" ></label>
</div>
<div class="radio" >
<label><input type="radio" name="radio_type_bien" id=1 value="villa"></label>
</div>
<div class="radio" >
<label><input type="radio" name="radio_type_bien" id=2 value="riad" ></label>
</div>
<div class="radio" >
<label><input type="radio" name="radio_type_bien" id=3 value="appartement" ></label>
</div>
<div class="radio" >
<label><input type="radio" name="radio_type_bien" id=4 value="formulaire_appartement" ></label>
</div>
<div class="radio" >
<label><input type="radio" name="radio_type_bien" id=5 value="magasin" ></label>
</div>
<br><br><br><br><br><br
<div class=" col-sm-offset-3 col-sm-9">
<button type="submit" class="btn btn-default">Register</button>
</div></div>
</form>
<script type = "text/javascript">
function type_bien(x){
switch( x) {
case 0:
document.getElementById(0).checked="true";
document.forms["formu"].action="formulaire_villa";
break;
case 1:
document.getElementById(1).checked="true";
document.forms["formu"].action="formulaire_villa";
break;
case 2:
document.getElementById(2).checked="true";
document.forms["formu"].action="formulaie_riad";
break;
case 3:
document.getElementById(3).checked="true";
document.forms["formu"].action="formulaire_appartement";
break;
case 4:
document.getElementById(4).checked="true";
break;
case 5:
document.getElementById(5).checked="true";
break;
default:
alert('local_commerce est selected');
}
}
</script>
do I have to go through creating a plugin or component ?
and where to put the session and how to use it?
please help?thank you
I would recommend creating a plugin and component, but this isn't 100% necessary in your case.
Here would be a basic self-contained page that would do what you are requesting:
title = "test"
url = "/test"
layout = "default"
is_hidden = 0
==
<?php
function onStart()
{
$this['example'] = Session::get('example-key');
}
function onTest()
{
Session::put('example-key', input('my-input'));
}
?>
==
<form data-request="onTest" data-request-success="location.reload();">
<input type="text" name="my-input">
<button type="submit">Submit</button>
</form>
{% if example %}
<strong>Example: {{ example }}</strong>
{% endif %}
I would recommend reading through the OctoberCMS documentation, it is excellent.