Send value with Onchange and javascript function - javascript

I'm new at JavaScript and I need some help to submit my form when anyone select anything from the dropdown list. Here is the sample code :
<form action="" method="post">
<select name="car" onChange="this.form.submit()">
<option value="car1">car1</option>
<option value="car1">car1</option>
<option value="car1">car1</option>
</select>
<!-- Some other code -->
<input type="submit" name="sentvalue">
</form>
This is my form and when anyone selects the dropdown, the form automatic submit but I also need the sentvalue when automatic submit the form. So can anyone help me to capture the sentvalue when anyone select the dropdown.

If you want to send any other data with the form submit you can send it in hidden inputs
<input type='hidden' name='data1' value='Test1' />
<input type='hidden' name='data2' value='Test2' />
//etc
And if you want the value of submit button with the form just set the value attribute into your code for submit button every this else seems fine,
<input type="submit" name="sentvalue" value="Test1" />
Hope this answers your question

Just give the <input> tag a name
<input name="submitbtn" type="submit" value="sentvalue" />
then you can get it by $_POST['submitbtn'] in case of PHP which value is "sentValue"

It sounds like you want the value of the input field (sentvalue) to be submitted as well. But how do you guarantee that the value was specified by the user? Is this supposed to be a hidden input field?
Either way your input tag is incomplete. This sounds better:
<input type="text" name="sentvalue"></input>
Also, when you submit, the value of this field (sentvalue) will be passed in too. As long as your tags are right you don't need to worry.

You will have to create a hidden input element
<input type='hidden' id='sentvalue' value='' />
and call a function on submit instead of directly submitting
Use this in the function to set the values and submit
var e = document.getElementByName("car");
document.getElementById("sentvalue").value = e.options[e.selectedIndex].value;
this.form.submit();

Related

How to get input data from html to nodejs [duplicate]

When I submit form by using below function it is submitting but values are not passed through this function. I use all functions but nothing found:
document.getElementById("postad").submit();
Form is given below.
<form action="register.php" id="postad" method="post">
<input class="textfield2" type="text" id="post_title" style="width:640px;" placeholder="Ad Title" onBlur="check('post_title')" />
<input class="button" type="button" name="save" value="Publish" onclick="send();" />
</form>
Your form contains two form controls. Neither will be a successful control (i.e. one that appears in the submitted data), but for different reasons.
Only form controls with name attributes can be successful. Your text input doesn't have a name. (It also doesn't have a default value, so you need to type in it first).
Buttons can only be successful if they are the submit button used to submit the form. Your button isn't a submit button and you use JavaScript to submit the form.
There is no name attribute in your input text fields
<input name="post_title" class="textfield2" type="text" id="post_title" style="width:640px;" placeholder="Ad Title" onBlur="check('post_title')" />
.........^

How to tell when Form submitted by Select onChange versus Submit Button

I need assistance determining when my form was submitted via an onChange event for a Select as opposed to the user clicking on the Submit button.
To complicate matters, I need to be able to identify the difference in PHP.
Sample HTML:
<form name='editdata' method='post' action='/editpage/recordnumber'>
<select name='select1' onchange='this.form.submit()'><options...></select>
<select name='select2' onchange='this.form.submit()'><options...></select>
<select name='select3' onchange='this.form.submit()'><options...></select>
<input type='submit' value='Submit' />
</form>
Ultimately, I just need something to latch onto using PHP that identifies whether the form was submitted by an onChange event or by a press of the Submit button.
So far I have found that I can name my submit button 'submit'. This will set $_POST['submit'], thereby telling me that the user clicked the button. However, my onChange event this.form.submit() which is applied to a couple of my Selects stops functioning when I add the name attribute to my submit button.
If I could add some sort of queryString to the end of my submit URL with one method or the other, I think that would get the job done.
You could set a hidden field which gets updated by the event:
<form name='editdata' method='post' action='/editpage/recordnumber'>
<input type="hidden" name="submitted_on_change" value="0">
<select name='select1' onchange='form_submit()'><options...></select>
<select name='select2' onchange='form_submit()'><options...></select>
<select name='select3' onchange='form_submit()'><options...></select>
<input type='submit' value='Submit' />
</form>
<script>
var form_submit = function() {
// update the hidden field to 1
// then submit the form
}
</script>
You can call multiple functions inside your onchange and fill another field with the name of the select field that caused the submission of the form (or it is empty when submit button was pressed):
<form name='editdata' method='post' action='/editpage/recordnumber'>
<input type='hidden' name='field' value='' />
<select name='select1' onchange='this.form.field.value=this.name; this.form.submit();'><options...></select>
<select name='select2' onchange='this.form.field.value=this.name; this.form.submit();'><options...></select>
<select name='select3' onchange='this.form.field.value=this.name; this.form.submit();'><options...></select>
<input type='submit' value='Submit' />
</form>

value is not set after the form is submitted

