I have basic example of submitting a value to a hidden. But its seems not to want to take my value in my function. Maybe there us something am missing.
<script language="JavaScript">
function submitForm() {
document.statusform.do.value = "checkstatus";
document.statusform.submit();
}
</script>
<form action="" method="GET" enctype="multipart/form-data" id="statusform">
<input type="hidden" name="do" id="do" value="">
<input type="submit" class="button" name="submit" value="Resume Request" onClick="submitForm();" /></form>
First, You're wrong in this part:
document.statusform.do.value = "checkstatus";
document.statusform.submit();
In firefox error console it will be show an error:
Error: TypeError: document.statusform is undefined
Change that code to:
document.forms['statusform'].do.value = "checkstatus";
document.forms['statusform'].submit();
Second, remove name attribute from submit button.
Change this part:
<input type="submit" class="button" name="submit" value="Resume Request" onClick="submitForm();" /></form>
to:
<input type="submit" class="button" value="Resume Request" onClick="submitForm();" /></form>
change
<form action="" method="GET" enctype="multipart/form-data" id="statusform">
to
<form action="" method="GET" enctype="multipart/form-data" name="statusform">
Related
If I have a simple html form with two submit buttons:
<form method="POST" class="submit_form main_form" action="myaction">
<input type="submit" name="goback" value="Go Back" />
<input type="submit" name="confirm" value="Confirm">
<input type="hidden" name="secret" value="hello"/>
</form>
It is possible to only post the hidden input if the "confirm" submit is clicked?
If the "goback" submit is clicked the hidden input should be ignored. I know how to accomplish this with JavaScript but was wondering if it can be done with just html.
For anyone wondering, this is how you do this in JavaScript:
<script>
var elements = document.getElementsByClassName('submit_form');
elements[0].addEventListener(
'submit',
function(event) {
if(event.explicitOriginalTarget.name === 'goback'){
var hiddenInput = document.querySelector("input[name='step']");
hiddenInput.setAttribute("disabled", "disabled");
}
}
);
</script>
You could put the buttons in 2 separate forms:
<form method="POST" class="submit_form main_form" action="myaction">
<input type="submit" name="goback" value="Go Back" />
</form>
<form method="POST" class="submit_form main_form" action="myaction">
<input type="submit" name="confirm" value="Confirm">
<input type="hidden" name="secret" value="hello"/>
</form>
That way the secret field will only be posted if the confirm button is clicked.
If you want to do it in the php code you can leave your form as is
and check if isset($_POST["confirm"]) to check if the confirm button was the one clicked.
I am trying to write this, but it doesn't seem to work. Please help me.
<form name="myForm" action="/action_page.php" onsubmit="" method="post">
Name: <input type="text" name="fname">
<script>
function myFunction(){
alert("Hello there!");
}
document.forms[0].setAttribute("onsubmit", "return myFunction();");
</script>
<input type="submit" value="Submit">
</form>
Move the script tag with your JavaScript code outside your form tags, and actually return something from the submit handler function, then it works:
<form name="myForm" action="/action_page.php" onsubmit="" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
<script>
function myFunction(){
alert("Hello there!");
return true;
}
document.forms[0].setAttribute("onsubmit", "return myFunction()");
</script>
I run into absolutely wierd Chrome's behavoir. Below is the code
<form method="post" id="form" accept-charset="UTF-8" action="/lalala">
<input type="submit" />
<input type="text" name="submit" value="Post this" />
</form>
<script>
setTimeout(function(){
var forma = document.getElementById("form");
console.log(forma.submit);
forma.submit();
},30000);
</script>
it prints to Chrome debug window
<input type="text" name="submit" value="Post this">
Uncaught TypeError: object is not a function
i.e. document.getElementById("form").submit is an input, but not submit callback!!
Is it possible to submit this form keeping input name=submit?
Is it possible to submit this form keeping input name=submit?
I believe, the answer is NO.
I run into absolutely wierd Chrome's behavoir.
I could find the problem in Firefox too.
The moment you use the key word submit as either the name or id of an element within a form, the form.submit turns in to an object referring the corresponding node instead of the function to submit the form.
Please refer the JSFiddle
<form method="post" id="form" accept-charset="UTF-8" action="/lalala">
<input type="submit" />
<input type="text" name="submit" value="Post this" />
</form>
var form = document.getElementById("form");
console.log(typeof form.submit);
OK I've found the solution:
<input id="submit" type="submit" />
<script>
var button = document.getElementById("submit");
button.click();
</script>
Here is one form example. It is working good without any issue.
<form action="http://example.com/add_to_cart" class="form-horizontal" method="post" accept-charset="utf-8"></form>
<input type="hidden" name="cartkey" value="">
<input type="hidden" name="id" value="10">
<button type="submit" value="submit"> Add to Cart</button>
<form action="http://example.com/add_to_cart" class="form-horizontal" method="post" accept-charset="utf-8"></form>
<input type="hidden" name="cartkey" value="">
<input type="hidden" name="id" value="3">
<button type="submit" value="submit"> Add to Cart</button>
<form action="http://example.com/add_to_cart" class="form-horizontal" method="post" accept-charset="utf-8"></form>
<input type="hidden" name="cartkey" value="">
<input type="hidden" name="id" value="5">
<button type="submit" value="submit"> Add to Cart</button>
Now I have to create the same form but a little modification needed. I have my markup like this
<form action="http://example.com/add_to_cart" class="form-horizontal" method="post" accept-charset="utf-8">
<button type="submit" value="submit" data-value="10" data-name="id">Try Now</button>
<button type="submit" value="submit" data-value="3" data-name="id">Try Now</button>
<button type="submit" value="submit" data-value="5" data-name="id">Try Now</button>
</form>
To submit the form I have used this jQuery.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('button[type=submit]').click(function() {
var Id = jQuery(this).attr('data-value');
var Name = jQuery(this).attr('data-name');
alert(Name);
})
});
</script>
But from this point of jQuery I don't know what to do next. So can someone kindly tell me how to submit the form by jquery with the same values as used above markup?
Update
Yes I can change my markup if you think so.
First of all, your HTML is not correct. Move the inputs inside of the form:
<form action="..." class="form-horizontal" method="post" accept-charset="utf-8">
<input type="hidden" name="cartkey" value="">
<input type="hidden" name="id" value="10">
<button type="submit" value="submit"> Add to Cart</button>
</form>
You can have any number of forms like above. In the JavaScript side you have to catch submit event for all forms. In the submit handler, this will be the form that was submitted.
$(document).ready(function () {
$("form").on("submit", function () {
$.ajax({
type: "POST",
url: formUrl,
data: $(this).serializeArray(),
success: function (data) {
/* handle success */
},
error: function (data) {
/* handle error */
},
dataType: "json" // remove this if the server doesn't send json data
});
return false; // prevent default browser behavior
});
});
Note $(this).serializeArray() - this returns an array like this:
[{
name: "some-input-name",
value: "some-input-value"
}, ...
Also, you may checkout the return false usage: When and why to 'return false' in JavaScript?
I'm currently working on a basic form. When you hit the submit button, it should first change the value of a field, and then submit the form as usual. It all looks a bit like this:
<form name="myform" id="myform" action="action.php">
<input type="hidden" name="myinput" value="0" />
<input type="text" name="message" value="" />
<input type="submit" name="submit" onclick="DoSubmit()" />
</form>
And this is how far I've come with the JavaScript code. It changes "myinput"'s value to 1, but it does not submit the form.
function DoSubmit(){
document.myform.myinput.value = '1';
document.getElementById("myform").submit();
}
You could do something like this instead:
<form name="myform" action="action.php" onsubmit="DoSubmit();">
<input type="hidden" name="myinput" value="0" />
<input type="text" name="message" value="" />
<input type="submit" name="submit" />
</form>
And then modify your DoSubmit function to just return true, indicating that "it's OK, now you can submit the form" to the browser:
function DoSubmit(){
document.myform.myinput.value = '1';
return true;
}
I'd also be wary of using onclick events on a submit button; the order of events isn't immediately obvious, and your callback won't get called if the user submits by, for example, hitting return in a textbox.
document.getElementById("myform").submit();
This won't work as your form tag doesn't have an id.
Change it like this and it should work:
<form name="myform" id="myform" action="action.php">
Here is simple code. You must set an id for your input. Here call it 'myInput':
var myform = document.getElementById('myform');
myform.onsubmit = function(){
document.getElementById('myInput').value = '1';
myform.submit();
};
No. When your input type is submit, you should have an onsubmit event declared in the markup and then do the changes you want. Meaning, have an onsubmit defined in your form tag.
Otherwise change the input type to a button and then define an onclick event for that button.
You're trying to access an element based on the name attribute which works for postbacks to the server, but JavaScript responds to the id attribute. Add an id with the same value as name and all should work fine.
<form name="myform" id="myform" action="action.php">
<input type="hidden" name="myinput" id="myinput" value="0" />
<input type="text" name="message" id="message" value="" />
<input type="submit" name="submit" id="submit" onclick="DoSubmit()" />
</form>
function DoSubmit(){
document.getElementById("myinput").value = '1';
return true;
}
My problem turned out to be that I was assigning as document.getElementById("myinput").Value = '1';
Notice the capital V in Value? Once I changed it to small case, i.e., value, the data started posting. Odd as it was not giving any JavaScript errors either.
I have done this and it works for me.
At first you must add a script such as my SetHolderParent() and call in the html code like below.
function SetHolderParent(value) {
alert(value);
}
<input type="submit" value="Submit" onclick="SetHolderParent(222);" />
You can use the onchange event:
<form name="myform" id="myform" action="action.php">
<input type="hidden" name="myinput" value="0" onchange="this.form.submit()"/>
<input type="text" name="message" value="" />
<input type="submit" name="submit" onclick="DoSubmit()" />
</form>
This might help you.
Your HTML
<form id="myform" action="action.php">
<input type="hidden" name="myinput" value="0" />
<input type="text" name="message" value="" />
<input type="submit" name="submit" onclick="save()" />
</form>
Your Script
<script>
function save(){
$('#myinput').val('1');
$('#form').submit();
}
</script>