I'm having trouble carrying localstorage data from this form to more than one html. This code below works fine (with onload="setData()" in the body of both htmls), a user inputs text into the form, and when submitted, it is carried over to main2.html. However, I need the four submit buttons to carry that data to separate htmls.
I understand that this functions because the action="main2.html" is in the form tag. This obviously means that I can't have the same form sending this data to separate pages. Is there a way of resolving this, or do I need separate forms for each page?
SENDING PAGE HTML:
<form id="form" method="GET" action="main2.html">
<input
class="name-input"
type="text"
placeholder="YOUR NAME"
name="name"
id="name"
/>
<input
class="button1"
type="button"
value="Submit"
onclick="submitForm()"
/>
<input
class="button2"
type="button"
value="Submit"
onclick="submitForm()"
/>
<input
class="button3"
type="button"
value="Submit"
onclick="submitForm()"
/>
<input
class="button4"
type="button"
value="Submit"
onclick="submitForm()"
/>
</form>
SENDING PAGE JS
<script>
function submitForm() {
if (typeof localStorage != "undefined") {
localStorage.name = document.getElementById("name").value;
}
document.getElementById("form").submit();
}
</script>
RECEIVING PAGE HTML
<div class="hey">
<h1 id="show" class="name-placeholder">Luke Jones's</h1>
</div>
RECEIVING PAGE JS
<script>
function setData() {
if (typeof localStorage != "undefined") {
document.getElementById("show").innerHTML = localStorage.name;
}
}
</script>
This could be very messy, but I got it working by listening to the comment above and removing the form, and adding JS functions for the buttons linking them to separate pages. Also keeping the sending and receiving JS from the original question.
<input
method="GET"
class="name-input"
type="text"
placeholder="YOUR NAME"
name="name"
id="name"
/>
<input
class="button1"
type="button"
value="Page1"
onclick="myFunction1(); submitForm();"
/>
<input
class="button2"
type="button"
value="Page2"
onclick="myFunction2(); submitForm();"
/>
function myFunction1() {
window.location.href = "main2.html";
}
function myFunction2() {
window.location.href = "main3.html";
}
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'm not getting form values on submit of two forms with the same class.
When I submit one of the forms,
a) Jquery submit event is called but values are empty
b) the submit event is skipped and I'm taken right to the php file where I enter the info into a database
My Jquery
$(document).ready(function(){
$('body').on('submit', '.newStaff', function(event) {
event.preventDefault();
var firstName= this.firstName.value;
// do other stuff
//complete AJAX call
});
});
My forms
<form class="newStaff" method="post" action="insertStaff.php">
<input type="text" name="firstName" />
// use other inputs.....
<input type="submit" value="submit" />
</form>
<form class="newStaff" method="post" action="insertStaff.php">
<input type="text" name="firstName" />
// use other inputs.....
<input type="submit" value="submit" />
</form>
Am I not binding correctly? Haven't had issues like this before. I've always been able to get unique input values based on the form that was submitted.
my be you can use function eq jquery for this
$(function() {
$('body').on('submit', '.newStaff', function(event) {
event.preventDefault();
var firstName = $('.newStaff input[name="firstName"]').eq(0).val();
alert(firstName);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="newStaff" method="post" action="insertStaff.php">
<input type="text" name="firstName" value="1 2 3"/>
<input type="submit" value="submit" />
</form>
<br/>
<form class="newStaff" method="post" action="insertStaff.php">
<input type="text" name="firstName" value="a b c"/>
<input type="submit" value="submit" />
</form>
Why this JavaScript code is not redirecting to the URL ? What is wrong with this code?
function submitform() {
var hiddenFieldValue = document.getElementById('course').value;
alert("inindonesia.org/marketplace/tags/"+hiddenFieldValue);
window.location.href= "inindonesia.org/marketplace/tags/"+hiddenFieldValue);
return false;
}
HTML code
<form autocomplete="off" method="POST">
<p>
Course Name <label>:</label>
<input type="text" name="course" id="course" />
<!--input type="button" value="Get Value" /-->
<input type="text" name="course_val" id="course_val" />
</p>
<input type="submit" value="Submit" onClick="submitform()"/>
</form>
As you are relying on button click, what is the need of the form??
As you put that in <form &rt; it is not working. remove form, it will work
<p>
Course Name <label>:</label>
<input type="text" name="course" id="course" />
<!--input type="button" value="Get Value" /-->
<input type="text" name="course_val" id="course_val" />
</p>
<input type="submit" value="Submit" onClick="submitform()"/>
Remove form.
You need http:// on the URL. You code updated:
function submitform(){
var hiddenFieldValue = document.getElementById('course').value;
alert("inindonesia.org/marketplace/tags/"+hiddenFieldValue);
window.location.href= "http://inindonesia.org/marketplace/tags/"+hiddenFieldValue);
return false;
}
You should use only
window.location = url;
or
window.location.replace = url;
instead off
window.location.href
cause that simulates a link
here is the discussion
How to redirect to another webpage in JavaScript/jQuery?
you are doing this :
window.location.href= "inindonesia.org/marketplace/tags/"+hiddenFieldValue);
change it to this :
window.location.href= "inindonesia.org/marketplace/tags/"+hiddenFieldValue;
NOTE THE ')' that i deleted at the end of the line.
HTML:
I want to pass the value from the gsearch to the q parameter. The following is the ways I make but it couldn't work. How should I do it?
action="http://test.com/search.php?q=<script type="text/javascript">document.getElementById('gsearch').value;</script>">
updated:
in my site. i want to make a google custom search: so i put the following code in the homepage. 0156290304977:8texhu0mrk the google search value. gsearch.php page which i put the google custom search code in and show the searched result
<form method="get" action="http://test.com/gsearch.php?cx=0156290304977:8texhu0mrk&cof=FORID:11&ie=UTF-8&q=..." >
<input type="text" title="" value="" name="q" class="search-input" id="gsearch" />
<input type="submit" value="" name="sa" id="search-button"/>
</form>
now, i want to when the user input the searched text in the gsearch text box, if he click the submit button,. then on the gsearch.php page shows the searched result.
if you want to submit to this: http://test.com/search.php?q=theinput
just do this:
<form target="_top" method="get" action="http://www.cnn.com/search.php" >
<input type="text" title="" value="theinput" name="q" class="search-input" id="gsearch" />
<input type="submit" value="submit" id="search-button"/>
</form>
the entire idea behind the <form> element is that it is making sure that all of the inputs from the user will be sent to the action.
the form will take the input from the q and add it to the action automatically.
so in your simple case. no manipulation is required.
Test it here
http://jsfiddle.net/L4rHG/1/
this will be submitted to http://edition.cnn.com/search.php?q=theinput
Or you need over javascritpt
<script>
function SubmitForm(){
window.open("http://test.com/search.php?q="+document.getElementById('gsearch').value)
return false;
}
</script>
<form method="get" action="http://test.com/search.php" onSubmit="SubmitForm();false" >
<input type="text" title="" value="" name="q" class="search-input" id="gsearch" />
<input type="submit" value="" name="sa" id="search-button"/>
</form>
<form action="http://test.com/search.php?q=">
<script>
document.forms[0].action += 'new_action.html';
</script>
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>