I have a script here right now that will display(alert) me the ID from the reaction and the First Name and Last Name. Now I need it that when I press this button it will store the ID in a hidden form input so it will send it to the database.
Script that alerts the data:
<script type="text/javascript">
function printIt(id){
alert(document.getElementById(id).value);
alert(document.getElementById('naam'+id).value);
}
</script>
<form name="formName">
<input type=hidden id="'.$reactie['id'].'" name="abcName" value="'.$reactie['id'] .'"/>
<input type=hidden id="naam'.$reactie['id'].'" name="abcName" value="Reactie op bericht van '.$reactie['voornaam'].' ' .$reactie['achternaam'] .'"/>
<input class="btn btn-primary btn-xs" type=button value="Reageer" onclick="printIt(\''.$reactie['id'] .'\')" />
</form>
Script that sends the form (where the ID needs to be added) to the database:
<?php if(isset($_POST['react_btn'])){ unset($q1); $q1['reactie'] = $app->check_string($_POST['reactie']);
$q1['topic_id'] = $app->check_string($_POST['topicid']);
$q1['klant_id'] = $app->check_string($_POST['klantid']);
$q1['ledenpagina_id'] = $app->check_string($_POST['ledenpaginaid']);
$app->insert_query('reacties', $q1, 'id');
}
?>
<form action="" method="post"> <div class="form-group">
<label for="comment">Reactie:</label>
<textarea class="form-control" name="reactie" rows="3" id="comment"></textarea>
<input type="hidden" name="klantid" value="<?php echo $_SESSION["klant_id"] ?>"> <input type="hidden" name="topicid" value="<?php echo $actieftopicid ?>">
<input type="hidden" name="ledenpaginaid" value="<?php echo $_SESSION["ledenpagina_id"]; ?>">
<input type="hidden" name="onderreactieID" value="<?php echo $reactie; ?>">
<button type="submit" name="react_btn" class="btn btn-primary">Plaats reactie</button>
</div>
</form>
Summary:
I need the data from the first script ($reactie['id']) when you press the button to fill that in some hidden field. That field needs to go to the database.
So it needs to set that javascript in a hidden field somehow. And when you didnt press anybuttons it needs to be a default 0.
Set <input type="hidden" value="0"/> and when no button pressed you get 0 from hidden input(click on Check Value button to see it)
And 'when a button is pressed'(SetID ! button) will set the given id.
it follows:
function setID(iD){
var hidden_input = document.getElementById('my_hidden_input');
hidden_input.value = iD;
alert('The ID given from button is "' + iD + '".');
alert('The new value of my_hidden_input is "' + hidden_input.value + '".');
}
function check(){
alert('The value of my_hidden_input is "' + document.getElementById('my_hidden_input').value + '".');
}
<form>
<input type="hidden" id="my_hidden_input" value="0"/>
<input type="button" value="SetID !" onclick="setID('MyID')" />
<input type="button" value="Check Value" onclick="check()" />
</form>
You should already have a hidden input ready if you otherwise want to set reactieID to 0. You can set the value with javaScript on click event.
console.log("Value of hidden input reactieID = " + document.getElementById('reactieHier').value);
<form name="formName">
<input class="btn btn-primary btn-xs" type=button value="Reageer" onclick="document.getElementById(
'reactieHier').value = '5'; console.log('Value of hidden input reactieID = ' + document.getElementById('reactieHier').value)" />
</form>
<form>
<div class="form-group">
<label for="comment">Reactie:</label>
<textarea class="form-control" name="reactie" rows="3" id="comment"></textarea>
<input type="hidden" name="klantid" value="99">
<input type="hidden" name="topicid" value="99">
<input type="hidden" name="ledenpaginaid" value="99">
<input type="hidden" name="onderreactieID" value="99">
<input type="hidden" name="reactieID" id="reactieHier" value="0">
<button type="submit" name="react_btn" class="btn btn-primary">Plaats reactie</button>
</div>
</form>
Related
I have the following variables:
$aantalcompleet
$ready
$totaalaantal
$aantalcompleet is a value get from DB.
$totaalaantal is also a value get from DB.
$ready is the value get from the form.
I want to check if $aantalcompleet + $ready > $totaalaantal before submit the form.
If this sum is TRUE, I want to get a confirm message with "Continue or Cancel".
If the sum is FALSE, the form can sumbit without message.
my form:
<form action="" method="POST">
<div class="col-lg-3">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button" name="reset_form" value="Reset Form" onclick="this.form.reset();"><i class="fa fa-trash-o"></i></button>
</span>
<input type="number" class="form-control" name="complete" id="complete" value="" placeholder="0">
<input type="hidden" name="machine" value="<?php echo $machine;?>">
<input type="hidden" name="base" value="<?php echo $base;?>">
<input type="hidden" name="lot" value="<?php echo $lot;?>">
<input type="hidden" name="split" value="<?php echo $split;?>">
<input type="hidden" name="sub" value="<?php echo $sub;?>">
<input type="hidden" name="seq" value="<?php echo $seq;?>">
</div>
</div>
<button class="btn btn-default" style="height:35px;width:200px" type="submit" value="gereed" name="gereed">Gereed</button>
Add this to your page somewhere in <head>
<script>
function onsubmit(event){
if($aantalcompleet + $ready > $totaalaantal){
if(!confirm('Continue or Cancel')){
event.preventDefault();
return false;
}
return true;
}
return true;
}
</script>
Assuming your PHP variables $aantalcompleet, $totaalaantal, and $ready are available in the same file with your form, place the following code to a place where those variables have their expected values (i.e. they are filled with the values from database, maybe just after your sql query if any)
<script>
var $aantalcompleet = <?php echo $aantalcompleet; ?>;
var $totaalaantal = <?php echo $totaalaantal; ?>;
var $ready = <?php echo $ready; ?>;
</script>
Then add onsubmit="return onsubmit(event)" to your form tag, like
<form action="" method="POST" onsubmit="return onsubmit(event)">
Every time I access $_POST on the other page, there is no value. How do we submit post request if the form is in innerHTML?
function edit(firstname){
var firstname_old = document.getElementById("firstname-div")
//Set id="FirstName" to your input field
firstname_old.innerHTML= 'First Name:<input type="text" id="FirstName" name="firstname" value="'+ firstname +'">';
}
<form class="" action="summary.php" method="post">
<div id="firstname-div">
<?php echo "First Name: $firstname<br>"; ?>
</div>
<button type="button" onclick="edit('<?php echo $firstname ?>')">edit</button><br>
<input type="submit" name="submit" value="submit">
</form>
When you are not in "edit-mode" your're putting out just a text.
<?php echo "First Name: $firstname<br>"; ?>
Thist text is inside the form which will be submitted but its not a form-field! To achieve what you want (deliver the content of "firstname" via ajax) you need a "hidden field".
So you put the same value which is shown in the text to a hidden input like this.
<form class="" action="summary.php" method="post">
<div id="firstname-div">
<?php echo "First Name: $firstname<br>"; ?>
</div>
<button type="button" onclick="edit('<?php echo $firstname ?>')">edit</button><br>
<input type="hidden" name="firstname" value="'<?php echo $firstname ?>'">
<input type="submit" name="submit" value="submit">
</form>
What I understand that you want to display a textbox to edit the name on clicking the edit button . Here is one solution for that:-
<script>
$(document).ready(function(){
$("#edit").click(function(){
document.getElementById("firstname-div").style.display = "none" ;
document.getElementById("firstname-div-edit").style.display = "block" ;
});
});
</script>
<HTML>
<form class="" action="summary.php" method="post">
<div id="firstname-div">
<?php echo "First Name: $firstname<br>"; ?>
</div>
<div id="firstname-div-edit" style="display:none;">
<input type="text" name="firstname" value="'<?php echo $firstname ?>'">
</div>
<button type="button" id="edit">edit</button><br>
<input type="submit" name="submit" value="submit">
</form>
</HTML>
Check and let me know if it works for you or not.
I want to insert data through AJAX (without reload page). I tried but it is not showing data and also reload page.
I have a file first.php (in which, form is present), a AJAX code and a firstcall.php where query will be execute.
My first.php (html form) is:
<form class="reservation-form mb-0" action="" method="post" autocomplete="off">
<input name="name1" id="name1" class="form-control" type="text" placeholder="Enter Name" required aria-required="true">
<input name="age" id="age" class="form-control" required type="number" placeholder="Enter Age" aria-required="true">
<input type="checkbox" id="checkbox" class="checkbox1" name="namec[]" value="<?php echo $value['id']; ?>" >
<input type="submit" class="pull-right btn btn-warning" value="Submit" id="submit">
</form>
Here data should be display:
<div class="col-md-5">
<div class="panel panel-primary" id="showdata">
</div>
</div>
AJAX is:
<script type="text/javascript">
$(document).ready(function(){
$("#submit").click(function(){
var name1 = $("#name1").val();
var age = $("#age").val();
var chkArray=[];
$('.checkbox1:checked').each( function() {
chkArray.push($(this).val());
} );
var selected;
selected = chkArray.join(',') ;
if(selected.length > 1){
$.ajax( {
url:'firstcall.php',
type:'POST',
data:{name1: name1,age: age,namec: chkArray},
}).done(function(data){
$("#showdata").html(data);
});
}
else{
alert("Please at least one of the checkbox");
}
}
}
</script>
firstcall.php is:
<div class="panel panel-primary" id="showdata">
<?php
foreach($_POST['namec'] as $selected){
echo $selected;
$_SESSION['name1']=$_POST["name1"];
$_SESSION['age']=$_POST["age"];
echo $name1=$_SESSION['name1'];
echo $age=$_SESSION['age'];
$query=mysql_query("insert into patient_details (p_name,p_age,g_number) values ('$name1','$age','$selected')") or die(mysql_error());
}
?>
After $("#submit").click(function(event){ add command
event.preventDefault();
And your page will not be reloaded
The submit button will automatically reload the page on click so the solution is either change the button type to button or add preventDefault to the click event
$("#submit1,#submit2").click(function() {
alert('form submited')
})
$("#submit3").click(function(e) {
e.preventDefault();
alert('form submited')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
this will reload the page
<input type="submit" class="pull-right btn btn-warning" value="Submit" id="submit1">
</form>
<form>
this will not reload the page
<input type="button" value="Submit" id="submit2">
</form>
<form>
this will not reload the page
<input type="submit" value="Submit" id="submit3">
</form>
i have used class='required' for required validation which is working fine when i remove onClick="this.form.submit(); this.disabled=true;
from submit button.
i want to disable multi click with validation
<form action="<?php echo $this->url('weeklyplan', array('action' => 'add')); ?>" method="post" id='myform'>
<div class="mainformdiv">
<div class= "formelementblock">
<div class="formelement">
<select name="txtdefined_week_id" id="txtdefined_week_id" class="select-block required" onchange="showdateranges()">
<option value="">Select Defined Week</option>
<?php foreach ($definedweeks as $obj) { ?>
<option value="<?php echo $obj->defined_week_id; ?>"><?php echo $obj->start_day . "-" . $obj->end_day; ?></option>
<?php } ?>
</select>
</div>
</div>
<div class= "formelementblock">
<div class="formelement">
<input type="text" readonly="readonly" name="txtstart_date" class="input-text datepickerwidth required" id="txtstart_date" placeholder="Start Date*"/>
</div>
</div>
<div class= "formelementblock last">
<div class="formelement">
<input type="text" readonly="readonly" name="txtend_date" class="input-text datepickerwidth required" id="txtend_date" placeholder="End Date*"/>
</div>
</div>
</div>
<div class="clear"></div>
<div class="form-button">
<div class="button-block">
<input onClick="this.form.submit(); this.disabled=true;" class="button" type="submit" name="button" id="button" value="Save" />
<input class="button" type="button" name="button" id="button" value="Cancel" onclick="window.location = '<?php echo $this->url('weeklyplan', array('action' => 'index')); ?>'" />
</div>
</div>
</form>
$(document).ready(function() {
$("#button").click(function(){
$('#button').attr('disabled',true);
$('#myform').submit();
var no=$("#myform").validate().toShow.length;
if(no!=0){
$('#button').attr('disabled',false);
}
});
});
You are using html5 form validation. If you want to check if the inputs are valid before submit you have to change the:
<input onClick="this.form.submit(); this.disabled=true;" class="button" type="submit" name="button" id="button" value="Save" />
To something like:
<input onClick="checkform(); this.disabled=true;" class="button" type="button" name="button" id="button" value="Save" />
Notice that the button is not a 'submit' type but rather a normal button. With this you can create a javascript function ("checkform()") that checks if the inputs are valid. There is a function in javascript that returns whether an input with the 'required' html5 attribute is valid. This function is:
inputElement.checkValidity()
After you checked if all inputs are valid you can submit the form.
I have this code:
HTML:
<form method="post" action="<?php echo $this->serverUrl().str_replace('public','',$this->basePath()).'/user/sendmessagetoinbox/'; ?>">
<fieldset>
<label>Subject</label>
<input type="text" name="inbox_subject" />
</fieldset>
<fieldset>
<label>Message</label>
<textarea name="inbox_message"></textarea>
</fieldset>
<fieldset>
<button type="submit" class="btn btn-primary btn-save send-btn">Send message to inbox</button>
<!-- <input type="submit" class="btn btn-submit" value="Send message to inbox" /> -->
</fieldset>
<input type="hidden" value="" name="patient-id" />
</form>
JS:
$('#inMail').on('show.bs.modal', function (event) {
var url='<?php echo $this->serverUrl().str_replace('public','',$this->basePath()).'/user/sendmessagetoinbox/'; ?>';
console.log(url);
var pId = $(event.relatedTarget).data('patientId')
console.log(pId); //UNDEFINED
$(".modal-body").find('form').attr("action",url+pId);
})
I wish to send patient ID in action the following form. How to do this?
try adding id="patient-id" in put tag:
<input type="hidden" value="" id="patient-id" name="patient-id" />
also
var pId = $('#patient-id').val();
Can you please check for this
var pId = $(event.relatedTarget).data('patientId');
Try replacing with
var pId = $(event.relatedTarget).data('patient-id');
I think its all about form name property