I would like to pass whatever the user input in the text area to the button to open a new page as shown in the graph.
How should I create (set?) the variable "{{ analysis_id }}"?
Thank you!
Please check the image here
Text area:
<div class="field">
<label for="geneid">Input sequence (Amino acid or Nucleotide) or Gene ID </label>
<textarea name="geneid" id="geneid" rows="6"></textarea>
</div>
The button:
<button onclick="location.href='/analysis/{{ analysis_id }}';" type="submit" class="btn btn-success">Submit</button>
This entire approach is mistaken. You don't pass data to a button. You shouldn't have that onclick function at all; instead, wrap both textarea and button in a form element. Then the form will be submitted to a view, from where you can access the data via the request and pass it to the next template.
Related
I need to have an HTML document that can contain multiple input fields.
Starting with one field, a submit should create another input field as a copy of itself.
So I declared it with HTML code and wrote a function to append a copy of it to my div.
For testing purposes, I made a button to call my js function, too.
Now I'm confused as clicking the button will create a new field and pushing enter inside a field will initialize my HTML document, deleting previously created fields.
Can anybody figure out why?
Kind regards, Tommy
<button onclick="createRow()">New row</button>
<div id="criteriaTableBody">
<div class="tr" id="criteriaRow">
<div class="td">
<form onsubmit="createRow()">
<input type="text" name="text" value="">
</form>
</div>
</div>
</div>
<script>
function createRow() {
var row = document.getElementById("criteriaRow");
var newRow = row.cloneNode(true);
document.getElementById("criteriaTableBody").appendChild(newRow);
}
</script>
That's because your form submits. Forms are used to submit data to another page, so the entered data can be processed. You don't want this, instead you want to prevent the form from submitting using Event.preventDefault().
function createRow(event) { // Mind "event" here
// Prevent form from submitting (reloading the page and deleting your "progress")
event.preventDefault();
var row = document.getElementById("criteriaRow");
var newRow = row.cloneNode(true);
document.getElementById("criteriaTableBody").appendChild(newRow);
}
<button onclick="createRow(event)">New row</button> <!-- Pass event here! -->
<div id="criteriaTableBody">
<div class="tr" id="criteriaRow">
<div class="td">
<form onsubmit="createRow(event)"> <!-- Pass event here! -->
<input type="text" name="text" value="">
</form>
</div>
</div>
</div>
I also recommend avoiding HTML attributes like onclick, onsubmit, etc. Use an EventListener instead.
Pressing enter will submit the form.
The submit event handler will run, then the contents of the form will be sent to the URL specified by the action (the current URL since there isn't an action).
This loads a new page.
Since there is no action, the new page is a brand new, unmodified by JS, copy of the current page.
Avoid intrinsic event attributes like onsubmit. Use JavaScript event binding instead. Learn about the Event object and its preventDefault method.
How I can change the text that is in the jdialog box message for each row?
As you can see, in every row in the column Order Details there is a Show button.
I would like for each row to have different text there.
I tried changing the name values, and I also put inside every td element the code for the button, but it still doesn't work.
The specific code for the text:
<div id="dialog-form" title="Order Details">
<p class="validateTips">Spicy Sandwitch</p>
<p class="validateTips">More</p>
<form>
<fieldset>
<label for="name">More Comments</label>
<p class="validateTips">Sandwitch only lettuce</p>
<!-- Allow form submission with keyboard without duplicating the dialog button -->
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</form>
</div>
<div id="users-contain" class="ui-widget"
The full code here
In order to make the content of the dialog changes from record to another
You didn't explain How will you load the custom content? but I'll guide you to how to customize the dialog content per record.
First: Create a JS method called openDialog(), this method can take the context of the dialog as a parameter, or it may take just the record ID and load the content via AJAX or something
function openDialog(content="", record_id=0)
{
if(content.length > 0) // if you're passing content as a paramter
dialog.html(content);
if(record_id!=0) // if you're passing the record ID as a paramter
{
// load content via ajax or something
dialog.html("loaded content via AJAX for user number "+record_id);
}
dialog.dialog("open");
}
Then call this method in each "Show" button you have
<button id="create-user-1" onclick="openDialog('Hello User #1');">New Show</button>
<button id="create-user-2" onclick="openDialog('',2);">New Show</button>
Update actually your full code is a little bit messy but as you requested, I tried to apply my solution on your fiddle code, here's my working example
https://jsfiddle.net/doaa_magdy_55/qtvw75z6/20/#&togetherjs=jSCLnBoUen
atm the text that appears in there is hardcoded on your html
<p class="validateTips">Spicy Sandwitch</p>
unless you change it with javascript this text "Spicy sandwitch" will always be the same no matter how much times you create a new one. I didnt really read all your code because its way too big , but you can do something like this to adress each one of your entries individually(atribute them ids)
<div id="dialog-form" title="Order Details">
<p id="something1.0" class="validateTips">Spicy Sandwitch</p>
<p id="something1.5" class="validateTips">More</p>
<form>
<fieldset>
<label id="something2.0" for="name">More Comments</label>
<p id="something3.0" class="validateTips">Sandwitch only lettuce</p>
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
and then, when you create a new entrance of your row , you can go to each id specifically and decide what is shown
$('#something1.0').text('new Spicy sandwitch');
$('#something2.0').text('moreeee');
Make the following changes to your code:
Define elements inside the dialog with references to hold your dynamic content
<div id="dialog-form" title="Order Details">
<p class="validateTips field1"></p>
<p class="validateTips">More</p>
<form>
<fieldset>
<label for="name">More Comments</label>
<p class="validateTips field2"></p>
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</form>
</div>
Define the content you want for each row, statically or via AJAX
var order1 = {
field1: 'Spicy Sandwich',
field2: 'Sandwich Only Lettuce'
};
var order2 = {
field1: 'Epic Pizza',
field2: 'Pizza Without Pinneaple'
};
var orders = [order1, order2];
Edit the code to populate the dialog
$(".showDialog").button().on("click", function() {
var row = $(this).closest('tr').index();
$('#dialog-form .field1').html(orders[row].field1);
$('#dialog-form .field2').html(orders[row].field2);
dialog.dialog("open");
});
I have more forms like this:
<form ng-submit="addReply(x)" class="dd animated slideInDown" >
<div class="form-group">
<text-angular ng-model="form.reply"></text-angular>
</div>
<div class="form-group">
<input type="submit" class="btn btn-default pull-right" value="Send" />
</div>
</form>
Have problem with text area because of ng-model="form.reply" when I change some textarea all other text areas are automatically changed... How to prevent it?
Here is example:
http://jsfiddle.net/oLv61qtr/
I just need change one not both...
The answer is: You can't do it.
If you have multiple text fields using the same model variable, they will always display the same value. At the end of the day it is the same variable, so how can it have different values in different places?
Use different model variable on different forms if you need. That seems like the best solution.
I have a JSP page in which there are two forms.
One is the default and another is hidden.
On default form, there is a link to the hidden form. On click of this link, the hidden form appears which has some input fields and submit button.
When I click on submit, obviously the form gets submitted.
But when the output comes, the page gets loaded and shows the default form. I want to show hidden form instead. What should I do?
My JSP page has following code structure:
<div id="1st_form">
<form id="defaultForm" action="/searchModel/search">
%{-- form input fields--}%
<div style="float: left; margin-left: 15px;">
Advanced Search
</div>
</form>
</div>
<div id="2nd_form" hidden="hidden">
<form id="hiddenForm" action="/searchModel/search">
%{-- form input fields--}%
<input type="submit" id="searchButton" value="Advanced Search" >
<div style="float: left; margin-left: 15px;">
Advanced Search
</div>
</form>
</div>
And javascript functions are as follows:
function advancedSearch(){
$("#1st_form").hide();
$("#2nd_form").show();
}
function normalSearch(){
$("#2nd_form").hide();
$("#1st_form").show();
}
The problem is, when you send any HTML page to the client, all changes you did with Javascript previously will be lost. That is why you see the default form visible again after submit.
What you want to do is:
When the "Advanced Search"-button is clicked, show the "Advances Search" form and make the "Default" form hidden in the response.
What is something you need to do on server-side, because the client does not know which button submitted the form to the server.
So, you need check if the form was submitted by the "Advanced Search"-button on server side. To be able to do this, you need to give the button a name:
<input type="submit" id="searchButton"
name="searchButton" value="Advanced Search" >
Now, when this button is clicked, it's value will be sent to the server. In this case, Advanced Search.
Next, you need to check if this value was sent to the server in your JSP:
<div id="1st_form" ${param.searchButton == 'Advanced Search'?'hidden':''} >
...
</div>
<div id="2nd_form" ${param.searchButton == 'Advanced Search'?'':'hidden'} >
...
</div>
Note: param is an implicit object in Expression Language.
This way, when you first open the page, param.searchButton will be empty and it will show the default search. When the "Advanced Search" button was submitted, param.searchButton will be Advanced Search, and the advanced search will be visible.
I just found out that every time onclick event for my <button> placed inside <form> tag triggers, form submits it's data as if i clicked <input type='submit'>.
I don't want that. Buttons inside my form serve other task, form shouldn't submit data after i clicked one of them.
To be more clear, i want this code:
<form action="http://www.google.com" method="POST">
<button onclick="alert('hi!')">Button</button>
<br>
<input type="submit" value="submit"/>
</form>
to show alert "hi!" when i click on the Button and it shouldn't open Google after that. It should only show Google when i press "submit".
Specify type="button":
<button type="button" onclick="alert('hi!')">Button</button>
From the linked article:
This [submit] is the default if the attribute is not specified
Try this..
onclick="alert('hi!'); return false;"
With jQuery use a span rather than an input, put use the .button call and then set a click event.