I have a form in which i have two buttons one is save and other is save as draft , so on save i am submiting the form to other servlet and on save as Draft click i want to give action to new servlet class
I am doing <button type="submit" id="saveDraft" formaction="InsertAsDraft"">,but its not working
<div class="container" id="divHide">
<form action="InsertQuantityIndent" method="post" id="indentForm" autocomplete="on">
<div class="row position-relative">
<div class="col-lg-4 brder">
<h5 id="commonHeader">Outlet Name</h5>
<select class="test" id="outlet" name="outlet">
<option>All</option>
<option>ol1</option>
<option>ol2</option>
</select>
</div>
<div class="col-lg-4">
<h5 id="commonHeader">Category</h5>
<select class="test" id="CategoryName" name="categoryCode">
<option>All</option>
<option>Cat1</option>
<option>Cat2</option>
</select>
</div>
</div>
<hr style="border: 1px solid black">
<div>
<button type="submit" id="save" class="commonButton">
<i class="fas fa-save"></i> Save
</button>
<button type="submit" id="saveDraft" formaction="InsertAsDraft" class="commonButton">
<i class="fas fa-save"></i> Save as draft
</button>
</div>
</form>
</div>
when i click on save the form gets submitted to InsertQuantityIndent, but when i click on save as draft it gets submitted but no data gets to back end
Like request.getparameter in servlet
Here is my servlet
String outlet = request.getParameter("outlet");
String CategoryCode= request.getParameter("categoryCode");
System.out.println("outlet in new file :"+outlet);
here it print nothing, so i want to submit form on button click and get that data to back end bye its name
HTML
<div class="container" id="divHide">
<form action="InsertQuantityIndent" method="post" id="indentForm" autocomplete="on">
<div class="row position-relative">
<div class="col-lg-4 brder">
<h5 id="commonHeader">Outlet Name</h5>
<select class="test" id="outlet" name="outlet">
<option>All</option>
<option>ol1</option>
<option>ol2</option>
</select>
</div>
<div class="col-lg-4">
<h5 id="commonHeader">Category</h5>
<select class="test" id="CategoryName" name="categoryCode">
<option>All</option>
<option>Cat1</option>
<option>Cat2</option>
</select>
</div>
</div>
<hr style="border: 1px solid black">
<div>
<button id="save" class="commonButton" data-formAction="servlet">
<i class="fas fa-save"></i> Save
</button>
<button id="saveDraft" data-formAction="InsertAsDraft" class="commonButton">
<i class="fas fa-save"></i> Save as draft
</button>
</div>
</form>
</div>
JavaScript
const formElm = document.getElementById('indentForm');
const saveButton = document.getElementById("save");
saveButton.addEventListener('click', (e) => {
e.preventDefault();
let elm = e.target;
const formAction = elm.dataset.formaction;
console.log(formAction);
formElm.action = formAction;
formElm.submit();
});
const saveDraftButton = document.getElementById("saveDraft");
saveDraftButton.addEventListener('click', (e) => {
e.preventDefault();
let elm = e.target;
const formAction = elm.dataset.formaction;
console.log(formAction);
formElm.action = formAction;
formElm.submit();
});
You can find the working example stackblitz:
https://stackblitz.com/edit/js-qmsnzc
Here you can name buttons and check which value for button came and process accordingly.
<button type="submit" id="save" name="btn_save" class="commonButton">
<i class="fas fa-save"></i> Save
</button>
<button type="submit" id="saveDraft" name="btn_save_draft" class="commonButton">
<i class="fas fa-save"></i> Save as draft
</button>
or you can change type of button to button and handle click listener. From your listener change your form action and submit it using javascript.
Related
I have simple HTML like this;
<div id="buildyourform">
<div class="row">
<div class="col-sm-6">
<div class="input-group mb-2">
<select class="form-control" id="language">
#foreach($language as $l)
<option value="{{$l->id}}" >{{$l->name}}</option>
#endforeach
</select>
</div>
</div>
<a href="javascript:void(0)" id="save-button" class="btn btn-light btn-sm ">
<i class="fa fa-ban"></i>
Upload
</a>
</div>
</div>
</div>
I have a plus button, using which I am appending the same fields below. Now I want to retrieve the respective selected language id with the click of the respective upload button.
But every time it returns me the value of first select field.
Here is what I have tried;
$(document).on('click', '#save-button', function(){
var obj=$(this);
//language = obj.closest("div[class=row]").find("select[id=language]").val();
language = $(this).parent().find("select[id=language]").val();
console.log(language);
});
Can anyone let me know how to get respective selected language id on respective button click?
You need to use prev function and change select[id=xxxx] by select#language
https://api.jquery.com/prev/
$(document).on('click', '#save-button', function(){
var obj=$(this);
//language = obj.closest("div[class=row]").find("select[id=language]").val();
language = $(this).prev('.col-sm-6').find("select#language").val();
console.log(language);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="buildyourform">
<div class="row">
<div class="col-sm-6">
<div class="input-group mb-2">
<select class="form-control" id="language">
#foreach($language as $l)
<option value="{{$l->id}}" >{{$l->name}}</option>
#endforeach
</select>
</div>
</div>
<a href="javascript:void(0)" id="save-button" class="btn btn-light btn-sm ">
<i class="fa fa-ban"></i>
Upload
</a>
</div>
</div>
i am trying for some days to make this working but i really can't alone..
I want to use quilljs on my project, but because i dont know js, i want to insert data using php.
I found this QuillJS doesn't work with textarea i tryed everything but its just not working.
In the end i created an input hidden but i dont know how to populate it, i need js for that. Please help me.
This is my quill html code.
<form action="test.php" method="post" class="col s12" id="idform">
<div class="row">
<div class="input-field col s12">
<!-- Snow Editor start -->
<section class="snow-editor" >
<div class="row">
<div class="col s12">
<div class="card">
<div class="card-content">
<div class="row">
<div class="col s12">
<div id="snow-wrapper">
<div id="snow-container">
<div class="quill-toolbar">
<span class="ql-formats">
<select class="ql-header browser-default">
<option value="1">Heading</option>
<option value="2">Subheading</option>
<option selected>Normal</option>
</select>
</span>
<span class="ql-formats">
<button class="ql-bold"></button>
<button class="ql-italic"></button>
<button class="ql-underline"></button>
</span>
<span class="ql-formats">
<button class="ql-list" value="ordered"></button>
<button class="ql-list" value="bullet"></button>
</span>
<span class="ql-formats">
<button class="ql-link"></button>
<!-- <button class="ql-image"></button> -->
<button class="ql-video"></button>
</span>
<span class="ql-formats">
<button class="ql-formula"></button>
<button class="ql-code-block"></button>
</span>
</div>
<div class="form-group">
<input name="inputname" type="hidden">
<div id="editor-container" class="editor">
<p><br></p>
<p><br></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Snow Editor end -->
</div>
</div>
<div class="row">
<div class="col s6 m6 l6">
<button id="idbutton" class="waves-effect waves-light btn right" type="submit" name="postbutton">Post</button>
</div>
</div>
</form>
I tryed this, but is not working. It insert on my db but without any info (the input area is not populated).
var form = document.querySelector('form');
form.onsubmit = function() {
// Populate hidden form on submit
var about = document.querySelector('input[name=inputname]');
about.value = JSON.stringify(quill.getContents());
console.log("Submitted", $(form).serialize(), $(form).serializeArray());
// No back end to actually submit to!
alert('Open the console to see the submit data!')
return false;
};
Now I have multiples PHP for loop in my project exactly the same like one below but with different PHP variables of course. I also have an add button with appends a div element. The problem is because I have many for-loop and each for-loop has an add button so when I click on one add button of a particular div it appends a new div to all.
<div class="appendOuter">
<?php
foreach($query as $data){
$id = $data['ID'];
$initialAccess = $data['Access'];
if(strlen($initialAccess) > 3){
echo '
<div class="box" >
<input type="hidden" value='.$id.' class="ID">
<textarea class="Access">'.$Access.'</textarea>
</div>';
}
}
?>
<div class="text-center">
<button class="btn btn-success btn-add" type="button" onclick="addMorediv(this)">
<span class="glyphicon glyphicon-plus"></span>
</button>
</div>
</div>
My javascript to append a new div
<script>
function addMorediv(index){
var element =$("<div class='box'><textarea class='Access'></textarea><i class='far fa-flag'></i></div>");
element.appendTo('.appendOuter');
}
</script>
Assuming that all your other HTML structure is similar to what you've demoed:
element.appendTo($(this).parent().parent());
Are you looking for something like this? Where when you click the add button, it adds a new text area under the existing textarea(s) already within that row? This is a jQuery specific answer, and doesn't require the "onclick" of button that you were using. It is also adding your content within a parent "row" div for ease of access navigating the DOM during the click event. So in your PHP for loop, you would echo out 1 of the rows in my example, using your PHP variables in the appropriate places like in your example.
$('.btn-add').on('click', function() {
var $box = $(this).parent().parent().find('.box:last');
var $element = $("<div class='box'><textarea class='Access'></textarea><i class='far fa-flag'></i></div>");
$element.appendTo($box);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="appendOuter">
<!-- Assume your PHP generated 3 ".row" div rows in for loop -->
<div class="row">
<div class="box">
<input type="hidden" value="1" class="ID">
<textarea class="Access">1</textarea>
</div>
<div class="text-center" style="padding:10px;">
<button class="btn btn-success btn-add" type="button">
<span class="glyphicon glyphicon-plus">Add +</span>
</button>
</div>
</div>
<div class="row">
<div class="box">
<input type="hidden" value="2" class="ID">
<textarea class="Access">2</textarea>
</div>
<div class="text-center" style="padding:10px;">
<button class="btn btn-success btn-add" type="button">
<span class="glyphicon glyphicon-plus">Add +</span>
</button>
</div>
</div>
<div class="row">
<div class="box">
<input type="hidden" value="3" class="ID">
<textarea class="Access">3</textarea>
</div>
<div class="text-center" style="padding:10px;">
<button class="btn btn-success btn-add" type="button">
<span class="glyphicon glyphicon-plus">Add +</span>
</button>
</div>
</div>
</div>
I have one page website, with three forms. The first form has class active and the rest are hidden. All forms have buttons with same class .all-pages.
When I click on next button I want the first page to get class hidden, and second get active. When I'm on the second form click on the SAME button NEXT I want the second page to get class hidden, and the third page get active. Please HELP ME :)
And please just JavaScript.
I have 3 forms like this:
<div class="container-fluid"> <!-- first page container -->
<div class="row">
<div class="col-lg-5 col-lg-offset-3">
<form class="well margin-form-top form-color-bg page1">
<div class="row"> <!-- webpage name -->
<div class="col-lg-4 col-lg-offset-4">
<h2>Book a Room</h2>
</div>
</div>
<div class="row"> <!-- information about webpage -->
<div class="col-lg-7 col-lg-offset-2 h4">
<p>This information will let us know more about you.</p>
</div>
</div>
<div class="row"> <!-- navigation -->
<div class="col-lg-12 button-padding-zero">
<ul class="nav nav-pills nav-justified btn-group">
<button type="button" class="btn btn-danger btn-default btn-lg button-width navigation-font-size border-r grey-bg all-pages red active" data-page="0">
<b>ACCOUT</b>
</button>
<button type="button" class="btn btn-default btn-default btn-lg button-width navigation-font-size border-l-r grey-bg all-pages red" data-page="1">
<b>ROOM TYPE</b>
</button>
<button type="button" class="btn btn-default btn-default btn-lg button-width navigation-font-size border-l grey-bg all-pages red" data-page="2">
<b>EXTRA DETAILS</b>
</button>
</ul>
</div>
</div>
<br>
<div class="row"> <!-- let's start -->
<div class="col-lg-5 col-lg-offset-4 h4">
<p>Let's start with the basic details.</p>
</div>
</div>
<br>
<div class="row"> <!-- first row email and country -->
<div class="col-lg-5 col-lg-offset-0">
<div class="input-group">
<input type="email" class="input-sm btn input-width text-left" placeholder="Your Email">
</div>
</div>
<div class="col-lg-6 col-lg-offset-1 button-padding-zero">
<select class="form-control input-sm btn input-width">
<option value="" selected>Country</option>
<option>Serbia</option>
<option>Russia</option>
<option>Brazil</option>
</select>
</div>
</div>
<br>
<div class="row"> <!-- 2nd row password and budget -->
<div class="col-lg-5 col-lg-offset-0">
<div class="input-group">
<input type="password" class="input-sm btn input-width text-left" placeholder="Your Password">
</div>
</div>
<div class="col-lg-6 col-lg-offset-1 button-padding-zero">
<select class="form-control input-sm btn input-width">
<option value="" selected>Daily Budget</option>
<option>100$</option>
<option>200$</option>
<option>300$</option>
</select>
</div>
</div>
<br>
<br>
<br>
<div class="row">
<div class="col-lg-3 col-lg-offset-9">
<button type="button" id="next-button" class="btn btn-default btn-danger btn-lg button-next-width all-pages" data-page="0">NEXT</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
var page1 = document.querySelector('.page1');
var page2 = document.querySelector('.page2');
var page3 = document.querySelector('.page3');
var emptyArrey = [];
var nextButtons = document.querySelectorAll('.all-pages');
function nextFunction(event) {
// debugger;
var allButtons = document.querySelectorAll('.all-pages');
for (var i = 0; i < allButtons.length; i++) {
var oneButton = allButtons[i].dataset.page;
if (allButtons[i].dataset.page === '0') {
page1.classList.add('hidden');
page2.classList.remove('hidden');
return;
debugger;
} else {
page2.classList.add('hidden');
page3.classList.remove('hidden');
}
}
}
for (var nextButton of nextButtons){
nextButton.addEventListener('click', nextFunction);
}
You could use the button's attribute data-page to keep track of which form you're currently on, and then show the appropriate form.
// give your button the id "next-button"
var currentPage = document.getElementByID("next-button").getAttribute("data-page");
Once you know what form you're on, then you can hide the others as needed
If I understood your question, here is possible solution.
const nextButtons = document.querySelectorAll('.all-pages');
const pages = document.querySelectorAll('.page');
nextButtons.forEach(btn => {
btn.addEventListener('click', () => {
pages.forEach(page => {
page.hidden = true;
});
const pageActive = document.querySelector(`.page-${btn.dataset.page}`);
pageActive.hidden = false;
})
})
<div class="page page-1">
<button class="all-pages" data-page="2">NEXT 2</button>
</div>
<div class="page page-2" hidden=true>
<button class="all-pages" data-page="3">NEXT 3</button>
</div>
<div class="page page-3" hidden=true>
<button class="all-pages" data-page="1">NEXT 1</button>
</div>
I posted a question earlier wrt dynamically created forms, and got excellent advice. At the moment I have a list of forms, formCELL, each created as follows.
html
<div class="container">
<div class="container-element" id="1">
<h3>HEADER</h3>
<form action="refresh.php" id="formCELL" method="post" name="form_1">
<div class="panel-body">
<div class="col-xs-10 com">
CONTENT GOES HERE
</div>
<div class="col-xs-2 btn">
<button class="btn btn-primary" id="refresh" type="submit">Refresh</button>
</div>
</div>
</form>
</div>
<div class="container-element" id="2">
<h3>HEADER</h3>
<form action="refresh.php" id="formCELL" method="post" name="form_2">
<div class="panel-body">
<div class="col-xs-10 com">
CONTENT GOES HERE
</div>
<div class="col-xs-2 btn">
<button class="btn btn-primary" id="refresh" type="submit">Refresh</button>
</div>
</div>
</form>
</div>
<div class="container-element" id="3">
<h3>HEADER</h3>
<form action="refresh.php" id="formCELL" method="post" name="form_3">
<div class="panel-body">
<div class="col-xs-10 com">
CONTENT GOES HERE
</div>
<div class="col-xs-2 btn">
<button class="btn btn-primary" id="refresh" type="submit">Refresh</button>
</div>
</div>
</form>
</div>
<div class="container-element" id="4">
<h3>HEADER</h3>
<form action="refresh.php" id="formCELL" method="post" name="form_4">
<div class="panel-body">
<div class="col-xs-10 com">
CONTENT GOES HERE
</div>
<div class="col-xs-2 btn">
<button class="btn btn-primary" id="refresh" type="submit">Refresh</button>
</div>
</div>
</form>
</div>
</div>
javascript
$(document).ready(function() {
$('#formMAIN').submit(function(event) {
//formCELL is generated here through AJAX call.....
});
});
$('#formCELL').submit(function(event) {
// process the form
alert("about to submit");
//AJAX call to go here
var user_id = $(this).closest("form").attr('id');
alert(user_id);
event.preventDefault();
});
I am trying to get the id of the form being submitted so I can process it further, and I've tried diferent variations of $(this).closest("form").attr('id'); and all return a value of undefined
How can I get the id of the form being submitted?
You can use event.target.id to get form id
Just bind the "submit" event to whole form and then use
$(this).attr('id');
Maybe use data-id bro .
Put data-id as attribute in form
So you can easily get it using
$(this).attr('data-id')