Problem
I have a form with different stages. Image below in which I have multiple buttons(prev, next) and a submit button(to submit the form). I want to take the person directly to 5th stage (summary) with pre-populated data when they comes to this page.
I am using below mentioned javascript code but no success. I know the reason why no success and that is because in javascript I'm doing action on submit button whereas I want to do it on a normal button, which looks like this.
Can anybody guide my through the syntax of JavaScript in terms of how should I make an action only on the below mentioned button.
Button
<button type="button" class="next" onclick="loadnext(4,5);"><img src="images/next.jpg" alt="" /> </button>
JavaScript
<script type="text/javascript">
document.forms.login_form.submit();
</script>
Loadnext function
function loadnext(divout,divin){
console.log(divout + " -- " + divin);
ch=validateme_form(divout,divin);
if(!ch){return false}
//alert(ch);
jQuery("." + divout).hide();
jQuery("." + divin).fadeIn("fast");
}
document.forms.login_form.submit(); does not trigger the click event of your button, trigger it directly (sth. like jQuery("button.next").click()), but be sure to wait, that the dom is ready. (jQuery(function() { ... })
OK, you have a form and you collect values from showing and hiding some divs and you want to post the form at the end as I can see.
Place the loadnext function inside a in section.
Since the button is not submit leave it as it is, or if you like it to serve as submit also change the onclick to onclick="loadnext(4,5); return false;"
I do't know what validateme_form does, but I think it will work.
make sure all elements have the correct ids as needed.
Hope this helps.
Related
I'm working on automating a task (filling a form and submitting data then getting the result message where the data is being read from a txt file line by line).
While running my JS code via the console, everything works fine until before the clicking on submit button. after the click on the submit button, I can see the HTML is being reloaded with new data and the URL is changed from www.example.com to www.example.com/requests/12345 and then the next step after the click is not respected.
I thought may be because I was using:
document.getElementByID("btn-submit").click();
and changed it to
$("#btn-submit").click().trigger('change');
But still same issue.
I tried to use sleep functions and setTimeout to wait for the new HTML to load but this didn't help at all :(
The task is simple steps until button click all works perfect, I'm stuck only at after the submit button as I want to get the results that shows on the page after clicking the submit button.
Any ideas please what is being done wrong from my side?
The Elements I'm trying to get are in a div that is empty before the submit button is being clicked like this
<div id="message-bar">
</div>
After the submit button is clicked it is filled like the below (also the URL is changed to something link www.example.com/requests/12345 - of course the result elements won't show if the button is not clicked:
<div id="message-bar">
<div id="alert-success" class="alert alert-success">
<button type="button" class="close" data-dismiss="alert">×</button>
<div class="text alert-text">Request approved!</div>
<ul id="bullet-items"><li>Thank you</li></ul>
</div>
</div>
I tried to check if the element is not empty, then get the elements innerText, but seems like my code is being removed when the page URL changes after the submit button:
if (document.getElementById("message-bar").innerText != "") {
// do something
}
Thank you so much
Try
$("#btn-submit").click(function(event){
event.preventDefault();
})
Or without jQuery
var btn = document.getElementById('btn-submit');
btn.addEventListener('click',function(event){
event.preventDefault();
})
Try using the .preventDefault() event
https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault).
From what I understand you need the content not after the click, but after what the click is triggering. Here’s the same Q, answered. Basically you wait for the mods to happen then “read” the element content.
to fix my issue, I thought of using window.open("URL") by creating a variable for it and then using it to process my the whole automation process on the new window and I was able to get all the result message from the new window
var newWindow = window.open("the URL");
newWindow.$('input[id="input"]').val("1234").trigger('change');
etc...
I`m trying to read the value from an input and fill it in one empty div.However , the value is being read but when I click the button submit , the value appears for like 0.2 seconds on the empty div , and then , disappears ... any suggestions why?
HTML :
<div id="vuvedenaSuma">
</div>
<form action="">
<input type="text" id="suma" required="required" placeholder="Въведи сума" name="Suma" />
<button id="submit">Submit!</button>
</form>
Javascript:
function valueRead(){
var vuvedenaSuma = document.getElementById('suma').value;
document.getElementById('vuvedenaSuma').innerHTML = vuvedenaSuma;
}
document.getElementById('submit').addEventListener('click',valueRead);
I want to make it withe eventListener , not onclick attribute on the button.
Your form is being submitted right after the execution of the function.
You can prevent the default event(form submission) to be called with event.preventDefault() like this:
function valueRead(e){
var vuvedenaSuma = document.getElementById('suma').value;
document.getElementById('vuvedenaSuma').innerHTML = vuvedenaSuma;
e.preventDefault();
}
https://jsfiddle.net/ez0qchyq/
Your event is firing, then the page is likely reloading because of the form firing. Try using
event.preventDefault()
and it will prevent the form from submitting.
Edit: Also, the comment below me is absolutely correct. Remember to pass the event into the function.
The default way that a form "submits" is to send a new page request to the server, using the given inputs as parameters. From there, a serverside language like PHP might save them. Often, this would churn out an "Operation successful!" page or similar.
In your case, your form's action is blank, meaning it will "submit" to the page it's on. Since your page is pretty basic, it will reload without any of the sent information appearing in it.
As John Kossa suggested, you could intercept this by adding an argument, let's say, "evt", to the parentheses of the valueRead function, and then calling evt.preventDefault().
When you click the button then you send the form and the page is automatically refreshed. To prevent this behavior try this solution
function valueRead(e){
e.preventDefault();
var vuvedenaSuma = document.getElementById('suma').value;
document.getElementById('vuvedenaSuma').innerHTML = vuvedenaSuma;
}
Also, you might want to use the event listener on submit:
document.getElementById('formName').addEventListener('submit', valueRead);
So, I need to use document.getElementById("a_link").click(); in the website but I am not sure where or how to place it.
The setting that I have is that there is a submit button and link (http://demodemo.com)
I am trying to redirect users to the link when they press submit button.
I was told that document.getElementById("a_link").click(); will do the job.
But I am not sure how to do it.
Any help will be appreciated.
Thanks
Have your submit button and link look like this:
<button onclick="redirect()">Google.com</button>
Click the button instead fool
Then, in your javascript, have this:
function redirect() {
document.getElementById("a_link").click();
}
However, a much more eloquent way would be something like this:
<button>Click me for google.com</button>
This is simply a button inside of a link, making it so when you click the button, it will redirect you to google.com (or any other page of your choosing).
It should be loading the index.html page with the uname param but for some reason it just keeps reloading this page over and over
I have tried every variation I can think of, to include looking at other working examples of my own and of other people. This is not working because it hates me.
function loginLink() {
var linkname = getURLParameter("uname");
window.location.replace("http://www.walkwithpals.com/index.html?uname=" + linkname);
}
This is the html
<button onclick="loginLink()">Already have an account and want to link to a friend?</button>
Here is the live site and the page in question WalkWithPals
You can prevent the page from refreshing by making your form return false in order to not reload the page.
<form onSubmit="foo();false;"></form> if the function foo() doesn't alreay return false.
EDIT: Alternatively this looks to be the answer.
By adding the attribute type="button" to your button element, this overrides the default submit behaviour.
The problem is that while you are returning false from your function, you aren't returning false within the event handler. You need to pass on the return value:
<button onclick="return loginLink()">...</button>
However, as Stephen notes in the comments, you really should move away from using inline event handlers. Since I see you've got jQuery included, if you make it easy to identify your button:
<button id="loginButton">...</button>
You can use jQuery to attach to it:
$('#loginButton').click(loginLink);
(such a script should go at the end of the body such that loginButton will exist at that point)
I wrote a javascript function to go to a particular page if it came from a particular page.
Function:
function proceed()
{
if( document.referer == "http://abcd.com/index.php?action=SignUp")
{
return document.location.href = "http://abcd.com/editprofile.php?action=editprofile";
}
}
Submit button for a form in current page(b):
What i want is to go through a sequence of pages a->b->c , where a is previous , b is current , and c is next in my case. b has a form, on submitting values to the form, it should also call the javascript function and then go to the page c.
Can anybody help me find out where is the mistake? Any help would be highly appreciated. Thanks.
Since you have a form I guess there's also some php/cgi script that will handle the form's data!?
In that case your form won't continue to that script if you override your submit button via javascript in such way that it loads another page (other cases like validation do work that way, of course).
So
Your submit button has spaces next to the onclick attribute: onclick = "javascript... should be onclick="javascript....
Your function proceed() should return true for the submit to perform.
Even after all syntax correction, there's still something odd. After all, you can only give one "next page" functionality to your submit button. So what should the form call:
your php or cgi script? Then you can build a redirect to page "c" into that one.
your page "c"? Then what do you need the form for?
both, but independently? In that case I suggest a javascript popup from proceed() displaying page "c" and returning true so the form continues with its script.
To be more accurate you will have to provide more of your application's code.
Solution seems to be the following. Use the submit attribute for your button:
<button type="button" onclick="proceed(); alert('You are not authorized to execute this action!');">Click Me!</button