I'm trying to make my submit button a image and also when clicked it links to another page.
This is the current submit button which works but isn't a href or image
<input type="submit" name="submit" alt="add" onclick="add()" >
These are the multiple methods I've tried but none of them seem to work. Can anyone see where I'm going wrong?
<input type="image" name="submit" src="img/add.png" class="addButton" id="addButton" />
2.
<img src="img/add.png" class="addButton" id="addButton" alt="add button" />
3.
<img src="img/addToBookmarks.png" class="addButton" id="addButton" alt="add button" />
Lastly the form itself on stadiumLargeSymbol.php:
<form class="form" action="stadiumLargeSymbol.php?submit=true" method="post">
<img id="enlargedSymbol" type="text" size="60" name="pathOfSymbol" src='' />
<br />
<input class="inputBox" type="hidden" name="pathOfSymbol" id="pathOfSymbol" />
<script>
var querySrc = URI(window.location.href).search(true).src;
$("#enlargedSymbol").prop("src", querySrc);
$('#pathOfSymbol').val(querySrc);
</script>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br/>
<input type="submit" name="submit" alt="add to bookmarks button" onclick="add()" >
</form>
Check this link:
https://jsfiddle.net/0e2rykap/
<html>
<body>
<h1>
<button type="submit" class="btn_submit">
<img src="http://www.smartwebby.com/imgs/tutorials/fireworks/website-design/submit-button.jpg" />
</button>
</h1>
</body>
</html>
you can use javascript to mimick the href redirection
Try giving id to div where your image is being rendered, Assuming id of your div is "divImage",You can write following is JS :
$("#divImage").click(function(){
//On Click Event
});
You can write your form submission code and redirecting code inside "on-click" event.Your problem will be solved.
Apply a background image to the submit button using css.
// html
<input type="submit" name="submit" alt="add" onclick="add()" >
// css
form input[type=submit]{
background-image: url('img/example.png');
}
And add other styling properties as necessary. Don't forget to remove the border and such from the button in the css.
Instead of input type submit
Use a div , inside div set a image tag like below
<div id="yoyo">
<img src="whateva" />
</div>
Now on click of img tag ID or Div ID , submit the form.
Like :
$( "#yoyo" ).click(function() {
$( "#FormID" ).submit();
//or if you want to redirect than
window.location.href = "http://stackoverflow.com";
});
Related
I use jQuery and ajax.
In the first. it is my html.
<form id="frm" name='frm' action="." method="post">
<div style="position: absolute; top:270px;">
<div id='mybuttons'>
<input type="submit" class="buttonbig3" name="btn1" value="1" /><br />
<input type="submit" class="buttonbig3" name="btn2" value="2" /><br />
</div>
<input id="hidden-qid" type="hidden" name="set" value="hoge" />
</div>
</form>
And, I create submit function like below in JS.
$('#frm').submit(function() {
var serialized_date = $('form#frm').serialize();
console.log(serialized_date);
However, the "console.log" logged "set" paramater.
but, btn1 or btn2 can't show the log.
I guess it is child of the mybuttons div tag.
I don't want to remove the tag. because, I create dynamically the html by javascript.
$('#mybuttons').innerHTML = "<input type="\submit\" class="\buttonbig3\" name=\"btn1\" value=\"1\" /><br />";
Could you tell me how to serialize child tag.
I hope will be helpful , just find the button that does submit and added to the serialized
$('#frm').submit(function() {
var serialized_date = $('form#frm').serialize();
var btn = $(document.activeElement);
serialized_date += "&" + btn.attr("name") + "=" + btn.val();
console.log(serialized_date);
});
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="frm" name='frm' action="." method="post">
<div id='mybuttons'>
<input type="submit" class="buttonbig3" name="btn1" value="1" /><br />
<input type="submit" class="buttonbig3" name="btn2" value="2" /><br />
</div>
<input id="hidden-qid" type="hidden" name="set" value="hoge" />
</form>
Serialize don't add submit button values to the data as submit buttons should be used only to submit the form, not to send specific data. You have to change the type="submit" to something else if there is specific data you want to get out of it.
serialize() docs
The .serialize() method creates a text string in standard URL-encoded
notation. It can act on a jQuery object that has selected individual
form controls, such as , , and : $( "input,
textarea, select" ).serialize();
Buttons can't be serialized. Only the elements with user inputs can be serialized like textbox, radio button, etc
If you place an input box inside the div, you will find it in your console.log.
<div id='mybuttons'>
<input type="submit" class="buttonbig3" name="btn1" value="1" /><br />
<input type="submit" class="buttonbig3" name="btn2" value="2" /><br />
<input id="hidden-qid" type="hidden" name="rias" value="hoge" />
</div>
Now if you try submitting the form, you will get that input text inside the div element. So it's not about child elements here.
I have this code
<script>
function cA( url )
{
document.myform.action = url;
}
</script>
<input type="whatever" name="whatever" id="whatever" />
<button class="whatever-button" id="defaultAction" value="Go for it" name="whatever" type="submit" onClick="cA('whatever.php#anchor')" >Go for it
</button>
When you click the Go for it-Button, whatever.php#anchor is being loaded. How do I need to change the input tag's elements for it to execute the same cA('whatever.php#anchor') as the button click?
So when a user presses enter in the field, the site whatever.php#anchor should be loaded or more specifically, cA('whatever.php#anchor') be executed.
The page has more buttons, so making one button the default button does not work.
PS:
Wrapping all in one form does not work as the page's structure is
<form>
<script>
function cA( url )
{
document.myform.action = url;
}
</script>
<input type="whatever1" name="whatever1" id="whatever1" />
<button class="whatever1-button" id="defaultAction1" value="Go for it" name="whatever1" type="submit" onClick="cA('whatever.php#anchor1')" >Go for it
</button>
<input type="whatever2" name="whatever2" id="whatever2" />
<button class="whatever2-button2" id="defaultAction2" value="Go for it" name="whatever2" type="submit" onClick="cA('whatever.php#anchor2')" >Go for it
</button>
<input type="whatever3" name="whatever3" id="whatever3" />
<button class="whatever3-button" id="defaultAction3" value="Go for it" name="whatever3" type="submit" onClick="cA('whatever.php#anchor3')" >Go for it
</button>
...
</form>
You can try this:
<input type="whatever" name="whatever" id="whatever" onkeydown="if (event.keyCode == 13) {cA('whatever.php#anchor');}" />
Check this post for more information.
<div id="file">
<input type="file" name="txtImage[]" class="upload" />
<input type="text" name="txtImageDesc[]" class="desc" />
</div>
<input type="button" value="Add" name="addButton" id="addButton" />
<input type="button" value="Remove" name="removeButton" id="removeButton" />
This is my html div i need to add and remove on button click and here is my jquery code
<script type='text/javascript'>
$('#addButton').click(function(){
$('.upload:last').clone().appendTo('#file');
$('.desc:last').clone().appendTo('#file');
});
$('#removeButton').click(function(){
$('.upload:last').clone().remove('#file');
$('.desc:last').clone().remove('#file');
});
</script>
Problem is The On add button, it works perfectly but on remove button, it does not.
I need to remove the cloned div when i click on remove button.
I think your remove code should be like this:
$('#removeButton').click(function(){
$('#file > .upload:last').remove();
$('#file > .desc:last').remove();
});
Try this:
$('#removeButton').click(function(){
$('.upload:last').remove();
$('.desc:last').remove();
});
You can also use this,
$('#removeButton').click(function(){
$('#file').css('display','none');
});
I want to trigger an event with a button that changes the visibility of a set of elements (inputs of type text and button) from hidden to visible. Now everytime I click on the triggering button, I want a new set of the same elements to appear on a new line. How can that be done? Here is a snippet of the code:
<script type="text/javascript">
function generatenew()
{
document.add.property1.style.visibility="visible";
document.add.button2.style.visibility="visible";
document.add.button3.style.visibility="visible";
document.add.button4.style.visibility="visible";
}
</script>
</head>
<body>
<form name='add' method="post" action="">
<div id="div"></div>
<input type="button" value="+Add" onclick="generatenew();">
<input type="button" value="Edit" name="button2" style="visibility:hidden">
<input type="text" style="visibility:hidden" size="50" name="property1" placeholder="<street> <city> <ZIP> <country> <lockunitID>">
<input type="button" style="visibility:hidden" name="button3" value="open main door">
<input type="button" style="visibility:hidden" name="button4" value="open apartment door">
<div id="abc"><input type="button" value="save"></div>
If I well understood your question, all you have to do is putting a function that is triggered by an onClick event, (element.onClick=function();) You put all your input type tags in the function, and then you end your function bay calling appendChild method so that each click triggers the display of your elements.
<script type="text/javascript">
function submitWindow() {
..
// URL, name and attributes
window.open('http://isivmwebtest.isolutionsinc.com/ComparativePricing/Content/PriceLookup.aspx','windowNew','width=300, height=300');
return true;
}
</script>
<div class="form-outer">
<div class="resource-form">
<h3>FREE National Price-Look Up Tool</h3>
<h4>Powered by ComparativeHospitalData.com</h4>
<form action="http://isivmwebtest.isolutionsinc.com/ComparativePricing/Gateway.aspx" method="post" onsubmit="return submitWindow()">
<input type="hidden" name="RemoteAction" value="PriceLookup" />
<strong>Enter HCPCS Code(s)</strong><br />
<input onfocus="this.value=''" type="text" name="codes" value="XXXXX or XXXXX,XXXXX or XXXXX-XXXXX" /><br /><br />
<strong>Enter HCPCS Description</strong><br />
<input onfocus="this.value=''" type="text" name="desc" value="partial name okay" /><br /><br />
<input type="submit" value="Search" />
</form>
<span style="font-size:0.8em;font-style:italic;padding-top:10px;">*Search will lead you away from this site.</span>
</div>
</div>
I want this form to display the results in a popup window that's pretty small. I have tired many methods without any success. Right now I am using some Javascript to get it to work, but it still doesn't seem to do anything. Any help?
There are other parameters you can pass in the specs parameter besides width and height. See here. http://www.w3schools.com/jsref/met_win_open.asp
You can remove the title bar, status bar, etc to make it smaller.
Try:
window.open('http://isivmwebtest.isolutionsinc.com/ComparativePricing/Content/PriceLookup.aspx','windowNew','width=300,height=300,location=no,menubar=no,status=no,toolbar=no');
This hidden field "RemoteAction" is required for popup to redirect the page to PriceLookup.aspx. That is the reason your popup is not showing the correct page.