I want to change the submit button to an image but, I need its value to be the one I get from the database.
<input type="image" src="images/icon_edit.gif" >
<input name="SID" type="radio" value="<? echo $row['ID']; ?>">
I currently have it so I have to check the radio button before I can click the image witch is the submit button. Is there a way so I can just have the image and have its value be from what I pull from the database so I don't need the radio button I have to check before I send it to the next page?
I would set the background using css, then you can use a regular input[type=submit] and have the value of your choice.
HTML
<input type="submit" value="<? echo $row['ID']; ?>">
CSS
input[type=submit] {
background:url(images/icon_edit.gif);
}
Probs need to change the url to the image but otherwise should be good to go! :-)
May be like this
<script type="text/javascript">
$(function() {
$("#imgSubmitButton").click(function () {
$("#formName").submit();
});
});
</script>
<form id="formName" name="formName" action="xxx.php" method="post">
<img src="icon_edit.gif" id="imgSubmitButton" style="cursor:pointer">
<input name="SID" type="radio" value="<? echo $row['ID']; ?>">
</form>
Use CSS background image to achieve this
<button type="submit">
<img src="xyz.png" width="50" height="50">
</button>
Related
I have created this form which I have placed in the Wordpress divi theme code module on a page. It is used to return the stock availability for my shop that is connected to a 3rd party api.
After the form is submitted how do I get it to keep displaying the values that were submitted.
<p>Enter your Event Dates</p><br>
<form class="Dates" action="" method="post">
<span>
<label for="date_from">Date From:</label>
<input type="date" id="date_from" name="date_from" value="dd-MM-YYY">
</span>
<span>
<label for="date_to">Date To:</label>
<input type="date" id="date_to" name="date_to" value="dd_MM-YYY"><br>
</span>
<input type="submit">
</form>
This way:
<input type="date" id="date_from" name="date_from" value="<?php echo isset($_POST['date_from'] ? $_POST['date_from'] : '' ?>">
You can try writing a new script under all javascript definitions. Page must .php
<script>
document.getElementById("date_from").value = '<?php echo isset($_POST['date_from'] ? $_POST['date_from'] : '' ?>';
If you want to use jquery you should use this format:
$(function(){
$('#date_from').val('submitted value');
});
but jquery doesn't know what was sent before. So you can update your script like this:
$(function(){
$('#date_from').on("keyup",function(){
window.localStorage.setItem('date',$(this).val());
});
$('#date_from').val(window.localStorage.getItem("date"));
});
Using html for my page I have a text box and a submit button. I want to be able to put an image url into the text box, click submit, and have the image display below the submit button. I DO NOT want to upload a picture as a file. I have looked around for how to do this but have not had any luck. Any ideas?
<form>
<input type="text" name="imglink" value="insert image URL here" onclick="this.select()"><br>
<input type="submit" value="Load Image">
</form>
Here is another example, with pure Javascript. Instead of "submit" i used "button" to not submit the form.
<form action="#" method="post">
<input type="url" name="imglink" id="imglink" placeholder="Insert image URL here" /><br>
<input type="button" value="Show Image" id="btn1" />
</form>
<div id="photo"></div>
<script>
document.getElementById('btn1').addEventListener('click', function(){
document.getElementById('photo').innerHTML = '<img src="'+ document.getElementById('imglink').value +'" alt="Image" />';
});
</script>
Something like this will allow you to enter a url and upload under your submit button. Ensure that you have jquery available for this to work.
https://jsfiddle.net/7L031bfj/
HTML
<form>
<input type="text" id="input">
<button type="button" id="submit">Submit</button>
</form>
<div id="photo"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
JS
$('#submit').click(function(){
var photo = $('#input').val();
$('#photo').append('<img src=' + photo + '>')
});
Instead of using text box, you can use this Attribute <input type="file">.
Is this what you want, as i am also slightly unclear as what you want
https://jsfiddle.net/q65rxcbg/
<input type="text" id='imglink' value="insert image URL here">
<br>
<input type="submit" id='submit' value="Load Image">
<br/>
<img id='photo'>
$('#submit').click(function () {
var selectedFile = $('#imglink').val();
$('#photo').attr("src", selectedFile);
});
Well, I guess the title says it all.
I'm looking for a way to reset all the fields within a form.
I've tried some of the following:
<input type="reset" value="Clear all fields">
And
<button type="reset">Clear all fields</button>
Yet, none of this seems to be working.
This is a stripped version of my form.
<form id="form2" action="mainframe.php?paso=21" method="POST">
<input type="reset" value="Reset">
<button type="reset" form="form2">Reset</button>
<?php while($row=$resultado->fetch_assoc()){ ?>
<p>Number of <?php echo $row['name']; ?>
<input type="text" name="saldo[<?php echo $row['id']; ?>]" value="<?php echo $row['saldo']; ?>" maxlength="30" />
<?php } ?>
</form>
<button type="submit" form="form2">Send</button>
Edit: Apparently the reset button will replace the values of all inputs with the values they had on page load. The button would clear all fields and leave them blank only if the input's value property aren't declared or are null on page load.
Guess what. It actually DOES work. I didn't change anything at all. I promise:
<form id="form2" action="mainframe.php?paso=21" method="POST">
<input type="reset" value="Reset">
<button type="reset" form="form2">Reset</button>
<?php while($row=$resultado->fetch_assoc()){ ?>
<p>Number of <?php echo $row['name']; ?>
<input type="text" name="saldo[<?php echo $row['id']; ?>]" value="<?php echo $row['saldo']; ?>" maxlength="30" />
<?php } ?>
</form>
<button type="submit" form="form2">Send</button>
If it's not working on your site, then you may have another syntax error.
get rid of what u echo to the input value and it should work...
The previous answers are correct. The reset button resets the form's inputs to their initial values, not to blank.
In my case, I wanted to blank all of my inputs. I thought about writing some JavaScript that sets all the inputs to "", but I decided that just reloading the page would be easier. In my case, reloading the page blanks the form.
Try this:
<input type="button" onclick="window.location='http://www.yourwebsite.com/form.php'" value="Reset" />
I want to use a text input as a link when user hits enter.
for instance user types "stacks" to the input area and when user hits enter, it directs user to "lookup/stacks".
How can I do this?
Thanks.
I have this code but it does not work.
<form class="ui icon input" role="form" action="/lookup/">
<input type="text" placeholder="Ara...">
<i class="search link icon"></i>
</form>
Here's a quick idea to update the form's URL whenever the input changes, although I haven't tested it. The hidden submit button means the enter key works as you intend. I think you should also follow Alex's idea for a server-side backup just in case a visitor has javascript disabled.
<form class="ui icon input" role="form" action="/lookup/">
<input type="text" placeholder="Ara..." id="input_lookup">
<i class="search link icon"></i>
<input type="submit" style="position: absolute; left: -9999px"/>
</form>
<script type="text/javascript">
// if "change" doesn't work then maybe "keyup"?
document.getElementById("input_lookup").addEventListener("change", function(){
this.form.setAttribute("action", "/lookup/" + this.value);
});
</script>
You can do it with jQuery .submit().
Here's the example given on jQuery's page:
<form id="target" action="destination.html">
<input type="text" value="Hello there">
<input type="submit" value="Go">
</form>
<div id="other">
Trigger the handler
</div>
$( "#target" ).submit(function( event ) {
alert( "Handler for .submit() called." );
event.preventDefault();
});
You could use PHP to do this..
Here is a basic example, you could expand on this later if needed.
1st page..
HTML:
<form action="url.php" method="post">
<input name="url" id="url" type="text">
<input type="submit" name = "submit" value="submit">
</form>
2nd page - url.php (must be called depending on form action url)
<?php
$url = $_POST['url'];
header('Location: ' . $url);
?>
I have multiple images inside one form. Depending on the image clicked a specific value should be sent with a POST.
Can this be done without javascript? (I use jquery, if not).
I tried something like this:
<input type="image" name="type" value="1" src="images/type1.jpg" />
But only the coords of the image were sent, not type=1.
The safe approach to this problem is to give the inputs unique names and see which one sends coordinates.
<input type="image" name="submit_blue" value="blue" alt="blue" src="blue.png">
<input type="image" name="submit_red" value="red" alt="red " src="red.png">
Only the successful control will send any data. So test to see if submit_blue.x has a value, then test if submit_red.x has one.
There is no need to involve JavaScript at all.
Alternatively, use regular submit buttons instead of server side image maps.
<button name="action" value="blue"><img src="blue.png" alt="blue"></button>
… keeping in mind that this will break in old-IE as it doesn't support <button> properly.
Using jQuery you can submit the clicking on the image. You can add a id for the image or even a classe.
$( "#yourImageId" ).click(function() {
$( "#yourFormId" ).submit();
});
My approach is to define multiple images, with a single "name", and multpiple "value".
<form id="myform" method="post" action="mypage.php">
<input type="image" name="color" value="blue" alt="blue" src="blue.png">
<input type="image" name="color" value="red" alt="red " src="red.png">
</form>
Then, on server side, i will be able to read directly the selected value ("blue" or "red") in the "color" POST variable.
<?php
if (isset($_POST["color"]) && !empty($_POST["color"])) {
$selected_color = $_POST['color'];
echo('Selected color is ' . $selected_color);
//"blue" or "red"
}else{
echo ('No image selected');
}
?>
Try this
<form id="myform" action="mypage.php">
your content form here
<img scr="img1" class="submitableimage" />
<img scr="img2" class="submitableimage" />
<img scr="imgn" class="submitableimage" />
</form>
<script>
$('img.submitableimage').click(function(){
$('#myform').submit();
});
</script>