So this is the code!
<a class="gray" onclick="javascript:window.open('https://forms.zohopublic.com/cpmovers/form/Locationupdates/formperma/0e5D2g0E23J372HC4Dek22J43');">Customer Form</a>
What I want to be done is so instead of the submit button. I want it to be the logo, so it can be clickable. I hope I explained myself well. An image turned into a clickable that leads to this whole code.
I don't see the image tag... but you need to set an onclick attribute for the image tag
example:
<img src='img/name.jpg' onclick='myFunction()'/>
and inside javascript you will have:
function myfunction(){
document.getElementById('formId').submit();
}
As i see that link re-directs you to a form, what you will need to do is to position the image where the submit button was and then add the script so when you click the image it will submit the form you have on your page
Related
I have dataTable which last column for edit. I have a separate page for edit form. what i want is when edit link is clicked open that page in a jQuery dialog box and submit data.
The correct way to solve this problem
Assuming that you want a popup or a more specific term modal to edit the form, you should not have a separate html view for that but actually make a general form and post data using ajax. Creating a separate page defeats that purpose.
Now assuming that you still want to have a separate page for that. The modal should be like
<div class="modal">
<iframe src="" id="frameSrc">
</iframe>
</div>
where the src contains the url of the page that you want to open, i am guessing from the href. So here is how you would do that in javascript
$(this).on("click", function () {
var editUri = $this.attr('href');
document.getElementById('frameSrc').src = editUri;
});
The javascript will get the url from href and substitute the src in iframe tag in modal.
Hope this helps..
you can do this without alert and you don't need send href to jquery
use fadeIn and some style to make it.
$('a#login').click(function(){
$("#bgstyle").fadeIn('slow');
$('form').fadeIn('slow');
})
Fiddle DEMO
hope this help you
anyway if i wanna do this i prefer to use bootstrap modal.
Im working on a function in wordpress that I wanna be able to click on a button, and when a button is clicked, the text inside the button changes and redirects the user to another page (I want to change the text inside the button from Create to Edit).
If I refresh the page or go back to the page, the text inside the button is not displaying the changed text. I want the text inside the button to always stay changed.
<a class="cc-btn">
<input id="texts" onclick="changeStyle()" value="Create"></input>
</a>
<script>
function changeStyle() {
document.getElementById("texts").value="newButtonValue";
window.location.replace("/xxxx/?page_id=xx");
}
</script>
If you would like that the changes will still remain once you refresh the page, you cannot do it using JavaScript only.
you will have to use the server side and save the new text and put it into the button value once the page is rendered. (or of course it`s possible to do something ugly like saving the data in a cookie and then use JavaScript only - but this is wrong )
Im not sure if i got your issue, but you could try it:
$(window).on('load',function(){
if(window.location.pathname == '/xxxx/?page_id=xx') {
$('#texts').val('Edit');
}
});
I have a working button for changing the style of text in a text area. The button makes the text bold and unbold on second click and this works efficiently.
However what I want is for the image to change, each time that the button is pressed so that it is indicated that the text has had that formatting applied.
The HTML for the button is as follows
<a href="#" class="ButtonStyling" type="button" onclick="boldTextArea()" value="Bold"}><img alt='Bold Button' src='BButton.gif'></a>
I would be interested in any responses using Javascript or JQuery.
Without seeing your HTML, I have to guess how your image is displayed.
If it is an image, change the source via src.
var image = document.getElementById("yourImage");
image.src = "newImage.png";
If it is a background image, change the style
image.style.backgroundImage = "url(newImage.png)";
I need to put an image that acts as a button which takes you back one screen. I've written the following for going back to the previous screen:
<input type="image" src="../../img/button_cancel_gray.gif" type="button" onclick="history.go(-1);"/>
Which works, except it's also submitting the form. I need it to prevent submitting the form.
For an alternative, I've tried to wrap the image inside a button.
This one works too but now it shows the default border of the button outside the image, which makes it look ugly.
So how do you make an image act as a button that runs onclick but not submit the form?
Make the onclick event return false, which will prevent form from submitting.
onclick="history.go(-1);return false;"
I have a button type button that I will like to place an image over. My code looks like this
<button id="button" type="button" onclick="bus()">
<img src="DestinationH-Bus-Driver-Login.png">
</button>
The problem with this is that I get a gray space that makes the overall image to large, if I use a larger image it works fine. But if I call the site from a phone suddenly the big buttons are to small to see. Any suggestion will be greatly appreciated.
I know about type image but I can't use that because it gives me a button of submit type and I want a button of button type, however the pic does work excellent if I use the image type but not the above method.
Why not just put the onclick event on the image?
<img src="DestinationH-Bus-Driver-Login.png" onClick="bus()" />
If necessary, you could use an input tag of type image and cancel the default form submission in the event handler by returning false:
<input type="image" src="DestinationH-Bus-Driver-Login.png" onclick="bus(); return false;"/>
That should give you the same functionality as a button tag, but with better cross-browser support for styling it with an image.