sending form data across two pages with added javascript - javascript

I'm stuck! - I have a search form, that when data is entered and submitted, the data is sent to another page! - this works well see eg below.
My problem is, I have a piece of javascript called "greybox", it basically loads an external, dimming the first page and focusing on the external - see eg below.
normal working
The new window can be called via either a href "rel" link or an "onclick" command.
I have tried implementing the the two together to no success..Whichever method I use, when i use the greybox the data from the original form is not passed over! - this is what I have so far...
example1, Using standard form with an "onclick" function on the submit button example 1
<body>
<script>
GB_show(caption, url, /*optional*/ height, width, callback_fn)
</script>
<form name="form1" action="test_script.php" method="post">
<input type="text" name="var1" value="">
<input type="submit" name="submit" value="submit" onclick="return GB_show('Search', 'http://www.nctfleetlist.co.uk/test_script.php', this.href)">
</form>
</body>
example 2 - using "onsubmit" [example 2][3]
<body>
<script>
GB_show(caption, url, /*optional*/ height, width, callback_fn)
</script>
<form name="form1" action="test_script.php" method="post" onSubmit="return GB_show('Search', 'http://www.nctfleetlist.co.uk/test_script.php', this.href)">
<input type="text" name="var1" value="">
<input type="submit" name="submit" value="submit">
</form>
</body>
example 3 - using a javascript text link
<body>
<form name="form1" action="test_script.php" method="post">
<input type="text" name="var1" value="">
Search
</form>
</body>
To see the other working pages, simply change eg1.php to eg2.php or eg3.php
If anyone can help me, it would be much appreciated!

Related

Acces HTML action from different URL's

*this is my HTML code :
<form method="POST" action="/sendMail">
is it possible to use this action with for example this url : test/en/sendMail ?
How can i define in the html , that the action should listen to
test/en/sendMail
test/de/sendMail
test/sendMail
without using this 3 times
<form method="POST" action="/en/sendMail">
<form method="POST" action="/de/sendMail">
<form method="POST" action="/sendMail">
Im using NodeJs by the way.
Thanks for your help!
Not pretty sure but you can use formaction on your submit button as:
<form>
[fields]
<input type="submit" value="Submit to a" formaction="/submit/a">
<input type="submit" value="submit to b" formaction="/submit/b">
</form>
More info on this available on link : http://www.wufoo.com/html5/attributes/13-formaction.html

Javascript: change element value by input textbox

I want to change THISVALUE using a textbox and submit button, which then refreshes the data on the page:
<form id="newssearch" action="#">
<input type="text" size="30" maxlength="155" name="search" id="search" />
<input type="button" name="submit" value="Search" onclick="showElements();" />
</form>
<div class="sm" data-type="static" data-symbol="THISVALUE" data-size="medium" data-logscale="on" data-chart-type="ca" data-timeframe="1y"></div>
<div class="sm" data-type="news" data-symbol="THISVALUE"></div>
Also: you press the button and it refreshes the page with the new data-symbol value. That value stays for the next visit to the page or until another search is performed.
Perhaps it would be better to do this in php?
You can also use the setAttribute() function
function showElements(){
document.getElementsByClassName('blah')[0].setAttribute("data-symbol",document.getElementById('search').value);
}
First off - data-symbol is not an element. It is an attribute and to be more specific - a data attribute.
Learn more about data attributes here: Using data attributes | MDN
I assume you want the data submitted in the form to get into the data-symbol attribute.
Checkout the working code snippet below:
function showElements(){
// just copy over the search text into the data attribute
document.getElementsByClassName('blah')[0].dataset.symbol = document.getElementById('search').value;
}
<div class="blah" data-type="cur" data-symbol="THISVALUE"></div>
<form id="newssearch" action="#">
<input type="text" size="30" maxlength="155" name="search" id="search" />
<input type="button" name="submit" value="Search" onclick="showElements();" /> <!-- no need to pass any arguments to this function, we can get data using element ID -->
</form>
Check the result using Developer Tools (I have used Chrome here):

