I have a form as follows:
<form name="chat" id="chat" action="" onsubmit="sendMessage()">
<a name="chat"> </a>
<input type="text" name="chat" id="chat" size="38" maxlength="50" vertical-align="middle">
<input type="hidden" name="action" id="action" value="checkresponse">
<input type="hidden" name="response_Array[sessionid]" id="response_Array[sessionid]" value="keu88lh88ini89dgnccob54f27"><br>
<input type="text" name="response_Array[top]" id="response_Array[top]" value="a">
<input type="text" name="response_Array[second]" id="response_Array[second]" value="b"><br>
<input type="text" name="response_Array[third]" id="response_Array[third]" value="c"><br>
<input type="text" name="response_Array[fourth]" id="response_Array[fourth]" value="d"><br>
<input type="text" name="response_Array[input][0]" id="response_Array[input][0]" value="input 0"><br>
<input type="text" name="response_Array[that][0]" id="response_Array[that][0]" value="that 0"><br>
<input type="submit" name="submit" id ="submit" value="SEND" style="width: 45px">
</form>
When the user clicks Submit, I need to send all the input fields to the server.
But, the page should not get refreshed. So, I have created sendMessage(),in which I have used XMLHttpRequest object to send the form submit request.
To read input fields, I have used in sendMessage():
var infoStr = "chat="+document.forms[0]['chat'].value;
infoStr += "&action="+document.forms[0]['action'].value;
I want to know how should I read the 2D array :response_Array and parse it into a JSON string so that it can be passed to the php server code.
It is so simple
var infoStr=""
for(var i=0;i<document.forms[0].elements.length;i++)
{
infoStr+=document.forms[0].elements[i].name+"="+document.forms[0].elements[i].value+"&";
}
alert(infoStr); // You will have the full name value pairs.
Hope this solves your problem.
Related
I've a project in laravel and php and in a view I have an input where I write a string of 10 characters, and other input with max value of 1. When I write a number in the first input the other input must be content the last character from the first input.
For example:
<form action="{{route('admin.store', $admin)}}" method="POST">
<input type="text" maxlength="10" minlength="9" id="number">
<input type="text" maxlength="1" id="last">
<input type="submit" value="APPLY CHANGES" onclick="return FillTextBox()">
</form>
If I write, 2341325432, then the second input must be content the value 2, because 2 is the last character from the first input.
I tried with this but It didn't work completely.
Because in laravel in my controller dd($request->last) return a null value.
<script type="text/javascript">
function FillTextBox(){
var string = document.getElementById('number').value;
document.getElementById('last').value = string.charAt(string.length-1);
}
</script>
Why my function didn't work? I tried to capture with a button the event, o maybe I may try to capture after I write a value in the first input.
Your code will not work if you have your JavaScript set to execute on load or on DOM ready due to load order. If you swap it to be at either the bottom of <head> or <body> it will work as expected:
function FillTextBox() {
var string = document.getElementById('number').value;
document.getElementById('last').value = string.charAt(string.length - 1);
}
<form action="new_tab.php" target="_blank" method="POST">
<input type="text" maxlength="10" minlength="9" id="number">
<input type="text" readonly="read" maxlength="1" id="last">
<input type="submit" value="APPLY CHANGES" onclick="return FillTextBox()">
</form>
To prevent this, you should really be making use of unobtrusive JavaScript by adding event listeners instead of using the onclick property:
document.getElementById('submit').addEventListener('click', function() {
var string = document.getElementById('number').value;
document.getElementById('last').value = string.charAt(string.length - 1);
});
<form action="new_tab.php" target="_blank" rel="noopener noreferrer" method="POST">
<input type="text" maxlength="10" minlength="9" id="number">
<input type="text" readonly="read" maxlength="1" id="last">
<input id="submit" type="submit" value="APPLY CHANGES">
</form>
In addition to this, as you're making use of target=_"blank", you'll also want to add rel="noopener noreferrer" to your form to prevent the "Target Blank" vulnerability. I've added this to the above example.
I've added name attribute to your form fields to grab it on php code:
<form action="test.php" target="_blank" method="POST">
<input type="text" maxlength="10" name="number" minlength="9" id="number">
<input type="text" maxlength="1" name="last" id="last">
<input type="submit" value="APPLY CHANGES" onclick="return FillTextBox()">
</form>
I have a 2-step registration process which consists of 2 different HTML pages.
The second (and final) step collects all the data and sends it to the server for evaluation. For simplicity, let's say I collect user's name in the first form and user's age in the second:
formA.html:
<form action="formb.html" method="get">
Name: <input id="age" type="text" name="age">
<input id="submit_button" type="submit" value="CONTINUE">
</form>
formB.html:
<form action="serverscript.py" method="post">
Age: <input id="name" type="text" name="name">
<input id="submit_button" type="submit" value="SUBMIT">
</form>
How can I "propagate" the "name" that user has entered in formA.html to formB.html so that I can send name,age to the server?
p.s. The only way I can thinkg is doing it with and then parsing the URL in formB , but that seems very ugly...
formA.html:
<form action="formb.html" method="get">
Name: <input id="Name" type="text" name="Name">
<input id="submit_button" type="submit" value="CONTINUE">
</form>
In form B make This Changes...
formB.html:
<form action="serverscript.py" method="post">
Age: <input id="age" type="text" name="age">
<input id="Name" type="hidden" value="">
<input id="submit_button" type="submit" value="SUBMIT">
</form>
<script type="text/javascript">
var query = window.location.search.substring(1);
var Field=query.split("=");
document.getElementById("Name").value = Field[1];
</script>
Hope it will help ;)
I can think of 3 ways :
1) cookie. store the information in a cookie and read it in the second form
2) Query string.You can chain the the data to query string and read it on form B
3) You can use the action attribute of a form which can take a url. (recommended)
You can build the data you get from form A as html hidden input fields within form B on load, since you are sending your data through 'GET' method, then when you submit form B, the data will be sent to the server.
Edit
Assuming am using PHP as server side :
forma.php
<form action="formb.php" method="get">
Name: <input id="name" type="text" name="name">
<input id="submit_button" type="submit" value="CONTINUE">
</form>
formb.php
<form action="postPage.php" method="post">
Age: <input id="age" type="text" name="age">
<?php
if(isset($_GET['name'])
{
?>
<input id="name" type="hidden" name="name" value="<?php echo $_GET['name']?>"/>
<?php } ?>
<input id="submit_button" type="submit" value="SUBMIT">
</form>
Try using HTML5 sessionStorage to store data in browser session. During the session, a user could visit other pages of the domain, or other sites entirely, then return to the original domain. Any data saved in sessionStorage during that session will remain available, but only to pages in the original domain, until the tab or window is closed.
I have a form that is need to be passed to my CRM.
the form is simple and contains 2 important fields that defines under what category the data will be received in my crm.
<form method="post" action="http://api.leadmanager.co.il/v1/submit" id="lm_form">
<input type="hidden" name="lm_form" value="5750" />
<input type="hidden" name="lm_key" value="cc0ce4fe280e46e986e5716f9feedaab" />
<input type="hidden" name="lm_tyt" value="" />
<input type="submit" value="submit"/>
</form>
I want to add a drop down list with 2 options first will send the form i mentiond above as is.
the second will modify the values of "lm_key" and "lm_form" to other values.
Plain JS code can be like this. But I would advice you to use some JS library like JQuery, AngulerJS or another one.
<form method="post" action="http://api.leadmanager.co.il/v1/submit" id="lm_form" name="form">
<input type="hidden" name="lm_form" value="5750" />
<input type="hidden" name="lm_key" value="cc0ce4fe280e46e986e5716f9feedaab" />
<input type="hidden" name="lm_tyt" value="" />
<select name="selectField" onchange="changeValues()">
<option value="1">1</value>
<option value="2">2</value>
</select>
<input type="submit" value="submit"/>
</form>
<script>
function changeValues() {
form.lm_key.value = form.selectField.value;
form.lm_form.value = form.selectField.value;
}
</script>
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 using the jQuery .serialize function and can't get it to serialize the proper form on submit.
my js code:
function getquerystring(form) {
return $("form").serialize();
}
my forms:
<div class="leave_message_box">
<form name="leave_message_form">
<input type="text" name="clock_code" placeholder="Clock Code" />
<input type="text" name="message" placeholder="Message (Blank for none)"/>
<input type="hidden" name="type" value="leave_message" />
<input value="Leave Message" type="button" onclick='JavaScript:xmlhttpPost("clockin.php", "leave_message_form")'></p>
</form>
</div>
<div class="outside_job_box">
<form name="outside_job_form">
<input type="text" name="clock_code" placeholder="Clock Code" />
<input type="text" name="message" placeholder="Message (Blank for none)"/>
<input type="hidden" name="type" value="ouside_job" />
<input value="Outside Job" type="button" onclick='JavaScript:xmlhttpPost("clockin.php", "outside_job_form")'></p>
</form>
</div>
I must be doing something wrong in passing the variable. the full code # pastie. The function I have does work, however, its always the last form that gets submitted.
Using this code:
$("form")
will find all the <form> elements in your document.
Given that form is a string containing the name of the form, what you want instead is this:
$("form[name='" + form + "']")
Looking at your supplied code, I have this suggestion. Instead of passing the form name to your function, why not just pass the form itself?
<button onclick="xmlhttpPost('blah', this.form)">
You also don't need to put javascript: in the onclick, onfocus, onwhatever properties.
I would suggest putting an ID attribute on the form and then using that ID as an explicit selector for jQuery:
<div class="outside_job_box">
<form id="outside_job_form" name="outside_job_form">
<input type="text" name="clock_code" placeholder="Clock Code" />
<input type="text" name="message" placeholder="Message (Blank for none)"/>
<input type="hidden" name="type" value="ouside_job" />
<input value="Outside Job" type="button" onclick='JavaScript:xmlhttpPost("clockin.php", "outside_job_form")'></p>
</form>
</div>
Then you would select and serialize it like this;
var f = $("#outside_job_form").serialize();
Not only making your code more effecient but more readable, in my opinion.
If the sole purpose is to encode simple text into URL format then use encodeURIComponent().