I built a webpage for a professor at USF. I was wondering how to make the form submit button in the image below show up inline with the text. It looks sort of funny as is.
My current code is,
<div>The term $table is not in DDIRANK, but there are enough search results on PubMed for us to add it. To add the term, please click this button<form action=\"add_term.php\" target=\"_blank\" method=\"post\"><input type=\"hidden\" value=\"$table\" name=\"add\"><input type=\"submit\" value=\"Add $table to database\"></form> and wait for the page to load.</div>;
To make the submit button inline with the text field you will need to go to add float: left; to the button's CSS.
Declare the CSS attribute like so:
<form style="float: left">...
Related
I am trying to make a text-based (With ASCII art) RPG game and I am having trouble with the opening sequences. Here's my script for the opening:
<body>
<pre>
Welcome To __________! <!-- No name yet :P -->
<button onclick="menuButtonPressed1()" type="button">Cool, is this the whole game?</button>
<p id="demo"></p>
<script>
function menuButtonPressed1() {
document.getElementById("demo").innerHTML = "No, there's more!";
}
</script>
</pre>
</body>
This code works fine for getting the button to show the text and all, but what I want to do is make it so that the button clears the current text on screen and changes the button to a different text. For example, what I want is that it says something, but when I press the button it will change the text and the button's text will change too. So if you see: (Ignore the color)
Welcome to ____!
(There will be button here with text "Cool, is this the whole game?")
and you press it you'll clear all the current text on screen and get only: (Again, ignore the color)
Hello to you!
(There is another button here with different text)
If there is something I could add to this to make it easier to understand or easier to answer etc. please tell me so I can correct it. I'm not very good with html yet, so if I might have gotten something completely wrong in my code, I'm sure you can understand.
you should wrap the text in some tag like <p> or <span>. Then give it an ID and use that ID at onClick of button to change that text along with button text.
It just use the same code with different ID.
I am sort of a beginner at this, but my objective is to have the header of my webpage changing, depending on what button was clicked on another page.
More precisely, I have a webpage with 7 buttons on it coded like this:
<form action="contribution.html">
<input type="submit" style="margin-right: 80px;margin-top: 25px;" value="I contribute">
</form>
All of the buttons lead to the same "contribution.html" page, but I would like the header of that page to be different depending on what button the user clicked. There must be a way to do this without creating 7 different "contribution.html" pages for each button... I assume.
Can anyone help, please?
When you do form submission server receives HTTP post request that contains button clicked. Having that request server side can generate proper content of <title> element. Browser will render that text in <title> as a caption of tab/page.
Thus you will need something like PHP or the like on your server. In this case you can have single contribution.php file (but not static html).
Using javascript is the easiest solution. If you spend a little time learning jQuery, you could use something like this:
// A reference to your "header" element
var header = $('.header');
// When the submit button is clicked
$('[type=submit]').click(function(){
// Update the header with the button's text
header.text( $(this).value() );
});
Though I'd recommend using a more specific selector for the buttons you want this to work for, [type-submit] is too generic but I used it because you did.
Use a server-side language and <a> tags instead of a form.
In PHP it will look something like this:
10$
20$
30$
etc.
Then on contribution.php you can get the request data from $_GET['sum'] and act accordingly.
Depending on your application and if you want to be SEO Friendly you should look into this answer How to dynamically change a web page's title?
I want dynamically add text-box in html page when user is press a button. and after that i want to get the respective field value or all field value.
I tried doing ng-repeat but it will not work. can anyone tell me how i will achieve this.
I would indeed use ng-repeat, and just push a new object onto the array. Maybe something like this?
<button ng-click="textFields.push("")">Add</button>
<textarea ng-repeat="val in textFields" ng-model="val"></textarea>
Well there are a few things you could try. One of them is loading a hidden div when clicked on the button. The hidden div contains the text box.
Like this :
$(document).ready(function(){
$("#hiddendiv").hide();
$("#button").click(function(){
$("#zmedia").show();
}};
And in your html form you just add a div that contains a textbox and the id of the dive should be "hiddendiv". The downside is that once the hidden div is loaded, it cant be removed. There are other scripts that are a lot more sophisticated, check these links out:
https://github.com/wam/jquery-addable
http://www.randomsnippets.com/2008/02/21/how-to-dynamically-add-form-elements-via-javascript/
Is there a way to make only a portion of text in a text area static or read-only without disabling the entire text area?
Basically, I want a person to be able to update a status using a textarea, and the static text would have their name and the verb is at the begining, like:
Eric is: "Riding a bike"
Is this possible?
Basic text area <input="textarea" blah="" blah"">
Further to the wishes of Jukka,
Not without using javascript to fake the effect. You'd have to handle keyboard events, mouse events and be able to identify your caret position within the textarea - all in a cross-browser friendly way. I'd run to the hills with my hands in the air!....
Or use something that makes more sense -
Show the "Eric is:" inside a label, have the "Riding a bike" inside a text input. The javascript needed to populate the label with that text is minuscule compared to that required to do it all with a textarea.
The markup could be as simple as:
<label>Eric is: <input type='textarea' blah="\" blah\"" value='Riding a bike'></label>
<input type=image ...> is not the way to go because it submits the x,y coordinates.
When I click on an icon, I want to submit as POST or PUT, so there should be some form, input actions.
<form action="" method="PUT" name="abc_table_form">
display icons
</form>
What is the right way to do it?
Thanks.
<table>
<row1> <form action="http://google.com/123/"> <button> icon1 </button></form> </row1>
<row2> <form action="http://google.com/456/"> <button> icon1 </button></form> </row2>
</table>
The form adds extra space to the table. It looks ugly. The action in the form is different, and I believe <button> here is based on the action of form. What is the right way to deal with this?
Forms only support POST and GET.
An image input will submit a POST form (although since they are designed to be used as a server side image map, they aren't really appropriate unless you want to submit the coordinates on the image).
<button type="submit"> <img src="..." alt="Submit"> </button> is the more semantic way to submit the form using an image (although some versions of Internet Explorer will submit an odd value in response to this).
If you want to make HTTP requests using other methods (i.e. PUT) from a browser then you need to use XMLHttpRequest and construct it using JavaScript. Browser support for this is a bit variable.
<table>
<tr><td> <form action="..." method=POST><button><img src=test.png alt=Test></button>
<input type=hidden name=foo value=bar></form>
<tr> ...
</table>
That is, wrap each image in a button and wrap the button in a form of its own. Even if the forms all have the same action attribute, you need separate forms to pass different data (different values for the parameter foo in the example) in a robust pure-HTML way. The reason is that you do this using hidden fields, and they relate to the enclosing form.
For styling, consider these:
form { display: inline; }
button { border: none; padding: 0; }
They will make the images appear as such, with no hint of their being clickable, so you should probably explain in prose on the page what they do.
You cannot make a form wrap a table row (except of course if it’s a one-row table). You would just have to include the various parameters separately inside each form (there’s no problem in having identical input type=hidden elements inside different forms). It’s dull, but you’re probably generating the page programmatically anyway, and programs love to do dull things.