I am trying to suppress the post action to switch my tab position to the first TAB. I am calling an Ajax function which makes the unseen post, preventing the refresh/post from happening, thus staying on the tab that the user is in. I created a test code to simulate this (I didn't use tabs for my test).
HTML:
<!DOCTYPE html>
<html>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<head>
<meta charset=utf-8>
<title>Click</title>
</head>
<script src="../../../Product/WebServer/Software/Page Format/Ajax_Submit.js"></script>
<body>
<p>Click on This!</p>
<input type="submit" name="Submit" id="Submit" value="Submit Changes"/>
</body>
</html>
JavaScript:
// JavaScript Document Ajax Submit
$(function() {//Open function
$('#Submit').click (function(){ //Open select
alert("Submit button is being suppressed!");
doAjaxCode();
}); //Close select
function doAjaxCode(SubmitStatus) { //Open doAjaxCode
$.ajax({
type: "POST",
url: "index_phaseII_v02.html",
data: "Nb_var97=" + SubmitStatus,
})
} //Close doAjaxCode
}); //Close function
This works as expected, no problems, wonderful!!!
Problem:
When I take this sample code and apply it to my actual code, it doesn't work?
It doesn't even display the alert msg? By the way, yes I am including the following line to run
the script in my main html page: any ideas as to what is happening?
Thank you,
Neil P
Update
Ok, I don't know why or partially know why, but doing this made it work!
$('#Submit').click (function(){ //Open select <------changed this line from this
to
$('input').click (function(){ //Open select <-------#Submit to input
The reason I say, I partially know, is because if the button's id is Submit like so,
<input type="submit" name="Submit" id="Submit" value="Submit Changes"/>
then, I expect it to work???? I know that now by doing input, it will work for all my buttons, but in the future if I only want to address a particular button by using its id attribute, then it will come in handy..
Can anyone comment?
Thanks.
Ok, I don't know why or partially know why, but doing this made it work!
$('#Submit').click (function(){ //Open select <------changed this line from this
to
$('input').click (function(){ //Open select <-------#Submit to input
The reason I say, I partially know, is because if the button's id is Submit like so,
<input type="submit" name="Submit" id="Submit" value="Submit Changes"/>
then, I expect it to work???? I know that now by doing input, it will work for all my
buttons, but in the future if I only want to address a particular button by using its
id attribute, then it will come in handy..
Can anyone comment?
Thanks.
Related
Below is the jquery and the two code lines one for the text box and the other for the submit button but i just cant get them to link. I have tried a few different ways suggested on here but i cannot get the submit button to link to the text box and clear it. All help greatly appreciated
$j is set as noConflict()
$j('.submit').keypress(function(){
$j('.comment').val('');
});
<textarea name="name" rows="5" class="fullinput" id="comment"></textarea>
<input id="submit" type="submit" value="Add to List" class="add" />
UPDATE - So i realised that i was using the incorrect selectors the correct code should have been.
$j('#submit').click(function(event){
$j('#comment').val('');
event.preventDefault();
});
This along with the answers below resolved this issue.
This should work:
$j('#submit').click(function(event){
$j('#comment').val('');
event.preventDefault();
});
By clicking on a "submit" input, the user is invoking a postback. Therefore you need to use the built-in javascript event to prevent the postback from happening using the .preventDefault() method.
I am a newbie to chrome-extension/java script development and I am stuck at the following exercise.
I created a popup with a button and a textbox. I wanted to pass the textbox value to an alert when the submit button is pressed. I have the following code so far:
popup.html
<div id="popup"></div>
<form name="q">
<input name="query" id="userQuery" type="text" />
<button id="button1">Submit</button>
<!-- <input type="button" name="button" value="query" /> -->
</form>
popup.js
document.addEventListener('DOMContentLoaded', function () {
console.log(document.getElementById('userQuery'));
document.getElementById('button1').addEventListener('click', myAlert(document.getElementById('userQuery')));
});
function myAlert(query){
alert(query.value)
}
However, I get "null" as query.value so the alert comes empty.
I also noticed that when the extension is clicked for the popup, I get an alert as well, which I don't understand why, I used both 'click' and 'onclick' but I get the same issue.
Any hint or help will be much appreciated!
One way to do it:
document.getElementById('button1').addEventListener('click', function() { myAlert(document.getElementById('userQuery')); });
In your code, the expression myAlert(document.getElementById('userQuery')) is evaluated when addEventListener is called. That's why you see a blank alert when the page loads. Instead you need to pass a function, that will be executed when the click event happens.
Try this $("#userQuery").val() OR document.getElementById("userQuery").value
instead of document.getElementById('userQuery')
I have two submit buttons in a form that Lets user Update/ Delete content. I want a confirm pop only if the user clicks Delete button.
<html>
<head>
<script type="text/javascript">
function confirmation() {
// I need to know which submit button was pressed.
if (value==Delete){
var answer = confirm("Cancel?")
if (answer){
return true;
//Continue as intended
}
else{
return false
}
}
}
</script>
</head>
<body>
<form id="Edit_Data">
//form input fields go here
<input name="action" type="submit" onclick="confirmation()" value="Update">
<input name="action" type="submit" onclick="confirmation()" value="Delete">
</form>
</body>
</html>
Any Ideas?
First of all you have several problems with your code. The value in your if statement is an undefined variable secondly you need to put quotes around the delete. Here is working fiddle http://jsfiddle.net/SMBWd/ and the relevant code change. Also, I would encourage you to look how to do this without using javascript in your HTML.
function confirmation(e) {
// I need to know which submit button was pressed.
if (e.value=='Delete'){
and in the HTML
<input name="action" type="button" onclick="confirmation(this)" value="Update">
<input name="action" type="button" onclick="confirmation(this)" value="Delete">
For your onclick event definition in the html tag, why not call separate functions?
The simplest way would be to NOT call the javascript on the Update button.
If your form is static, then you do this in your IDE. If it's dynamic, then the dynamic code can create the form element accordingly.
If the form elements are generated automatically, then you should setup an event handler in JavaScript dynamically. Find all elements of type input with type attribute button or submit, and assign
elems[i].onclick = confirmation;
You'd then get the event object as a method parameter, and you could query that for the value of the button.
This problem is keeping me busy all week and I find little to nothing on the net ...
What I want to do is simple ... on my own website, create a server side PHP script that makes a login to another website with valid credentials and downloads a file that I want to process.
I use curl_init(), curl_setopt() and curl_exec() in trying to achieve that. It doesn't work.
So I stripped down that webpage to figure out what's wrong.
As you can see in the html code, the form's action event is the url to retrieve the file, when correct credentials are submitted.
<!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" >
<body>
<form name="form1" method="post" action="http://otherwebsite/login.aspx?ReturnUrl=/export_file.aspx?id=xxxxxxx" >
<script type="text/javascript" language="JavaScript">
function Submit_Form()
{
document.form1.Login$UserName.value="myname";
document.form1.Login$Password.value="mypassword";
//document.form1.Login$LoginButton.click();
document.form1.submit();
}
</script>
<input type="hidden" name="Login$UserName" value="myname" />
<input type="hidden" name="Login$Password" value="mypassword" />
<input name="Login$LoginButton" type="submit" />
<br />Login
</form>
</body>
</html>
Now here is where it gets weird.
If I press the button, it works and I receive the download file.
If I click the hyperlink, i get a page saying to login properly.
When I uncomment the javascript line : click() it works too.
So it comes down to this :
Why does the button submit work and javascript submit doesn't work ?
Is there a way that the other website's server check how the form was posted ?
Thank you for your thoughts !
When you click the button, its name is included in the POST request because it's a named submit button. When you use the link, the button's name doesn't get passed in the POST data.
You could probably spoof the button when you use the link by having a hidden field with the name the button should have:
<input type="hidden" name="Login$UserName" value="myname" />
<input type="hidden" name="Login$Password" value="mypassword" />
<input type="hidden" name="Login$LoginButton" />
Note it doesn't need a value because the button it replaces doesn't have a value setting its text. Just including it should be sufficient.
Why not have another hidden field called js_submitted with a value of false, and in your Submit_Form() function, set it to true before firing the submit() method? Then, in PHP (for example), you could look for $_GET/$_POST['js_submitted'] to determine which submission method was used.
It's possible to check that the button was posted with the submit. Maybe they are checking for this.
Yes, it is very easy to find out when a button submits a form, and that is exactly what the site might be doing.
A button is a form control and so, when a form is submitted, the button state is submitted as well. What this means is, when you check the form object on the server that receives the post, you will see it contains a key with the same name as the button and it's value is set to the value attribute of your button.
Consider you have a form:
<form id="form1" action="abc.asp" method="post">
<input type="submit" name="btn" value="Opt123" />
<input type="submit" name="btn" value="Opt456" />
Send
</form>
I am not a PHP person, so code might not be the best:
$item = $_POST['btn'];
In this case, value of $item will be either Opt123 or Opt456 depending on the button pressed, whereas if the link is pressed, then it would be a null or PHP equivalent.
Even though the submit button is part of the form, the browser only sends its name=value pair as part of the post data if the button was actually clicked. When you call the .submit() method from Javascript, your browser sends the data Login$Username=myname&Login$Password=mypassword to the server. But when you actually click the button, it sends Login$Username=myname&Login$Password=mypassword&Login$LoginButton=. As you can see, it would then be very easy for the server to differentiate between the two.
So, you can trick the form into always sending that element by making it hidden. In Submit_Form, just before you say document.form1.submit();, add this:
var sbtn_hid = document.createElement('input');
sbtn_hid.type = 'hidden';
sbtn_hid.name = 'Login$LoginButton';
sbtn_hid.value = '';
document.form1.appendChild(sbtn_hid);
That adds a hidden form element with the same name as the submit button, so the server won't be able to tell the difference.
I'm working on a script where all I want it to do (right now) is redirect the user based on which button they press. Eventually it will take form input and incorporate that into the redirect, but right now I'm just trying to get the buttons to send the user off to the appropriate site. However, My redirects aren't working.
<html>
<head>
<title>
Home
</title>
</head>
<body>
<script type="text/javascript">
<!--
var textstring;
var btnWhichButton;
//Gets the text from the form
function getQ() {
textstring = document.forms['Search'].elements[0].value;
}
//Does a Google Search
function googleSearch() {
window.location ="http://www.google.com";
}
//Does a YouTube Search
function youtubeSearch() {
window.location = "http://youtube.com";
}
//Figure out which button was pressed
function whichButton() {
if (btnWhichButton.value == 'Google Search' ) {
googleSearch();
} else if (btnWhichButton.value == 'YouTube Search' ){
youtubeSearch();
}
}
//main function to run everything
function main() {
getQ();
whichButton();
}
// -->
</script>
<form name="Search" >
<input type="text" name="q" size="31" maxlength="255" value="" />
<input type="submit" value="Google Search" onclick="btnWhichButton=this; main();" />
<input type="submit" value="YouTube Search" onclick="btnWhichButton=this; main();" />
</form>
</body>
</html>
When either button is clicked, the page just reloads with ?q= appended to the url, it doesn't redirect. Any help?
You want to use a button not an input type='submit'. Your current buttons are submitting the form, not performing their onclick actions.
Or block the submit action in some way. Or you could use your functions to set the form action to the url and just let it submit.
Your scripts seem highly overcomplicated. Why not have three functions: getQ, googleSearch, and youTubeSearch? Then inside the onClick event you can call the exact function, including this.value inside the input parameters and calling getQ from inside that function? Your method seems highly inefficient. If you're going to have separate functions for each of them anyways, there's no use in going through two other functions in order to get to them.
A submit button will always submit the form without a return false at the end of the onClick event, and since the default posting method is GET, its attaching ?q= to the end of your URL because that field is blank and it's the only input field in the form.
For redirecting to new page you no need to use the big javascript function.
<html> <body>
<input type="button" value="Google Search" onclick="javascript:window.location.href='http://www.google.com'" />
<input type="button" value="You tube Search" onclick="javascript:window.location.href='http://youtube.com'" />
</body></html>
Please check whether it helps you.
Well as jasonbar says, change your input to be of type 'button' and not 'submit'. Plus, I'd rather use window.location.href instead of window.location only. I don't know possible this is good practice...happy programming.