I m trying to insert user's check in value into db. For this i call the function and set the hidden field's value and than trying to submit the form but here after the form is submiteed hiden field's value is reset .
HTML Code
<form name="checkinout" action="logindetails.php" method="post" enctype="multipart/form-data" id="checkinout">
<table class="login-detaills" width="100%"><thead><th></th><th>Check In</th><th>Check Out</th><th>Hours</th></thead>
<tr><td></td><td></td><td></td><td></td></tr>
</table>
</fieldset>
<table>
<tr><td><input type="button" onClick="call()" value="checkin"></button></td><td><input type="button" id="logout" onclick="call2();" value="Check Out" ></td></tr>
<tr><td><input type="hidden" id="checkin" name="checkin"></td><td><input type="hidden" id="checkout" name="checkout"></td></tr>
</table>
</form>
Javascript
function call(){
$('#checkin').val("checkin");
$('#checkinout').submit();
}
function call2(){
$('#checkout').val("checkout");
$('#checkinout').submit();
}
PHP CODE
if(isset($_POST['checkinout']) ){
if(isset($_POST['checkin']) && $_POST['checkin']=='checkin'){
$sql = "INSERT INTO attend (loginout,log_type,fk_userid) VALUES ('".TODAY_DATETIME."','I','".$_SEESION['user_id']."')";
}elseif(isset($_POST['checkout']) && $_POST['checkout']=='checkout'){
$sql = "INSERT INTO attend (loginout,log_type,fk_userid) VALUES ('".TODAY_DATETIME."','O','".$_SEESION['user_id']."')";
}
$stmt = $class->dbh->prepare($sql);
$stmt->execute();
$res = $stmt->fetch(PDO::FETCH_ASSOC);
}
first of all its not satisfied this if(isset($_POST['checkinout'])
<input type="hidden" id="checkout"> has no name attribute, so even if you give it a value, it won't be a successful control and won't be submitted.
If you want $_POST['checkout'] to be populated, you need an element with name="checkout".
You dont have name attribute defined in you code ..For using $_POST['checkout'] you must have <input type="hidden" id="checkout" name="checkout">
It looks like you're checking if the post value $_POST['checkinout'] is set, but I dont see that form control anywhere. The only controls I see are these:
<input type="button" onClick="call()" value="checkin"></button>
<input type="button" id="logout" onclick="call2();" value="Check Out" >
<input type="hidden" id="checkin" >
<input type="hidden" id="checkout">
Like #Quentin said, they don't have a name attribute so they won't show up in the $_POST array after submission in any event, so that's another thing you must fix.
I think you're most likely assuming that, since the form id is checkinout, that the index $_POST['checkinout'] will be set upon form submission. This is not the case; only form controls (inputs, selects, checkboxes, buttons, etc.) will populate data inside of $_POST and the key inside of the $_POST array will be set equal to the value of the name attribute of the form control.
you really should consider using two submit button with your from, take a look at this question, and remove the hidden input and all the unnecessary js code

How can I submit div data to MySQL

I was wondering how can I submit div data to MySQL. Im not used to javascript so I dont really know whats happening on the javascript part but how can I get or input the action="" part and method="" part and can I or should I add value="" to the hidden input???
Form html code:
<form onsubmit="document.getElementById('hidden_data').value=document.getElementById('showing_data').innerHTML;">
<input id="hidden_data" name="data" type="hidden"/>
<div id="showing_data" class="commenttext" contenteditable="true"></div>
<input type="submit" Value="Enter" id="submitthis">
</form>
Use the hidden field inside the form tag and use the JavaScript to put the value inside it. You can get the hidden field in the $_POST['hydName'].Put the data on the click of the submit button into the hidden field. Keep your action and method of the form same as required. After the click event is fired, it will submit the form to its action URL
<input type="submit" onclick="document.getElememtById('hidden').value = document.getElementById('div').innerHtml;" />

Pass parameter from a text field contained in another form

I have two forms in a JSP page, one contains a text field. I need to make sure that whenever the other form is submitted, it copies the value contained in that text field, and writes it's text value in an hidden parameter.
More clearly:
One form is named "search";
Another form is named "changeInitialForm";
The text field is contained in the "search" form, and it's name is "searchString";
The "changeInitialForm" has an hidden field, also this named "searchString";
The purpose is to make sure that whether the user submits one or another form, a "searchString" parameter is passed, with the value of the text field.
I tried to include an action in javascript, executed when the "changeInitialForm" is submitted, that reads the text field value and writes it into the hidden parameter:
function searchContacts(form)
{
var searchString= document.search.searchString.value;
form.searchString.value= searchString;
}
...
<form name="search" >
<input type="text" name="searchString">
<button name="search"> Cerca </button>
</form>
...
<form name="changeInitialForm" method="post" action="AddressBookView.jsp" onSubmit="searchContacts(this.form);">
<input type="hidden" name="selectedInitial"/>
<input type="hidden" name="status" value="view"/>
<input type="hidden" name="searchString" />
</form>
But after the "changeInitialForm" is submitted, regardless of the text field value, and empty parameter is passed, I am seeing this with firebug:
I would also appreciate an alternative solution, because I know what I am doing is tricky, but I don't find another method to do that. "search" and "changeInitialForm" cannot be joined in a single form, because they do very different things.
The following seems to work
function searchContacts(form)
{
var searchString= document.search.searchString.value;
form.searchString.value= searchString;
}
...
Form 1:
<form name="search" >
<input type="text" name="searchString">
<button name="search"> Cerca </button>
</form>
...
Form 2:
<form name="changeInitialForm" method="post" action="AddressBookView.jsp" onSubmit="searchContacts(this);">
<input type="hidden" name="selectedInitial"/>
<input type="hidden" name="status" value="view"/>
<input type="hidden" name="searchString" />
</form>
Notice that searchContacts(this.form) was replaced with searchContacts(this).
UPDATE after some precisions by the author of the question:
The onsubmit event is not triggered when form.submit() is called by some javascript code. Thus, what you need when you submit the form is to call searchContacts separately, for example using
searchContacts(document.changeInitialForm);
document.changeInitialForm.submit();

Categories