I got an image with which links to another page using <img ...> .
How can I make it make a post like if it was a button <input type="submit"...>?
More generic approatch using JQuery library closest() and submit() buttons.
Here you do not have to specify whitch form you want to submit, submits the form it is in.
Submit Link
<input type="image" name="your_image_name" src="your_image_url.png" />
This will send the your_image_name.x and your_image_name.y values as it submits the form, which are the x and y coordinates of the position the user clicked the image.
It looks like you're trying to use an image to submit a form... in that case use
<input type="image" src="...">
If you really want to use an anchor then you have to use javascript:
...
input type=image will do it for you.
Untested / could be better:
<form action="page-you're-submitting-to.html" method="POST">
<img src="whatever.jpg" />
</form>
<html>
<?php
echo $_POST['c']." | ".$_POST['d']." | ".$_POST['e'];
?>
<form action="test.php" method="POST">
<input type="hidden" name="c" value="toto98">
<input type="hidden" name="d" value="toto97">
<input type="hidden" name="e" value="toto aaaaaaaaaaaaaaaaaaaa">
Click
</form>
</html>
So easy.
So easy.
What might be a handy addition to this is the possibility to change the post-url from the extra button so you can post to different urls with different buttons. This can be achieved by setting the form 'action' property. Here's the code for that when using jQuery:
$('#[href button name]').click(function(e) {
e.preventDefault();
$('#[form name]').attr('action', 'alternateurl.php');
$('#[form name]').submit();
});
The action-attribute has some issues with older jQuery versions, but on the latest you'll be good to go.
Something like this page ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>BSO Communication</title>
<style type="text/css">
.submit {
border : 0;
background : url(ok.gif) left top no-repeat;
height : 24px;
width : 24px;
cursor : pointer;
text-indent : -9999px;
}
html:first-child .submit {
padding-left : 1000px;
}
</style>
<!--[if IE]>
<style type="text/css">
.submit {
text-indent : 0;
color : expression(this.value = '');
}
</style>
<![endif]-->
</head>
<body>
<h1>Display input submit as image with CSS</h1>
<p>Take a look at the related article (in french).</p>
<form action="" method="get">
<fieldset>
<legend>Some form</legend>
<p class="field">
<label for="input">Some value</label>
<input type="text" id="input" name="value" />
<input type="submit" class="submit" />
</p>
</fieldset>
</form>
<hr />
<p>This page is part of the BSO Communication blog.</p>
</body>
</html>
Dont forget the "BUTTON" element wich can handle some more HTML inside...
We replace the submit button with this all the time on forms:
<form method="post" action="whatever.asp">
<input type=...n
<input type="image" name="Submit" src="/graphics/continue.gif" align="middle" border="0" alt="Continue">
</form>
Clicking the image submits the form. Hope that helps!
Related
I am trying to display the content just like in facebook.but i dint get it.i used iframe.can some one help me with this without using iframe.i want it to get independently ..like if user1 post it must be seperated from user2 ..but i didnt get it using iframe ii just got a linebreak ..
i here by attaching two images for idea sake facebook layout
this is my outcome.it would be helpful if u solve ...Thanks in Advance..atleast the working ui would be helpful
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<body>
<div id = "midle">
<div id="posts" >
<h1>WHAT'S UP?</h1>
<tr> <form method="POST" action="tryy.php" target="iframe_a" >
<textarea name="post" rows="5" cols=110" target="iframe_a" ></textarea>
<td><input id="button" type="submit" name="submit" value="POST" ></td>
</form>
<iframe width="100%" height="590" src="tryy.php" name="iframe_a"></iframe>
</div>
</div>
</html>
You can use ajax.
(replace the iframe with a div that for this example has the id "status")
<div id="status"></div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$.get(
'tryy.php',
function(response){
$("#status").html(response);
}
);
</script>
Inserted into your example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
#status {
background:#555;
width: 100%;
height: 590px;
}
</style>
</head>
<body>
<div id="midle">
<div id="posts">
<h1>WHAT'S UP?</h1>
<tr>
<form method="POST" action="tryy.php" target="iframe_a">
<textarea name="post" id="statusBox" rows="5" cols=110 target="iframe_a " ></textarea>
<td><input id="button" type="submit" name="submit " value="POST " ></td>
</form>
<div id="status"></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js "></script>
<script>
function updateStatusList(){
$.get(
'tryy.php',
function(response){
$("#status").html(response);
}
);
}
$("#button").click(function(e) {
e.preventDefault();
updateStatusList();
return false;
});
$("#statusBox").keydown(function(e) {
if(e.keyCode == 13){ // when return was pressed
updateStatusList();
}
});
</script>
</body>
</html>
PS:
Since you are new some hints:
You should use <!DOCTYPE html> instead.
Use a closing </body> tag ;)
Don't use td, tr elements without a table element (and you shouldn't actually use tables at all for layouting)
I am trying to highlight an input field in my form when a particular radio buttons is selected. While I have accomplished this, I do not understand why my particular solution works.
Here is the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<meta charset="UTF-8">
<script type="text/javascript" src="script.js"></script>
<title>Testing jQuery on Forms</title>
</head>
<body>
<div id="form">
<h3>The form</h3>
<form name="main_form">
<fieldset style="width: 300px;">
<legend>General Information</legend>
<p>Do you have a name?</p>
<input style="float: left" name="name_or" id="name_or_yes" type="radio" value="yes">
<legend for="name_or_yes">Yes</legend>
<input style="float: left" name="name_or" id="name_or_no" type="radio" value="no" checked="checked">
<legend for="name_or_no">No</legend>
<br/>
Name: <input type="text" name="name" id="#name_field">
</fieldset>
</form>
<button id="submit_form">Submit</button>
</div>
<div id="results"></div>
</body>
</html>
Here is the JS:
$(document).ready(function() {
$('#name_or_yes').click(function() {
$('input[name=name]').focus();
});
$('#submit_form').click(function() {
var toAdd = $("input[name=name]").val();
$('#results').append("<p>"+toAdd+"</p>");
});
});
I don't understand why focus() does not work on the name input field when I use it's id (#name_field'). It only works when i use the input[name=name] method. This is doubly confusing because the following works perfectly well:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(){
$("#txtfocus").focus();
});
</script>
</head>
<body>
<input type="text" id="txtfocus2"><br/>
This text box is set focused: <input type="text" id="txtfocus">
</body>
</html>
Any help or advice is appreciated!
Look at the id here:
<input type="text" name="name" id="#name_field">
Try it like this:
<input type="text" name="name" id="name_field">
The # is the id selector, but should not appear in the HTML.
Thank you both!
These are the kind of mistakes which happen when you spend too much time looking at the same piece of code!
I would like to upvote you however, I do not have sufficient reputation points to do so. :(
input's ID should be "name_field" instead of "#name_field":
<input type="text" name="name" id="name_field">
i got got confused when i run the static js and html below
i want to dynamicly add option by clicking button, but when i put it under the form , it will do acition post, unless i put it out of form ,it works. what's the reason? i didn't set type as "submit" for the add button, does any button clicked in form will cause form action?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>作业管理</title>
</head>
<body>
<form enctype="multipart/form-data" method="POST" >
<div id="postform">
本次作业标题
<input type="text" name="title" />
<br>
<div class="postoption">
添加项目
<input type="text" name="option[]" />
音频文件
<input type="file" name="radio[]" />
答案
<input type="text" name="answer[]" />
</div>
</div>
<button id="add">添加输入项</button>
<input type="submit" value="提交" />
</form>
<script type="text/javascript">
window.onload = function(){
var add = document.getElementById("add");
add.onclick = function(){
addOption();
}
}
function addOption(){
var postForm = document.getElementById("postform");
var postoptions = document.getElementsByClassName("postoption");
var op = postoptions[0];
var optionClone = op.cloneNode(true);
postForm.appendChild(optionClone);
};
</script>
</body>
</html>
The <button> element is a submit button by default. You can change this with the type="button" attribute, which makes it do nothing by default, or calling preventDefault on the event. But I'd go with the attribute since then your intention is semantically clear without actually running the script.
I insert fields on my page using the JQuery .html() function. The fields have a class attribute, but it seems like the CSS, which is declared in the header part of the page doesn't apply to the element.
I believe it just impact class selector, since I have a #editZone input selector that work like a charm.
Here's a code sample:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<style type="text/css">
#editZone input, #editZone textarea, #editZone select{
border:0px;
}
#editZone .dependant {
background-color:#CCC;
border-bottom:1px solid #333;
}
#editZone .original {
background-color:#FFF;
border-bottom:1px solid #300;
}
</style>
</head>
<body>
<div id="headZone">
Template:
<select id="template">
</select>
<input type="button" id="generateTpl" value="Go" />
</div>
<div id="editZone" style="background-color:#ccc;">content will be filled here upon template selection</div>
<div id="previewZone">final</div>
</body>
</html>
Here's a content sample (from firebug):
<div style="background-color:#ccc;" id="editZone"><br>
<br>
Name - <input type="" class="original" value="" name="first_name" id="first_name_1"> <input type="" class="original" value="" name="last_name" id="last_name_1"><br>
Title<br>
...
You should close the html tags and I think it should work then. Close the tags like "<tagname />" or "<tagname></tagname>". I mean input, br and all the opened tags are not closed.
Hope it helps.
Cheers
In the style declaration, I had a weird space between the class name and the {.
Ok this is wheat I have so far. IF someone could help me out. I had to change the color of the background when you click on a button. And I also have to Use document.getElementById('yourelementid') to both find the value of the textarea and to change the basic text created in the div. But I don't know how to do that i have been researching online. I think i am getting a little confused about where to put things at in here thanks.
Here is what I have so far....
<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http:www.w3.org/1999/xhtml">
<head>
<title>DOM</title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<script language="JavaScript">
<!-- Begin
function newbg(thecolor)
{
document.bgColor=thecolor;
}
// End -->
</script>
<body>
<h3>DOM Assignment Examples</h3>
<div>
<form>
<h4>Change background color to:</h4>
<input type="radio" value="White" onclick="newbg('white');">white<br/>
<input type="radio" value="Blue" onclick="newbg('blue');">Blue<br />
<input type="radio" value="Beige" onclick="newbg('Beige');">Beige<br />
<input type="radio" value="Yellow" onclick="newbg('yellow');">Yellow<br />
</form>
</div>
<br />
<br />
<br />
<h4>add text to this box change the text below:</h4>
<TEXTAREA NAME="" ROWS="10" COLS="40" onBlur="blurHandlerRouting">
You will change this text
</TEXTAREA> <br />
<INPUT TYPE="button" NAME="button" Value="Click" onClick="testResults(this.form)">
</body>
</html>
The contents of a <textarea> can be manipulated using .html() in jQuery or .innerHTML in vanilla JavaScript.
Your HTML should contain the id="" attribute:
<textarea id="mytextarea">Text to be changed</textarea>
And the JavaScript:
document.getElementById('mytextarea').innerHTML = "New Text";
To change the background and the textarea you would try this:
function = testResults(){
document.getElementById("yourTextBoxId").style="background:red;"; //Change the background color to red.
document.getElementById("yourTextAreaId").value="your another text for the textarea"
}