I have a dropdown value out of forms and a table wih many rows to submit data.
What I'd like to do is during submit of each row submit also the getting value from the drop down list.
My table it's look like My code for dropdrown list is
<div class="panel-heading">
<label for="cat">Select a Category</label>
<select class="form-control" id='category' name="category" data-live-search="true" style="max-width:40%;" >
<?=$html?>
</select>
</div>
And the part for table rows is
<form id="sync-cat" action="controllers/product-add.php" target="_blank">
<input type="hidden" name="product" value="<?=$product['id']?>">
<button type="submit" class="btn btn-info btn-md">Sync Products</button>
</form>
I've tried with javascript copying selected value in hidden input but that run only for the first row. Also I've tried a hidden input above the dropdown list copying the select option but I didn't find a way to get value when I use submit button "Sync Products"
They should share the same form in HTML so that when the form is posted all available information is present in the form. Regardless your dropdown should also be in it's own form (if you don't put them in the same form) to be valid.
If you wanted to continue as is ignoring the proper things to consider above you could do it with something like this. This solution will make things a bit more complicated. I would recommend taking the above advice.
var form = document.getElementById('sync-cat')
form.addEventListener('submit', function(e) {
var valueFromDropDown = document.getElementById('category').value;
// Post the rest of the form
});
Follow the rest of this guide to complete the JavaScript post
Related
I am developing a Java, Spring Boot, Spring MVC, Thymeleaf application. It is a fairly typical application which displays data in tables and allows users to interact with the data (view, delete, download).
Data is fetched by calling a Controller method, which queries a data source (A Documentum Repository in this case). The controller adds the results as list to the Model and directs the user to an HTML page. On the HTML page, Thymeleaf accesses the results list from the Model, iterates through it and displays each entry as a row on a table. For each row, a delete button is added allowing the user to delete rows.
On clicking a delete button for any particular row, a modal pop up allows the user to confirm, and if they do, a Controller method is called with the id of the data object to be deleted. The controller deletes the record from Documentum, then performs a new query, adds the results list to the Model and returns the user to the View where the results table is displayed again (with one less row).
Standard stuff so far and it all works fine. However, because of the complexity of the data required to construct the new Documentum query, I am having to pass a lot of hidden objects from the View to the Controller and my code looks messy and confusing. The body of my delete modal is pasted at the foot of this post to illustrate this.
My question is, would it be possible/good practice to do the following instead when the user actions a delete event:
Call a simpler Controller method to which only deletes the data item from Documentum - it does not re-query or redirect - the user remains on the results page.
Remove the corresponding row from the results list that is already in the model and refresh the results table. This way, my form would be much simpler and would not require all the hidden fields.
I am thinking that perhaps I could write a JavaScript function that would take the results list as an argument. It would then construct the delete modal and include a callback method which would delete the row from the results list on receipt of a successful response from the Controller.
I would really appreciate any guidance, thoughts and/or suggestions as to whether this is a reasonable approach and technically possible and if anyone has managed to succeed in doing something similar. If there is not a simple, good practice way of doing what I suggest, then I will just live with the complex form and lots of hidden fields that is currently working!
<div class="modal-body">
<div class="container pt-3 pb-5 align-items-center">
<form id="delete_file" th:object="${metadataListWrapper}"
th:action="#{/content/delete/{app}/docid/{docid}}"
method="post">
<label for="deleteReason"
class="col-form-label">Reason for Deletion</label><br/>
<input th:field="*{message}"
id="deleteReason"
placeholder="250 characters"
type="text"
maxlength="250"
class="form-control form-control-sm"/>
<br/>
<div th:if="${not #lists.isEmpty(metadataListWrapper.metadataHolderList)}" class="mb-3"
th:each="metadataHolder, iStat : ${metadataListWrapper.metadataHolderList}">
<input th:field="*{metadataHolderList[__${iStat.index}__].fieldName}" type="hidden"/>
<input th:field="*{metadataHolderList[__${iStat.index}__].type}" type="hidden"/>
<input th:field="*{metadataHolderList[__${iStat.index}__].value}" type="hidden"/>
<input th:field="*{metadataHolderList[__${iStat.index}__].operator}" type="hidden"/>
<input th:field="*{metadataHolderList[__${iStat.index}__].label}" type="hidden"/>
<input th:field="*{metadataHolderList[__${iStat.index}__].onSearchPage}" type="hidden"/>
<input th:field="*{metadataHolderList[__${iStat.index}__].onIngestionPage}" type="hidden"/>
<input th:field="*{metadataHolderList[__${iStat.index}__].required}" type="hidden"/>
<input th:field="*{metadataHolderList[__${iStat.index}__].selectOptions}" type="hidden"/>
<input th:field="*{metadataHolderList[__${iStat.index}__].urlParam}" type="hidden"/>
</div>
<div class="col-md-12 text-center">
<button type="submit" class="btn btn-sm btn-danger">Delete</button>
<button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Cancel</button>
</div>
</form>
</div>
</div>
Can any body tell me the best practice or way to change Text field to the Button with value 0 or 1.
Let me clear what I want so i have here(see below) django form with the 2 field called Up_vote and Down_vote and when I submit it stores pretty nicely into the Votes table.
But what I what is to have two buttons like stacoverflow have for up_vote and down_vote and when someone press on the up_vote it should submit value 1 automatically to the database and when someone press the down_Vote it sould submit the value 0 to the database table.
see like this:
so basically how i can convert text fields to the two buttons, I dont now how i can do with the javascript or with other method.
It's basically a CSS style I will assume that you will not use AJAX
Create 2 forms one for up and other for down vote
Put the type attribute on the input to hidden and the value is 1 for the up vote and 0 for down vote and use CSS to style the submit button to appear like what you want
this how it should be in html
<!-- Up vote form -->
<form>
<input type="hidden" name="vote" value="1">
<button type="submit" class="up-vote-btn"></button>
</form>
<!-- Down vote form -->
<form>
<input type="hidden" name="vote" value="0">
<button type="submit" class="up-vote-btn"></button>
</form>
So I have a drop down box that posts to the page on a submit button.
I am trying to remove the submit button and make it so it posts when you change the drop down as its a much better way to work!
The value = "submit_button" and it gets picked up by:
// Check if form has been submited
if ($_POST['submit_button'])
{
// If form has been submited set $newCookieValue variable, set cookie and refresh webpage
$newCookieValue=$_POST['dbselector'];
The code I am trying to use is:
<form>
<select name="dbselector" onchange="this.form.submit()" style="margin-left:0.5em;">
<option value="option_1" selected="selected">option_1</option>
<option value="option_2">option_2</option>
</select>
<noscript><input type="submit" value="submit_button"/></noscript>
</form>
When I change the drop down from option 1 to option 2 it reloads the page but I don't think its posting the values as I can check the values by adding this into the top of the page:
<br> <?php var_dump($_POST['dbselector']) ?>
<br> <?php var_dump($_POST['submit_button'])?>
and they both return NULL?????
You need to state in your form that you are using POST via method in order to tell the form which HTTP method to use:
<form method="post">
...
</form>
I am completely new to Meteor and I'm trying to build a simple app. I currently have a form with 4 radio options and a submit button. When users click the submit button and I want to know which radio option they selected. I have no idea how to get started though. Can anyone help me? Below is my html and javascript code, respectively:
<form class="form-horizontal well mystery-form">
<fieldset class="col-md-offset-1">
<h2>{{question}}</h2>
<br>
<div class="form-group">
<div class="col-md-10 mystery-form">
{{#each answers}}
<div class="radio">
<label>
<input type="radio" name="mysteryForm" checked=""
style="margin-bottom: 0; margin-top: 0;">
{{answer}}
</label>
</div>
{{/each}}
<br>
<button type="reset" class="btn btn-default">Back</button>
<!-- Hide this when the answer is correct -->
<button type="submit" class="btn btn-primary">Check Answer</button>
<!-- Show only if the answer is correct -->
<button class="btn btn-primary">Next</button>
</div>
</div>
</fieldset>
</form>
JS:
Template.mystery.events({
"submit .mystery-form": function(event) {
// no idea what to do here
}
});
Semantics
You'll probably want to remove the whole wrapping .radio element. It's unnecessary. Try using as few elements as possible. It performs better and makes debugging easier.
Retrieving the checked input
The event object passed to an event-map callback has a property target. In your case that is .mystery-form. So you can use a simple jQuery selector to find the checked element:
$('input[name="mysteryForm"]:checked', event.target)
This will get you the checked value with the name mysteryForm. This was quiet straight forward. The problem is retrieving the value. Doing that would get sort of messy. So I'd just pass it to the element as a data- attribute:
<input type="radio" name="mysteryForm" checked="" style="margin-bottom: 0; margin-top: 0;" data-answer="{{ answer }}" >
Now you can simply do this:
$('input[name="mysteryForm"]:checked', event.target).data('answer')
First, you may want to prevent the normal form submission and avoid a page reload. As you are building a single page application you will want to do the form submission logic by yourself. Also, reloading the page by form submission does not make any sense in such application.
Secondly, you have to actually gather the data, and then do what you want with these data.
Put it all together and you get something like this:
Template.mystery.events({
"submit .mystery-form": function(event, template) {
//1. prevent default behavior (form submission)
event.preventDefault();
//2. get your data
//either by name (HTML name attribute)
var inputValue = template.mysteryForm.value;
//or by id (HTML id attribute)
var inputValue = template.find('#myId').value;
//3. Do whatever you want (method call for example?)
Meteor.call('myMethod', inputValue, function(error, result) {
//wait for the call result...
});
}
});
I am trying to set my HREF of my button to the text that was in the input field and the selected option from my select list, when the user clicks the Search button.
<div>
<div>
<input type="text" value="Keywords" style="width:206px" />
</div>
<div style="clear:both">
<select>
<option value="Test">Test</option>
</select>
</div>
<div>
<button>Search</button>
</div>
</div>
How do I set the href from the value of the input box and the selected value of the select list? I might need to create a form for this but I thought I could get away with something a little simpler. I just need to compile the search string and redirect the user to the appropriate page, since the search engine is already built.
Thanks!
Edit 1
Sorry guys I am using php to load the select list but I am not able to provide the code for how the select list gets populated since it has company sensitive information in it. I shouldn't have included that.
Using javascript, you can retrieve and value of a form field and handle it to what you need.
Suppose the select ID's select and the link ID's is link:
var value = document.getElementById('select').value;
document.getElementById('link').setAttribute('href', value);
With PHP only (no jQuery, no Javascript) you would use a submit-button in your form and work with $_POST:
1st your form (stripped down to basics):
<form method="post">
<input name="keywords" type="text" value="Keywords" style="width:206px" />
<select name="options">
<option value="Test">Test</option>
</select>
<input type="submit" name="ok" value="ok" />
</form>
2nd, on the beginning of your php-page that holds that form:
if (isset($_POST['ok'])) { // submit has been clicked...
if (isset($_POST[keywords])) { // there's input in keywords
$keywords = $_POST['keywords'];
// sanitize $keywords to prevent sql-injection
// go to the page you want to call...
// assuming there's no output before header ...
// and $keywords is in the right format ...
// and you retrieved $_POST['options'] to do sth with that, too
header('Location: http://www.url.com/page.php?key=$keywords');
} else exit('no keywords entered!');
}