Input value from different form

I have two forms on my page...
<form method="post" action="">
<input type="text" name="name" id="name"/>
<input type="submit" name="form1_submit_pushed"/>
</form>
<form method="post" action="">
<input type="submit" name="form2_submit_pushed/>
</form>
On my php side I want to be able to know the value of the text input "name" when I push the submit button of the second form. Kind of like....
if(isset($_POST['form2_submit_pushed']))
{
echo $_POST['name']; //or something else?
}
The reason behind is that first form has a bunch of data that I don't want in the second form submission.
You could do something like this...this code uses jQuery:
<form id="form1" method="post" action="">
<input type="text" name="name" id="name"/>
<input type="submit" name="form1_submit_pushed"/>
<input type="hidden" name="form2_submit_pushed" id="form2_submit_pushed">
</form>
<form id="form2" method="post" action="">
<input type="submit" name="form2_submit_pushed"/>
</form>
<script>
$('#form2').submit(function(event) {
//prevent form2 from submitting and submit form1 instead...
event.preventDefault();
//before submitting, indicate that the "form2_submit_pushed" button was pushed
$('#form2_submit_pushed').val(true);
//submit form1
$('#form1').submit();
});
</script>
...but why you would want to I don't know. Why not make all the controls part of the same form? HTML is designed to send info from only one form (at a time) to the server...
UPDATE: Sorry, I didn't notice your line where you explain your reason for wanting to do this. If you want more explicit control over what gets sent to the server I recommend using AJAX to submit the form. Look at https://api.jquery.com/serializeArray/ and https://api.jquery.com/jQuery.ajax/
Correct me if I am wrong here, but I beleive normal HTML will only post the inputs from the form you are posting from. One option would be to have a hidden input on the second form which gets updated via javascript during the input's change event.
So, you could do something like this (I don't recommend inline javascript but it should get you in the right direction):
<form method="post" action="">
<input type="text" name="name" id="name" onchange="document.getElementById('hiddenname').value=this.value"/>
<input type="submit" name="form1_submit_pushed"/>
</form>
<form method="post" action="">
<input type="hidden" name="hiddenname" id="hiddenname"/>
<input type="submit" name="form2_submit_pushed/>
</form>
Then you just need to get it using
$_POST['hiddenname'];

Auto Submitted form not carrying the values into Page which is mentioned in Action attribute of <form> tag

I tried to do auto form submission.It works fine and it redirected to the action page.But,it does not carry the values.Please help me to find the solution.
<form method="POST" action="SamplePage" name="myForm" id="formone">
<input type="hidden" name="AMT" value="10"/>
<input type="hidden" name="ID" id="cust"/>
<input type="submit" value="Submit" id="bu" name="i"/>
</form>
I used document.getElementById("formone").submit(); the for auto submission.
Try like this
document.forms["formone"].submit();
or you can try like
document.formone.submit();
Where your form name should be formone
And at your action page try to access the REQUEST values
print_r($_REQUEST);

Javascript injection

I would like to fill out and a submit a form explicitly with JavaScript. First, I thought I had to use window.open but it's certainly wrong because if it gets loaded, the left of my scripts written for example in a html file would be ignored.
Do I have to create a .js file and fire that one?
uhhhh...not exactly sure how this relates to injections...you can do this with jQuery in a handful of lines of code.
say you have the following form:
<form id="theForm" name="testForm" action="whatever.php" method="get">
<input type="text" name="cow" />
<input type="text" name="sheep" />
<input type="text" name="pig" />
<input type="submit" value="Submit" />
</form>
If you have jQuery loaded, all you need to do is this:
function submitForm(){
var cowVal="Cows go moooo!";
var sheepVal="Sheep go baaaaaaah!";
var pigVal="pigs go sooooeeeeeeeh!";
$("#theForm input").eq(0).val(cowVal).next().val(sheepVal).next().val(pigVal).parent().submit();
}
Hope that helps!

Categories

Resources